Skip to main content
Pehawe Official

follow us

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

CSS Style 1

/* 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 Style 1

<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>
Kode Pemanggil 1
<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

CSS Style 2

/* 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 Style 2

<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>
Kode Pemanggil 2

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

Jika sobat ingin menjadi donatur silahkan hubungi admin via Whatsapp. Dana hasil dari Donasi akan digunakan untuk memperpanjang domain pehawe.me. Terima Kasih

You Might Also Like :

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar