Modifikasi Recent Posts Blogger/Blogspot dengan Nomor

Berikut ini adalah tips Blogger atau Blogspot tentang cara membuat dan memasang widget Recent Posts (postingan terbaru) yang pakai nomornya. Sebetulnya tampilan widget Recent Posts ini adalah salah satu widget yang tampilannya akan saya terapkan pada salah satu project template di Themeindie. Hanya saja karena beberapa pertimbangan, akhirnya tampilan recent posts ini diganti dengan modifikasi terbaru.

Dibunag sayang, pun saya 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, adalah tampilan nomornya yang sengaja dibangun dari beberapa baris CSS. Sehingga mampu membikin dia tetap tampil di middle - center meski tinggi title artikel di widget tampil setinggi-tingginya.

Jelasnya, seperti yang nampak pada featured image di atas. CSS-nya seperti 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, lalu letakkan ini di atas kode </body> atau &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>

Terakhir, buka Tata Letak atau Layout lalu Tambah Gadget, lalu copas kode berikut ini:

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

Simpan.