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.
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.
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
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)
Step4: Now
you Click on HTML / JavaScript
(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.
<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 :
“http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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’ />
If you have any problem adding this recent post blogger widget. So you must
tell me by commenting and I will definitely resolve it
Also Read:
Featured Posts Widget For Blogger
Also Read:
How to Create Backlinks Step By Step
Also Read:
Blogger SEO: A Complete Guide