Add Recent Posts Widget to Blogger With Frame

2 Beautiful Auto Scrolling Recent Posts Widget for Blogger
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.

Read Also: 2 Stylish Recent Post Widgets for Blogger

Adding Recent Post Widget in Blogger

Step 1. Go to Blogger >> Template >> Edit HTML >>  and click anywhere inside the template editor
Step 2. Press Ctrl + F and search <div class='clear'/> tag.
Step 3. Just above <div class='clear'/> add the following code.
<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>
Step 4. Now Search the ]]></b:skin> just above it add the following code.
.recent .title{line-height:32px;color:#19232D;margin-bottom:10px;text-align:center;font-size:16px;background:url(https://lh3.googleusercontent.com/-Dm8yPXEZEb8/U2qdIaxbm4I/AAAAAAAAEEs/nNS9zkdI8UQ/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}
Step 5. Now click Save Template.


Recent Posts Widget With Thumbnail for Blogger
DEMO


Customization
If you want to show the summary or anything else for the recent post widget, edit the follow codes.
  1. var numposts = 4; (Shows the number of posts to display).
  2. var showpostthumbnails = true; (Shows the thumbnail, in case you don't want to display the thumbnail, replace the true with false).
  3. var displaymore = false; (It shows the Read more button, in case you want to display, replace the false with true).
  4. var showcommentnum = false; (It displays the comments, in case you want to show the comments, replace the false with true)
  5. var showpostdate = false; (It displays the published date of the post.)
  6. var showpostsummary = false; (It displays the post summary, if you want to display the summary, replace the false with true).
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind