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!
Social Plugin