Cara Membuat Postingan Terbaru/Recent Post dengan Nomor di Blogspot
Pusat Backlinks - Bagi para pengguna Blogger, menampilkan Recent Post / Postingan Terbaru dengan Nomor dapat memberikan pengalaman navigasi yang lebih baik bagi pembaca. Selain itu Penambahan nomor pada Postingan terbaru membuat tampilan Recent Post lebih cantik dan tertata rapih, disamping itu penonton bisa langsung klik artikel mana yang akan di lihat melalui postingan terbaru yang telah di beri nomor, Berikut saya akan menjelaskan Bagaimana langkah-langkah cara menambahkan Daftar Postingan Terbaru dengan Menggunakan Nomor di Blog Anda yang menggunakan platform Blogger/Blogspot. Simak langkah-langkahnya dibawah ini :
 |
| Cara Membuat Postingan Terbaru/Recent Post dengan Nomor di Blogspot |
Cara Membuat Postingan Terbaru/Recent Post dengan Nomor di Blogspot
1. Langkah Pertama Masuk ke Dashboard Blogger kemudian Klik Tema lalu akan tampil seperti Gambar dibawah lalu pilih Edit HTML , lihat gambar dibawah :
 |
| Cara Membuat Postingan Terbaru/Recent Post dengan Nomor di Blogspot |
2. Langkah Berikutnya Cari kode ]]></b:skin> Gunakan Ctrl + F untuk mencari dan letakkan kode dibawah ini di atas kode ]]></b:skin>. berikut kodenya :
#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}
3. Langkah Selanjutnya cari kode </body> dan letakkan kode dibawah ini tepat 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>
Keterangan : Anda bisa mengganti nomor 10 sesuai dengan jumlah Postingan Terbaru/Recent Post yang ingin ditampilkan di blog .
4. Silahkan Klik SAVE untuk menyimpan template nya .
5. Langkah selanjutnya Kembali ke Dashboar Blogger dan klik Menu Tata Letak selanjutnya Klik Tambahkan Gadget, lalu Pilih yang HTML/JavaScript.
6. Selanjutnya beri nama Recent Posts/Postingan Terbaru dan Pada kolom Konten tambahkan kode dibawah ini :
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>
7. Terakhir klik Simpan dan lihat hasilnya.
Itulah langkah-langkah Cara Membuat Postingan Terbaru/Recent Post dengan Nomor di Blogspot, jika ada yang kurang di pahami atau ada yang ingin ditanyakan silahkan tuliskan di kolom komentar dibawah insya allah secepatnya akan saya respon, Demikianlah Postingan ini semoga bermanfaat untuk teman-teman Blogger semuanya.