Add Recent Posts Widget to Blogger With Frame

Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy. There are lots of recent posts gadgets and archive gadgets you can use but the one we will cover in this post will grab the attention of people on your blog. This recent posts widget is similar to the standard recent posts with thumbnails but with one great feature. This gadget displays your most recent posts and includes a small thumbnail. There are many reasons to add recent post widget If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add recent posts Widget on his blog that looks good on your BlogSpot blog.

Check out: 2 Stylish Recent Post Widgets for Blogger

Adding Recent Post Widget to Blogger

1. Login to your Blogger account and Navigate to Template >Edit HTML >
2. Click anywhere inside the template editor
3. Press Ctrl + F and search <div class='clear'/>
4. Just above <div class='clear'/> add the following snippets

<b:widget id='HTML55' locked='true' title='Recent Posts (Do not edit)' type='HTML' version='1' visible='true'>     <b:includable id='main'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'>Recent Posts</h2>   </b:if>   <div class='widget-content'> <script style='text/javascript'> var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 60; </script> <script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'/>   </div>

5. Now Search the ]]></b:skin> just above it add the following CSS and click Save Template

.recent .title{line-height:32px;color:#19232D;margin-bottom:10px;text-align:center;font-size:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhuJYGp6qz_GeoWZZlyR6NYJNEIVJScfiU8gJtiKdZy-SlNl1otBvbmMvHGQLyS6FpOrHsP4PF9eX2mXa2wsgVzlyn8qCtyzPoHeaYhngcNNUG12PUdrwlN0ZhkHxkLXxEUICkeV2zlw/h120/dot.png) rgba(0,0,0,0.06)}
.recent .title a{color:#fff;background-color:$(main.color);display:inline-block;padding:3px 15px;font-family:Solaimanlipi,Kalpurush,Siyam Rupali}
.recent a{color:#111}
.recent .title a:hover{text-decoration:underline}
.recent ul{padding-top:15px;padding-bottom:15px}
img.recent_thumb{width:80px;height:80px;float:left;margin-bottom:5px;transition:.9s;margin-right:10px;}
img.recent_thumb:hover{opacity:.5;transition:.6s}
ul.recent_posts_with_thumbs{padding:0!important;margin-top:5px}
.recent_posts_with_thumbs{float:left;width:100%;min-height:100%;margin:5px 0;padding:0;font-size:12px}
ul.recent_posts_with_thumbs li{padding-bottom:5px;padding-top:5px;min-height:80px;border-bottom:1px solid rgba(192,192,192,0.38);margin-bottom:10px;list-style:none}
ul.recent_posts_with_thumbs li:last-child{border-bottom:none}
ul.recent_posts_with_thumbs li p{margin:.3em 0;font-size:11px}
.recent_posts_with_thumbs a{text-decoration:none;color: rgba(51, 51, 51, 0.84); text-decoration: none; font-size: 15px; font-weight: 700; transition: all 0.3s ease-out; line-height: 1.4;}
.recent_posts_with_thumbs strong{font-size:10px}

Customization

If you want to show the summary or anything else for the recent post widget, edit the follow codes

• var numposts = 4; (Shows the number of posts to display).
• var showpostthumbnails = true; (Shows the thumbnail, in case you don't want to display the thumbnail, replace the true with false).
• var displaymore = false; (It shows the Read more button, in case you want to display, replace the false with true).
• var showcommentnum = false; (It displays the comments, in case you want to show the comments, replace the false with true)
• var showpostdate = false; (It displays the published date of the post.)
• var showpostsummary = false; (It displays the post summary, if you want to display the summary, replace the false with true).

Share this post