How to add Stylish Recent Post in Blogger Sidebar | Create a Colored Recent Post Widget

Hi to all in this article, I am going to tell you all about how to add stylish recent post in blogger sidebar easily in just 2 minutes.

So read the below provided steps completely and carefully to get clear understand about the process, if you miss any one step then you may face error while saving code.

You Must Know

What is Recent Post in Blogger ?

Basically recent post is a type of category, in this you can see the latest posts, what you written recently.

What is the benefit of Recent Post ?

By this recent post, your visitors can find your newly published posts easily and you will get more views for the posts.

Where we can add this recent post in blogger ?

It is fully depend on your website design, nearly 90 percent of website add this recent post category in sidebars or you can also add in the bottom of your website.

Whether Stylish Recent Post Effects our theme ?

No, because this is just a piece of CSS code adding in your theme, so when you are not interested on this, then you can remove the stylish code from your blogger theme.

Note: Before adding the code in your theme, you need to backup your code, if you get any error while saving the code, then you can restore your theme back.

How to add Stylish Recent Post in Blogger Sidebar by tial wizards

Steps to add Stylish Recent Post in Blogger Sidebar

Step-1: You need to login to your blogger website.

Step-2: Click on Theme -> Customize -> Edit HTML.

Blogger Layout Edit HTML

Step-3: Click on blank area and press CTRL +F and search for </style> from your theme.

Code Search in Blogger

Step-4: Copy the below provided code-1 and paste the code above the <style> tag and click on save button.

Step-5: Now you need to open Layout -> Sidebar -> Add a Gadget -> HTML/JavaScript.

Add a Gadget - HTML/JavaScript

Step-6: Paste the below code-2 in content box and then click on save.

Configure HTML/JavaScript in Layout

Step-7: Now you have the click on save button in layout section.

Step-8: You have successfully added stylish recent post in blogger website sidebar and demo image is given below.

Demo Stylish Recent Post in Sidebar

Code-1: [Paste code above </style> in theme section]

<!--[ Paste the below code above </style> ]--> #recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}#recent-wrapper ul{margin:0;padding:0;list-style-type:none;}#recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}#recent-wrapper ul li:first-child {background:#E11E28;width:100%}#recent-wrapper ul li:first-child:after{content:"01";}#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}#recent-wrapper ul li:first-child + li:after{content:"02";}#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}#recent-wrapper ul li:first-child + li + li:after{content:"03";}#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}#recent-wrapper ul li:first-child + li + li + li:after{content:"04";}#recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}#recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}#recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}#recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}#recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}#recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}#recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}#recent-wrapper ul li:first-child:after,#recent-wrapper ul li:first-child + li:after,#recent-wrapper ul li:first-child + li + li:after,#recent-wrapper ul li:first-child + li + li + li:after,#recent-wrapper ul li:first-child + li + li + li + li:after,#recent-wrapper ul li:first-child + li + li + li + li + li:after,#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}#recent-wrapper ul li a{color:white;text-decoration:none}
Copy

Code-2: [Paste the code in html/JavaScript Gadget]

<!--[ Paste the below code in html/JavaScript Gadget in sidebar ]--> <div id='recent-wrapper' class='recent-wrapper'><ul id="recent-posts"></ul><script>//<![CDATA[numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);//]]></script></div>
Copy

Conclusion

If you follow above provided steps completely, then you can add stylish recent post in your blogger sidebar easily in just 2 minutes.

If you found this content helpful then share this article and follow us from social media platform.