How to Add Recent Post Widget for Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add a beautiful stylish recent post widget for a Blogger blog with pictures.

How to Add Recent Post Widget for Blogger with Pictures

What is the Recent Post widget?

The recent post widget helps our blog to display the recently published post, using this widget our blog visitors visit our recent post with just a single click and they know the newly publish posts with the category we published recently.

Why we need to add the Recent Post widget to the blog?

We know mostly our visitors visit our blog post or pages from the search engine and when they look at the recent posts, it's very obvious if they like and visit the recent post as well, using this widget we easily increase our page-view in the recently published posts and here when we make a website using Blogger.

Now when we add a static home page on Blogger blog home and then we add a recent post widget to help our website visitors to see what type of activity we performing in our blog if they like they visit our posts, and using recent posts gadget they look the newly published posts and to the visitor point of you they are not required to visiting our blog home page to check what we publish, now let's start.

These are the Following Steps:-

Step 1: Go to the Blogger blog dashboard and click the layout option then here find out the place where you add the gadget and click the Add a Gadget link.

Step 2: Here click the HTML/JavaScript gadget.

Step 3: Now in the gadget we paste the code which we like in the content area and click the Save button.

Recent Post widget style-1

ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}

ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}

ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}

ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}

ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}

ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}

ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

.recent-posts-wrap a { text-decoration:none; }

.recent-posts-wrap a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }</style>

</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>

Recent Post widget style-2

<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href=" " rel="nofollow"> </a> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> <style type="text/css"> img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;- moz-border-radius: 0em 0; border-radius:10%;padding:5px;background: #fff} ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;} ul.recent-posts-container li:nth-child(1n+0) {background: #fff; width: 100%} ul.recent-posts-container li:nth-child(2n+0) {background: #fff; width: 100%} ul.recent-posts-container li:nth-child(3n+0) {background: #fff ; width: 100%;} ul.recent-posts-container li:nth-child(4n+0) {background: #fff; width: 100%;} ul.recent-posts-container li:nth-child(5n+0) {background: #fff ; width: 100%;} ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;color: #444; font-weight: bold;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #222;} .recent-posts-details {padding: 5px 0px 5px; }</style><div style="font-size: 10px; float: right;"><a href="https://techtspot.blogspot.com/2018/10/add-recent-post-widget-for-blogger.html" rel="nofollow">Recent Posts Widget</a></div>

Now you can easily edit the above codes just look at the Red text in a code which means you can change the number of displaying a post in recent posts gadget and 2nd code you see the Blue text in the code you just replace the blue text with your website or blog URL.

Step 4: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling Recent Post widget to my blog, here I give you the 2 beautiful & stylish recent post widget option, now select the recent post according to your blog or which suit your blog design.

How to Add Custom Robots.txt File in Blogger blog
How to Insert Code Block in Blogger blog Post
How to Disable Right Click on Blogger blog Images

I hope you enjoy this Post. If any problem comment it.

Pages

Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Saturday, 13 October 2018