Make Money Home: How to Add Recent Post with Thumbnail to blogger

Monday, March 10, 2014

How to Add Recent Post with Thumbnail to blogger

Hi frnd

Now this tutorial will show you How To Add Recent Posts Widget With Thumbnails And Hover Effects To Blogger.

How to add Recent Posts Widget with thumbnail to Blogger

1.Go to Blogger Dashboard > Layout
2.Click on Add a Gadget
3.Select HTML/JavaScript

Now Paste below code inside it,

<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://pinkusays.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://pinkusays.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/AVvXsEjiEZZa1LJexYey3QeiAz9tCh4vwxtqoJUDAzRhHbEAiFMrNQTXslnSdJ6A8BWgsiEDTbelK83sMRi2ryWUqOtY9oCwKwHMd0Jt-XpJMB12twvqMy93QtduMDG0Z9uGYRvENJ7IiIbPPlI/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 .

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 youre done!

Enjoy!If you need any help, leave a comment below.

And if you liked this post, please consider sharing it. Thanks.

Dont Miss These Killer Articles on Facebook:

1.How to Add Facebook Plugins Like Box To Blogger?

2.Easy Trick to enlarge locked profile picture ?

3.How to Add Scrolling Recent Posts Widget For Blogger?

Make Money Home

Monday, March 10, 2014

How to Add Recent Post with Thumbnail to blogger

No comments:

Post a Comment