Cara Membuat Recent Posts Bernomor Pada Blog Di Blogger

BangSiagian.id - Widget recent posts atau artikel terbaru merupakan salah satu widget yang paling banyak digunakan oleh pilih blog. Para pemilik blog memasang widget ini pada blog mereka bertujuan untuk menampilkan artikel terbaru yang terdapat di blog kepada pengunjung.

Banyak jenis atau bentuk widget recent posts ini antara lain adalah widget recent posts bergambar dan tulisan / hanya gambar saja / hanya dengan tuisan teks saja dan nomor urut.

Recent posts yang akan saya bagikan ini adalah widget recent posts dengan nomor urut dan disertai tulisan teks. Widget ini ringan sehingga tidak membuat blog menjadi berat dan pastinya widget recent posts ini tampilannya keren.

Pemasangan widget ini pun cukup mudah, kita hanya perlu menyimpan kode css dan kode java script di bagian edit kode pemanggil widget recent posts di tambahkan widget di blog.

Apakah kamu tertarik untuk memasang widget recent posts ini?

Sebelum kamu memasang widget ini diblog kamu, sebaiknya kamu lihat terlebih dahulu demo widgetnya. Klik tombol demo dibawah ini.

DEMO

Setelah kamu melihat demo widget recent posts tesebut pasti kamu terarik untuk memasang widget ini di blog kamu kan.


BACA JUGA: Cara Membuat Recent Post Responsive di Blog


Bagaimana cara memasang widget ini?

Silahkan ikuti langkah-langkahnya dibawah ini.


Cara Membuat Recent Posts Bernomor Pada Blog Di Blogger


1. Login ke Blogger.com

2. Silahkan klik menu TEMA >> EDIT HTML

3. Cari kode ]]></b:skin> lalu tambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

CSS

/* 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}

Baca Juga: Cara Membuat Iklan atau Widget Blog Hanya Tampil Di Mobile Site Blog


4. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; lalu tambakan kode JavaScript dibawah ini tepat diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

JavaScript

<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:
Perhatikan >> numPosts = 10 pada kode diatas. 10 adalah jumlah recent posts yang ingin ditampilkan.

5. Tambahkan kode pemanggil recent posts dibawah ini di Tambahkan Gadget dengan cara klik menu Tata Letak >> Klik Tambahkan Gadget >> Pilih HTML/JavaScript >> Klik Simpan.

Kode Pemanggil 

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

Untuk melihat hasilnya silahkan buka blog kamu dan lihatlah tampilan recent posts keren dengan nomor ini diblog kamu.

Itulah dia artikel dari saya mengenai cara membuat recent posts bernomor pada blog di blogger.

Share This