Pages

Friday, March 22, 2013

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(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>

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 you're done!



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

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

 

Don't Miss These Killer Articles on Facebook:







3.How to Add Scrolling Recent Posts Widget For Blogger?
How to Add Recent Post with Thumbnail to blogger
9out of 10 based on 10 ratings. 9 user reviews.
Posted by: Mayor Botaks Updated at: 11:13 AM

3 comments:

  1. Great post!!

    Earn while you enjoy time with your Family & Loved ones!
    Join us today visit http://www.unemployedpinoys.com

    Unemployed is Brave and a choice to be a Freeman.
    To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
    HAPPY WORKING AT HOME :)

    ReplyDelete
  2. Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Earn Per Survey
    Paid Survey Website
    Paid Survey Websites in India
    Survey Websites in India
    Earn Per Survey
    Free Online Surveys
    Free Online Surveys Websites

    ReplyDelete