Cara Membuat Recent Post Keren Dengan Nomor di Blogger

Cara Membuat Recent Post Keren Dengan Nomor di Blogger - Memasang Recent Post di Blog merupakan salah satu cara para blogger untuk menampilkan artikel terbaru dan baru di perbarui di blog. Widget Recent Post ini juga digunakan oleh para blogger untuk membuat atau bahkan untuk mengisi tempat kosong di sidebar blog agar blog tampak lebih hidup.

Widget Recent Post atau Artikel terbaru ini dilengkapi dengan trik numbering atau istilah lainnya widget ini tampil dengan nomor di bagian kiri judul postingan dan tersusun secara berurutan.

Pemasangan widget ini cukup mudah, dengan hanya menyimpan kode css dan javascript di template blog kita sudah bisa menampilkan widget recent post ini dengan kode pemanggil saja.

Widget Recent Post dengan nomor ini saya bagikan dengan dua model atau style berbeda, jadi sobat bisa memilih tampilan mana yang ingin sobat pilih.

Selanjutnya untuk sobat yang tertarik ingin mencoba memasang widget recent post ini, bisa langsung ikuti tutorial simple berikut.

Memasang Recent Post dengan Nomor di Blog

Pertama, silahkan simpan kode CSS sebelum kode </style>.

Kedua, silahkan simpan javascript sebelum kode </body>

Terakhir, kemudian tambahkan kode pemanggil sesuai dengan style recent post yang sobat ingin gunakan dengan cara klik menu Layout - Add a Gadget - Pilih HTML/JavaScript - Simpan kode pemanggilnya dan Simpan.

Widget Recent Post Style 1

Untuk menggunakan recent post style 1, silahkan gunakan kode-kode berikut

/* Recent Posts */
#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}

<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>

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

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan untuk memasang recent post versi kedua, silahkan gunakan kode-kode berikut

/* Recent post */
ul#recent-post{list-style:none;margin:0 auto;padding:0;}
li.recent-post{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 35px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}
li.recent-post:before{content:counter(num);display:block;position:absolute;font-size:27px!important;top:7px;left:7px;font-weight:normal!important;font-style:italic;color:#24699A!important}
li.recent-post a{color:#444;font-size:14px}
li.recent-post a:hover{color:#FF8100}

<script>
//<![CDATA[
numPosts = 9;
function recentPosts(a){if(document.getElementById("recent-post")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-post");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-post"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

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

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan itulah tutorial Cara Membuat dan Memasang Recent Post Keren Dengan Nomor di Blogger yang saya bagikan ini bisa membantu sobat yang ingin memasang widget artikel terbaru di blog. Jika ada pertanyaan seputar artikel yang saya buat kali ini silahkan tnggalkan komentar. Selamat Mencoba dan Salam Luar Biasa.