Here's how to add a recent posts widget with stylish numbering and gradient styling. You should add it to keep visitors engaged on your blog for longer.
You can preview the widget using the following button:
Like it? 😍 Installing it is super easy — just follow the guide below.
Add a Stylish Recent Posts Widget with Numbering
Go to Blogger > from the side menu click Theme then ( ⋮ ) > Edit HTML and paste the following code above </head>
<style>
/* Recent Posts by Rotkx */
#recent-articles .widget-content,#recent-articles ul{padding:0;counter-reset:count;margin:0 auto;display:block}
#recent-articles a:link,#recent-articles a:visited{font-weight:normal}
#recent-articles ul li{background-color:#f7f7f7;margin:0 auto;padding:8px 60px 8px 8px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:right;border-radius:4px}
#recent-articles ul li:before{color:#fff!important;counter-increment:count;content:counter(count);position:absolute;right:0;top:0;bottom:0;text-align:center;z-index:51;transition:all .4s;width:50px;font-size:150%!important;background:linear-gradient(45deg,#373b44,#4286f4);;font-weight:500;text-align:center;padding:0;border-left:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%;border-radius:4px}
#recent-articles ul li:last-child{border:none}
#recent-articles ul li a{font-weight:400;display:block;color:#222;text-decoration:none;line-height:1.4em}
#recent-articles ul li:hover{background-color:#f5f5f5}
#recent-articles ul li:hover:before{background-color:#24699A}
#recent-articles ul li a:hover,#recent-articles ul li:hover a{color:#2b71a2!important}
#recent-articles ul li:before,#recent-articles ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none}
</style>Now place the following code above </body>
<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");ct.async=true;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+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>Change the number 10 to the number of posts you want to show.
Click Save, then go to Layout > Add a Gadget > HTML/JavaScript and paste the following code in the box:
<div id='recent-articles' class='recent-articles'><ul id='recent-posts'/></div>This concludes the guide on how to add a stylish recent posts widget with numbering. Hope it was helpful!
