domdomrung

Recent Posts Widget with Thumbnails for Blogger/Blogspot

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="http://www.mybloggertricks.org/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://www.mybloggertricks.org/" 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/AVvXsEi0cdwnYNY-ruRMPRi0Vjo0LtRyLROf1rF6bniz4gbr1UhA6m1xj_HNavXkn2GFghbA1vXN3xmTK0irbYRpt_GpzK6wYtK66hQjCxN5SHffLEsLMi0FTQRHBP-9c0gRCNyDVD_8koKlJqU/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.
Labels: , , ,