Add the Recent Blogger Posts

From your Blogger Dashboard, go to Layout > click on Add a Gadget link
From the pop-up window, scroll down and choose HTML/JavaScript
Inside the empty box, add the following code:

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjCcnJn1a7D_Vg8Y9vx_X_nUoVXhqzD8q2NcXIR-kkm6GP7PsF1OxmGjnq_juG5V6RchxFUqYwJXk_SE7OmURISVlNyGQJN9YJ-z02xys2GWY6hrIBxDOhpgwuIXJiNFj_lYhI3JS7qU/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>


! Replace YOUR-BLOG with the url of your site/blog (ex: http://helplogger.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of your url, otherwise it won't function properly.
  • To disable the scroll bar, remove the number 500
  • By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
  • if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10

CSS for SWEDISH WEB DESIGN

#blog-pager {
display:none;
}

html, body {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcMQiW44lvYhJwjNRRAspRE4ph4WGAErzJq9vk4mEfpnjVreJ5GvHAIIfbvhrtKl8kfuVqFp4YKD8D5u8m8kFqABoBY75Go_bUM6diiO_sqmoTLqReWysSNeEJIipzKw7ma_z-GTl5bKA/s1600/Nunnor---Copy2.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.footer-outer {
    border: none !important;
}

.post-title.entry-title{
display: none;
}

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img
{
-webkit-box-shadow:none;
box-shadow:none;
}