Cara Membuat Recent Post Keren di Blogger – Memasang postingan terbaru atau yang biasa disebut dengan recent post merupakan salah satu cara dalam menampilkan postingan terbaru pada blog itu sendiri. Widget yang satu ini dibutuhkan biasanya untuk meningkatkan trafik apabila Anda baru saja melakukan publish artikel, sehingga pengunjung akan mengetahui bahwa blog Anda saat ini sudah tersedia artikel terbaru untuk dibaca.
Selain digunakan untuk meningkatkann trafik blog, banyak juga dari mereka yang menggunakan widget ini untuk mengisi space kosong pada sidebar template blog mereka. Widget recent post biasanya terdiri dari beberapa artikel terbaru beserta nomor pada bagian kiri maupun kanan, sehingga akan lebih terlihat menarik dan keren di mata pengunjung.
Proses pembuatan widget recent post juga tidak begitu sulit, Anda hanya perlu menambahkan CSS dan Javascript serta kode pemanggil saja pada template blog yang Anda gunakan. Untuk CSS recent post yang akan saya bagikan dibawah ini juga dapat disesuaikan dengan selera masing-masing. Seperti merubah numbered ke sebelah kanan, merubah backround pada angka, dan lain sebagainya.
Daripada berlama-lama, berikut ini akan saya berikan tutorial cara membuat widget recent post keren dengan nomor di blogger. Apakah dengan menggunakan recent post ini akan sedikit memberatkan loading blog? Tentu, pasalnya widget ini membutuhkan JavaScript.
Cara Membuat Recent Post di Blogger
Langkah 1 – Silahkan copy kode CSS dibawah ini tepat berada di atas kode ]]></b:skin>
/* Recent Posts MahesWeb*/
#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}Langkah 2 – Kemudian cari kode </body> dan letakkan kode di bawah ini tepat berada di atas kode tersebut
<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>Langkah 3 – Langkah terakhir silahkan letakkan widget recent post di bagian sidebar pada situs Anda, caranya juga cukup mudah, Anda hanya perlu pergi ke menu Tata Letak > Pada menu Sidebar klik +Tambahkan Gadget > selanjutnya pilih HTML/Javascript > dan klik Simpan.
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>
Itulah tutorial singkat kali ini tentang cara membuat widget recent post keren dengan nomor di blogger. Semoga dengan adanya artikel di atas bisa bermanfaat bagi banyak orang, apabila ada pertanyaan terkait dengan artikel di atas. Silahkan komentar di kolom yang sudah disediakan, Selamat mencoba!
