Cara Memasang Widget Recent Posts Pada Blogger

Widget Recent Posts atau artikel terkini adalah salah satu widget yang paling banyak digunakan oleh blogger. Pemilik blog memasang widget ini di blog mereka yang bertujuan memaparkan artikel terkini / recent posts yang terkandung dalam blog itu kepada pelawat.
Cara Memasang Widget Recent Posts Pada Blogger

Banyak jenis atau bentuk widget recent posts namun kali ini saya cuma akan kongsikan recent posts bernombor sahaja.

Widget yang akan saya kongsikan adalah widget posting terkini dengan nombor urut dan teks. Widget ini ringan sehingga tidak membuat blog anda berat dan recent posts ini pastinya kelihatan cool haha.

Pemasangan widget ini agak mudah, kita hanya perlu menyimpan kod css dan kod skrip java dalam template blogger kita.

Adakah anda berminat untuk memasang widget related posts?
Sekiranaya anda berminat silakan ikut cara-cara memasang widget recent posts yang saya akan kongsikan ini.

Untuk memasang widget recent posts ini anda harusla mengedit template anda, silakan masuk ke menu html editor di blogger anda.

Pasangkan CSS code berikut ke dalam css style anda ataupun di dalam bskin blogger anda.
/* 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}

Seterusnys Cari code </body> dan pasangkan javascript recent posts berikut tepat di atas code </body>, Perhatikan code di bawah dimana code yang saya tandakan 10   bilangan recent posts yang akan tampil di wiget anda, so ubah ikut kesesuaian templat anda
<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>

Setelah selesai memasang code recent posts bernombor yang saya berikan di atas, silakan simpan template anda, masuk ke menu layout dan buat widget baru menggunakan html javascript dan masukan code pemangil recent posts berikut ke dalam widget anda.
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>

Simpan widget baru anda dan silakan kunjungi blog anda , dan lihat hasilnya, bagaimana? senang bukan untuk membuat widget recent posts bernombor, Baiklah sampai di sini sahaja posting saya tentang cara membuat widget recent posts bernombor di blogger, sekiranya ada kekurangan tentang recent posts widget ini silakan kemukakan cadangan anda di ruangan comment yang saya sediakan.

Related Post