Blogger

How To Add Recent Post Widget With Thumbnails in Blogger Blog 2017

Here’s the simplest method on how you can easily add a beautified recent post/article blogger blog widget which shows thumbnails on your blog sidebar and make your blog look professional.

This method on how to Add Recent Post Widget With Thumbnails in Blogger Blog has been updated for 2016 and it makes your blog loads faster with updated codes.

In WordPress CMS platform, recent post comes as default and you can just add it to your blog (Drag and Drop), but in Blogger blog, it’s a different case altogether.

Important: How to Show Only Post Title on Home Page in Blogger Blog/Blogspot – 2017 Updated Method

You must have see several blogspot blogs with recent post widgets that has thumbnails and you asked yourself, “how can i add recent post widget to blogger blog?”

Well, Here’s the answer to your question.

blogger blog tutorials

Detailed Step BY Step Guidelines On How To Add Recent Post Widget With Thumbnails in Blogger Blog

Step 1:

Login into your blogger dashboard, then proceed and go to the Layout section of the blog you want to add the widget to.
Then on the right or left side of the blog (Depending on the position you want to recent post widget to be located) click on the “add a Gadget”.

Step 2:

After you must have clicked the link, a window will automatically popup.
Just scroll down the widow and select “HTML/JavaScript”.

Step 3:

After clicking on the “HTML/JavaScript” link, a blank box will appear

All you need to do, is just to copy the below code and past it into HTML/JavaScript blank 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=”https://www.omoscowonder.com/how-to-add-recent-post-widget-with-thumbnails-in-blogger-blog/” target=”_blank” title=”Grab this widget”>Recent Posts 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://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

Don’t save it yet. You must have to change your site URL in place of the “YOUR-BLOG/SITE-URL” and also adjust your height and number of recent post.

Step 5

Finally, click on the “Save” Button.

Go back and checkout your blog with the recent post widget and see for yourself, that it’s one of the most beautiful recent post widget for blogger blog.

 

We will be happy to see your thoughts

Leave a reply