Recent Posts Widget with Thumbnails for Blogger/Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><br />A few days ago, I've posted a tutorial about How To Add A <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html"><span style="color: #0b5394;">Simple Recent Posts Widget</span></a><br /> but today I want to present to you a very nice Recent Posts widget that<br /> comes along with posts <a class="zem_slink" href="http://en.wikipedia.org/wiki/Thumbnail" rel="wikipedia" title="Thumbnail">thumbnails</a> and post summary as well. If you want<br /> to know how to add this Recent Posts widget/gadget to your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> <br />blog, then follow the steps below:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s1600/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="recent posts, blogger widgets" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s320/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" title="Recent Posts Widget With Thumbnails " width="320" /></a></div><br /><br /><br /><b><span style="font-size: medium;">How <span style="font-size: medium;"><span style="font-size: medium;">t</span>o <span style="font-size: medium;">A</span>dd </span>the Recent Posts Widget to Blogger</span></b><br /><br /><br /><br /><span style="color: #0b5394;"><b>Step 1.</b></span> Go To Blogger > Layout and click on "Add a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Gadget" rel="wikipedia" title="Gadget">Gadget</a>" link<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s1600/blogger-layout-add+a+gadget-how-to.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div><br /><br /><br /><span style="color: #0b5394;"><b>Step 2.</b></span> From the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Pop-up_ad" rel="wikipedia" title="Pop-up ad">pop-up window</a>, scroll down and choose HTML/<a class="zem_slink" href="http://en.wikipedia.org/wiki/JavaScript" rel="wikipedia" title="JavaScript">JavaScript</a><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div><br /><br /><br /><span style="color: #0b5394;"><b>Step 3.</b></span> Paste inside the empty box, the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><div class="eggTray"><br /><br /><script <br />src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",<br /><br />"pipe_params":{"<a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URL</a>":"<b>YOUR-BLOG/SITE-URL</b>/feeds/posts/default"},<br /><br />"hideHeader":"false","height":"<b><span style="color: blue;">500</span></b>","count": <b><span style="color: blue;">8</span></b> }</script><br /><br /><div style="font-family: arial, sans-serif; font-size: 9px;" <br />class="ycdr"><a <br />href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html"<br /> target="_blank" title="Grab this widget">Recent Posts <br />Thumbnails</a> <a href="http://helplogger.blogspot.com/" <br />target="_blank">Blogger <br />Widget</a></div><noscript>Your browser does not <br />support JavaScript!</noscript></div><br /><br /><style type=text/css><br /><br />.eggTray {margin:10px 0px;<a class="zem_slink" href="http://en.wikipedia.org/wiki/Padding_%28cryptography%29" rel="wikipedia" title="Padding (cryptography)">padding</a>:0px;}<br /><br />.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}<br /><br />.pipesTitle {<b><span style="color: #38761d;">padding-top:0px;</span></b>}<br /><br />.pipesDescription {display:<span style="color: red;"><b>true</b></span>;}<br /><br />.ycdr {background:transparent <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMawMI2YoOJVrEbo_5RhChGOg5je9ecE-XebMLdotRkff_ehLPeZzwBVDKfnah9fngHhiIkbjFT_W_m1IbRexcQhyphenhyphen3zxe0fKDfvcvPN4REmQduQ8F6RPsKy6AYqzINjZi7ppZ9sx6RUWw/s1600/logo.png)<br /> 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px <br />0px 0px 0px;line-height:14px;}<br /><br />.ycdr, .ycdr a {color:#999999;}<br /><br /><a class="zem_slink" href="http://widgets.yahoo.com/" rel="homepage" title="Yahoo! Widgets">.widget</a> .popular-posts ul {padding-left:0;}<br /><br /></style></blockquote><br /><br /><br /><span style="color: #0b5394;"><b>Step 4.</b></span> Change <b>YOUR-BLOG/SITE-URL</b> with the url address of your site/blog (ex: http://helplogger.blogspot.com) and look to have no <a class="zem_slink" href="http://en.wikipedia.org/wiki/Slash_%28punctuation%29" rel="wikipedia" title="Slash (punctuation)">forward slash</a> symbol "<b>/</b>" at the end of your url<br /><br /><br /><br /><b><span style="color: #0b5394;">Note:</span></b><br /><br /><ul><br /><li>To disable the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Scrollbar" rel="wikipedia" title="Scrollbar">scroll bar</a>, remove the number <b><span style="color: blue;">500</span></b></li><br /><li>By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number <b><span style="color: blue;">8</span></b> with the number of posts desired</li><br /><li>if you want only the posts titles to appear, change <b><span style="color: red;">true</span></b> to <b>none</b> and "0" from <b><span style="color: #38761d;">padding-top:0px </span></b>with 10</li><br /></ul><br /><br /><br /><span style="color: #0b5394;"><b>Step 5. </b></span>Save your widget. And you're done!<br /><br /><br /><br />If you need more help, leave your comment below. <br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

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 …

Read more »