12:42:00 PM
Recent
Posts Widget with Thumbnail for Blogger used to show not only recent post but also show
post thumbnail and excerpts of the post in side bar. If you need to change
style it with your own design, you just need to change the CSS style.
You
have seen many recent post widgets in the sidebar manly in
WordPress sites and you think that add a recent post widgets to
blogger site. If you looking for that but you didn't know how to add recent
post widget in blogger then don’t worries about this we give you step by step
guide how to add recent post widget with thumbnail in blogger.
Steps
of add Recent Posts Widget For Blogger
Follow
below steps to add Recent post widget for blogger:
Step
1
Login
into your blogger dashboard Go to Layout section in setting and click on add a
Gadget link at the top of right side bar shows that below picture.
Step
2
When
you click on Gadget link, a popup window will be opened. Now select
HTML/JavaScript shows that below picture.
Step
3
Now
select below code and past it into HTML/JavaScript box.
<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://www.haakblog.com/2014/10/recent-posts-widget-thumbnail-blogger.html" target="_blank" title="Grab this widget">Recent Posts Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger Widgets</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/AVvXsEgB151WOPbeSV1rl680sq5w4ld2HY1il2JFmizbMd-dKDOnfVw2w9pPdBB0oANoJCpM60583wOWB4CTOhgtyRBNZeBT45iX_MCMe3huEBvbrLSxWW6znTQQftHtL_OFn0XBXHHxqXfX0Q4/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>
<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://www.haakblog.com/2014/10/recent-posts-widget-thumbnail-blogger.html" target="_blank" title="Grab this widget">Recent Posts Widget</a> <a href="http://www.haakblog.com/" target="_blank">Blogger Widgets</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/AVvXsEgB151WOPbeSV1rl680sq5w4ld2HY1il2JFmizbMd-dKDOnfVw2w9pPdBB0oANoJCpM60583wOWB4CTOhgtyRBNZeBT45iX_MCMe3huEBvbrLSxWW6znTQQftHtL_OFn0XBXHHxqXfX0Q4/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 site URL in place of YOUR-BLOG/SITE-URL and
also adjust your height and number of recent post.
Step
5
Click
Save.
No comments
Post a Comment