Recent Posts Widget With Thumbnails For Blogger (Stylish & New)

Hello Guys, if you have a blogger blog and you want to add a recent post widget to that blog, then this article will be useful for you.


We use widgets instead of plugins in blogger, we use many types of widgets in blogs to make our blog attractive and stylish.


But there are some widgets that make your blog stylish and attractive, as well as some widgets which are also helpful to increse the traffic of your blog post, one of which is a recent post widget.


recent-post-widget-for-blogger

Because with the help of the recent post widget, we can also recommend our other blog post to the visitor who is on our blog, so that the visitor can also read the other post of our blog.

 

So in this article today, we will know how you can add recent posts widget with thumbnails to blogger. If you also want to add a recent post widget to your blogger, then stay with us in this article, let's start.


What is Recent Post Widget?


This is a blogger gadget with the help of which we can show our blog posts and articles that we recently published.


That is, we can tell the visitors who visit our blog that the post on our blog has been recently published.


Today, the most recent post widget that we are going to tell you about, is a fully responsive and stylish recent post widget that you can easily add to any blog.


Add Recent Posts Widget For Blogger Easly


Follow the steps below to add recent posts widget with thumbnails to your blogger.


Recent-post-widget-demo

Features of Recent Posts Widget 


Features-of-Recent-Posts-Widget

Step1: First login your Blogger Account


(Your blogger's dashboard will open in front of you)


Step2: Now you Click on Layout


blogger-layout


After clicking on the layout, the layout design of your blogger blog will show.


Step3: Where you want to show your Recent post, like in the header section, in the Sidebar, in the footer section, then you click on the Add Gadget of that section.


(Then you will have a blogger gadget popup show)


add-gadget


Step4: Now you Click on HTML / JavaScript


blogger-gadget


(Then you will have HTML / JavaScript code editor open)


Step5: Then paste the blogger Recent post HTML code of the featured post you want to use in HTML / JavaScript.


paste-code


<style type="text/css"> 
img.recent-post-thumbnail{
 float:right;
 height:50px;
 width:50px;
 margin:5px -5px 0px 0px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 padding:3px;
 background: #fff
}
 ul.recent_post_widget {
 background: #fff;
 list-style-type: none;
 margin: 5px 0px 5px 0px;
 padding: 0px;
 font:12px 'Ubuntu Condensed', sans-serif;
}
 ul.recent_post_widget li:nth-child(1n+0) {
 background:#FBFBFB;
}
 ul.recent_post_widget li:nth-child(2n+0) {
 background: #FBFBFB;
}
 ul.recent_post_widget li:nth-child(3n+0) {
 background: #FBFBFB;
}
 ul.recent_post_widget li:nth-child(4n+0) {
 background: #FBFBFB;
}
 ul.recent_post_widget li:nth-child(5n+0) {
 background: #FBFBFB;
}
 ul.recent_post_widget li {
 padding:5px 10px;
 list-style-type: none;
 margin: 0 0 -5px;
 color: #777;
}
 .recent_post_widget a {
 text-decoration:none;
}
 .recent_post_widget a:hover {
 color: #222;
}
 .post-date {
 color:#e0c0c6;
 font-size: 11px;
}
 .recent-post-title a {
 font-size: 16px;
 font-weight: bold;
 color: #000;
}
 .recent-post-title {
 padding: 6px 0px;
}
 .recent-posts-details a{
 color: #000;
}
 .recent-posts-details {
 padding: 5px 0px 5px;
}
 </style>

<script type = "text/javascript" >
 function showrpwiththumbs(t) {
 document.write('<ul class="recent_post_widget">');
 for (var e = 0; e < posts_number; e++) {
 var r, n = t.feed.entry[e],
 i = n.title.$t;
 if (e == t.feed.entry.length) break;
 for (var o = 0; o < n.link.length; o++) {
 if ("replies" == n.link[o].rel && "text/html" == n.link[o].type) var l = n.link[o].title,
 m = n.link[o].href;
 if ("alternate" == n.link[o].rel) {
 r = n.link[o].href;
 break
 } }
 var u;
 try {
 u = n.media$thumbnail.url
 } catch (h) {
 s = n.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), u = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi4WyoM9doq0EeFCwzfQgpX4zN6hRjZGerDc_0YK38GyDxkox7xvgdU2lA7WGLV4iSXzsTLS9wWDndQyiB5F936lt2fr1Bn5hQV_QMAZOWnqVBlnm3v9s5ToUQGdsBTbB2FFzb731Fvwju/s1600/no-thumb.png"
 }
 var p = n.published.$t,
 f = p.substring(0, 4),
 g = p.substring(5, 7),
 v = p.substring(8, 10),
 w = new Array;
 if (w[1] = "Jan", w[2] = "Feb", w[3] = "Mar", w[4] = "Apr", w[5] = "May", w[6] = "Jun", w[7] = "Jul", w[8] = "Aug", w[9] = "Sep", w[10] = "Oct", w[11] = "Nov", w[12] = "Dec", document.write('<li class="recent-posts-list">'), 1 == showpostswiththumbs && document.write('<a href="' + r + '"><img class="recent-post-thumbnail" src="' + u + '"/></a>'), document.write('<div class="recent-post-title"><a href="' + r + '" target ="_top">' + i + "</a></div>"), "content" in n) var A = n.content.$t;
 else if ("summary" in n) var A = n.summary.$t;
 else var A = "";
 var k = /<\S[^>]*>/g;
 if (A = A.replace(k, ""), 1 == post_summary)
 if (A.length < summary_chars) document.write(A);
 else {
 A = A.substring(0, summary_chars);
 var y = A.lastIndexOf(" ");
 A = A.substring(0, y), document.write(A + "...")
 } var _ = "",
 $ = 0;
 document.write('<br><div class="recent-posts-details">'), 1 == posts_date && (_ = _ + w[parseInt(g, 10)] + " " + v + " " + f, $ = 1), 1 == insidereadmorelink && (1 == $ && (_ += " | "), _ = _ + '<a href="' + r + '" class="url" target ="_top">Read more</a>', $ = 1), 1 == showcomments && (1 == $ && (_ += " <br> "), "1 Comments" == l && (l = "1 Comment"), "0 Comments" == l && (l = "No Comments"), l = '<a href="' + m + '" target ="_top">' + l + "</a>", _ += l, $ = 1), document.write(_), document.write("</div>"), document.write("</li>")
 }
 document.write("</ul>")
 } 
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Step6: Click on Save

If you have any problem adding this recent post blogger widget. So you must tell me by commenting and I will definitely resolve it


Do Tech Blog

Posted by Do Tech Blog

Post a Comment

0 Comments