Modifikasi Recent Posts Blogger/Blogspot Dengan Nomor

Berikut ini yaitu tips Blogger atau Blogspot wacana cara menciptakan dan memasang widget Recent Posts (postingan terbaru) yang pakai nomornya. Sebetulnya tampilan widget Recent Posts ini yaitu salah satu widget yang tampilannya akan aku terapkan pada salah satu project template di Themeindie. Hanya saja alasannya yaitu beberapa pertimbangan, alhasil tampilan recent posts ini diganti dengan modifikasi terbaru.

Dibunag sayang, pun aku memikirkan barangkali ada yang tertarik dengan tampilan widget Recent Posts semacam ini, jadi bisa bermanfaat bagi yang lainnya.

Saya akan jelaskan mengapa widget Recent Posts ini layak dipertimbangkan untuk dipasang, yaitu tampilan nomornya yang sengaja dibangun dari beberapa baris CSS. Sehingga bisa membikin ia tetap tampil di middle - center meski tinggi title artikel di widget tampil setinggi-tingginya.

Jelasnya, ibarat yang nampak pada featured image di atas. CSS-nya ibarat ini:

/* Recent Posts by Bungfrangki.com */
#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}

Masuk ke Edit HTML, kemudian letakkan ini di atas instruksi </body> atau </body>

<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="Modifikasi Recent Posts Blogger/Blogspot dengan Nomor">'+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>

Terakhir, buka Tata Letak atau Layout kemudian Tambah Gadget, kemudian copas instruksi berikut ini: