Follow Me on Google News Follow Now!

How To Modify Recent Posts with Number Blogger/Blogspot

Hello My Dear Visitors. Today in this post I will show you How To Modify Recent Posts with Number Blogger/Blogspot & how to create and install a Recent Posts widget in Blogger that uses numbers.

It's just that due to several considerations, finally the recent posts display was replaced with the latest modification. Dear dear, I was also thinking that maybe someone would be interested in this kind of Recent Posts widget display, so it could be useful for others. I'll explain why this Recent Posts widget is worth considering installing, is that its number display is intentionally built from a few lines of CSS. So as to make him still appear in middle - center even though the height of the article title in the widget appears as high as possible.

How To Modify Recent Posts with Number Blogger/Blogspot

Copy the below css code and paste it before ]]></b:skin> in your theme.

Obviously, as seen in the featured image above. The CSS is like this:

#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 8px 8px 60px;list-style:none;position: relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}
#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center ;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right :1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}
#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}

Then go to Go to Edit HTML, then put this Below js code above the code </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>
//<![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>

Finally, go to Layout or Layout then Add a HTML Gadget, then copy the following code and paste in box:


<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>

Conclusion

Now, your Modification of Recent Posts with Number Blogger/Blogspot is completely created and working properly. I hope you like this article and you get what you want. Share this article with your friends. If you face any problem or error in any section that put your questions and problems in comment section in below.

Thanks For Reading

Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

Post a Comment