Recent Posts Widget with Thumbnails for Blogger/Blogspot

R

The past days i’ve shared a tutorial on how you can add a Simple Recent Posts Widget, but today we will learn how to add a recent posts widget which comes along with posts thumbnails and snippets too.
recent posts, blogger widgets
Here is how you can add a Recent Posts widget/gadget with thumbnails to your Blogger (blogspot or custom domain) blog. It’s pretty simple. Follow the steps below:

1. Go To Blogger > Design > Page Elements
2. Click on “Add a Gadget” link
3. From the pop-up window, choose HTML/JavaScript
4. Paste the following code:

<div class=”eggTray”>
<script src=”http://mybloggertricksorg.googlecode.com/files/listbadge.js”>{“pipe_id”:”1a6640e2a78b2c6e736f2220529daae5″,”_btype”:”list”,

“pipe_params”:{“URL”:”YOUR-BLOG/SITE-URL/feeds/posts/default”},

“hideHeader”:”false”,”height”:”500″,”count”: 8 }</script>

<br />
<div class=”ycdr” style=”font-family: arial, sans-serif; font-size: 9px;”>
<a href=”https://www.mybloggertricks.org/blog/2012/05/recent-posts-widget-with-thumbnails-for.html” target=”_blank” title=”Grab this widget”>Recent Posts Thumbnails</a> <a href=”https://www.mybloggertricks.org/blog/” 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(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/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> 

  
Change YOUR-BLOG/SITE-URL with the url address of your site/blog.
 

Settings

  • 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

5. Save your widget. And that’s it!

If you need more help, leave your comment below.

About the author

domdom rung

Add comment

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives