Cara Membuat Recent Post Keren Dengan Nomor di Blogger

Ilmu Internet - Recent post adalah daftar yang berisi postingan-postingan terbaru di blog. Biasanya artikel terbaru ini dapat anda temui dihalaman beranda atau sidebar blog. Fungsinya agar pembaca dapat mengetahui update terbaru dari penulis blog atau website.

Blogger sendiri juga telah menyediakan fitur widget Feed RSS untuk menampilkan postingan terbaru. Tetapi sayangnya tampilan yang berikan standar atau hanya memunculkan tautan link. Karena itu, banyak pemilik blog yang merubah tampilan widget recent post dengan gayanya masing-masing.

Seperti tampilan widget recent post keren yang saya bagikan ini dilengkapi dengan numbering list atau adanya tambahan style nomor di bagian kiri judul postingan yang tersusun secara berurutan. Tertarik untuk membuatnya? Simak tutorial pemasangannya dibawah ini!

Langkah-langkah Membuat Recent Post Keren Dengan Nomor di Blogger:

1. Silahkan login ke Blogger.com
2. Buka menu Tema >> Edit Html
3. Cari kode ]]></b:skin> atau </style> untuk memudahkan pencarian tekan keyboard CTRL+F, Kalau sudah ketemu lalu masukan kode berikut diatasnya

 
  
 /* Recent Posts By Ilmuinternet.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:#008c5f;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:#008c5f;}
#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #008c5f !important;}
#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}

4. Selanjutnya masukan javascript berikut, diatas kode </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="'+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>

5. Kemudian tambahkan kode HTML dibawah ini ke dalam Widget/Tata Letak >> HTML/Javascript

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

6. Terakhir Simpan tema dan lihat hasilnya

Akhir Kata

Sekarang anda bisa menampilkan widget recent post dengan tampilan yang jauh lebih keren dan elegan. Dengan begitu pengunjung dapat membaca artikel-artikel terbaru dengan mudah dan interaksi serta waktu berkunjung di blog pun meningkat.

Itulah cara membuat widget recent post keren dengan daftar nomor di blogger yang bisa anda pelajari. Semoga membantu dalam pengembangan blog yang lebih baik. Terima kasih dan jangan lupa ikuti tutorial blogger bermanfaat lainnya.