Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post summary as well. If you want to know how to add this Recent Posts widget/gadget to your Blogger blog, then follow the steps below:

How to Add the Recent Posts Widget to Blogger

Step 1. Go To Blogger > Layout and click on "Add a Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

Step 3. Paste inside the empty box, 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/SITE-URL/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/AVvXsEjTcEP4CEVkjKQs7_VtYWMIOZSifYUZkrqR6asSvNX7EfkgTTsAXThwYD7dobcr17rB2UOR5PNSYkOzKjUQT3dZH8iVYed5slGqS0cpi2Oy8N1vkZ-9k6XGqu_LvujhwnJDazsrPUeajks/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>

Step 4. Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://helplogger.blogspot.com) and look to have no forward slash symbol "/" at the end of your url

Note:

• 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

Step 5. Save your widget. And you're done!

If you need more help, leave your comment below.

Google Translate Widget with Flags For Blogger

The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

 Step 3. Paste the code below in the empty box:

<script type="text/javascript">
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
</script>

<style>

 .google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }

.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
color: #0880C4;}

a.showLink:hover, a.hideLink:hover {
color: #0880C4;
 }

 </style>

 <div>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVPG-4-V155lsDs86oBfx87RopnmSTRGDAiIy_t-xb6n6GSasZD_Q2V5lIoi34PVg99swDvTWcEJ6YeMECKFD3SnDRCJjWJ9SQmrvpQrG9Kt65yojIgzqVVBrC5E76nScIU5M67dDTFQS/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPF0dXm70Q9ASkd-0uFbpSMVykUifNOasSAnFRBzuSoELjoJ5y_JQBfG2NuvaR_zdV0L5ukc112kaUcekDe9ORIrSMdqxqYa9_TyxydhskBLjl-7OedG8HxkhAJWiBEhEFmf3UYOiwnEGU/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_rxfk6rmmDZN1JQSPHrzYMxaOfW2JK_b_qtgIDn8co2tucVSyE4DnP755JWvlhcxQvZ4Piz4IpGThK_qj-NKEdLUwXP1suBrxCbvA8A9WeilPaBmBilb_IdkyXnOF6vIpSRyOCfbPIEp/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9uRikDba9ruCQYgmTLGC4OIwU7qpx5uY0fe8V33jQ4RyHlPZzGHDnK2Z85FjmPoKgArKfc7XwotOJWbiaSzu0VjMEJPRg5eyxn-WTI1VweshjHCAlXupje9N7eCU2A965TdEI6CszYB1Y/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">More</a>
<div id="example" class="more">
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXoMoY1xfk9ePdqmtlUyuEt56MYj8L8zC5BGu_LsnjjBDLVH02gp12mhya07ecgHJKDX1YgQbyVHuYxQacauFSqsLzXririKyu4aFfy_Zdb6REKI2szhjnGVGob2PgiTPPlj3y3t1rcN8R/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_56uQUHiN8c4CB_ZkhImTBJJGuzKidTNQonJtN-yydrIt4yn4VdAhyvQ6zNxdUODgkUdng7QRMiVgGi-_L1upqC70UfZ14Uvjr7DlG6vIM_FVYFxjEimT8uke-pK8kSDZYERKElDtYUS/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjceK5pKlv5fTWJOWNJK3UGa45Sw_RJ7aCTP8j6EURpaj34WwR0Ucjbh9M1r42gEYuUNT8XZ8oLJftJkxMwaWEXXflR8iJM98JN29uIy6Kto3_-3muMDqJ2K1GfBoZ8G25YzH3PoNKjckli/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2EX0ZLWELp5cqRyJxa00XipvMkTKUQtRt7FyX6p6ziCrAA19fzWso4OpgGeMIEc3X816Zk45Mfk8Ide-XHAaaTrGfskQ79gR_O0GgPM6Jq510rwo9jaLWozXZczhUCsB7li4FDoE5MpF/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br />
 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAB31rUwtsVbCsPQlANL_7mnFf8bBkh8x-4ZjEn_Tv7geVX8pVlA9sTa_VTFwwAbVWEqGCitnfd8wpyaL93I774GWj5D5TVf8-GKXEWHrIwPBmqA_SP-xxugfTqq3wib4eH7NOlvr5m3xc/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIfWXsOY4gMtv3MUT53K8oF0p1cJiM2CdSkQlU5ZJFCAv-BxQbOjW_fxuRn3OY98cPL_evAcnj2-hyhSKvy1jG10P5a1vJJueY6BFVy_Ktv4M81EnEsqAyoBkifJMFI0zPZeBvCZwaSpBM/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbSz-QK5KZF3z9vqCCv-KdQR7Xl67jmjEylKF2wmkqHRHGtvk9FnP7rIV6Bz6JXExGFo31xlIMkf83hxZkNMRAjqzERrM6RT1fxqx3iln8a5-5-iH2Q3FF54ZLweeRvazuSN_HbbHnxuPy/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgew4FD1BwDvCQahqfcZ425g4L8DNrL12iVTAokhWGJ-xgDWqhbONBLAxzut3Kyi6793s_wE98yullPO8hvhLVNlphyFIEYf6NDjKaInWOmIKYoQujz6EkOz-6qxIbEVoq15sWqMk14uhlh/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide / </a><a href="http://helplogger.blogspot.com"><font size="1px">Get this widget</font></a></p>
</div>
     </div>

Step 4. Now click on Save

And you're done! Enjoy (: