Top Ad 728x90

Cara Mudah Membuat Widget Recent Post Di Blog


Cara Mudah Membuat Widget Recent Post Di Blog


kali ini kami akan membagikan tutorial cara membuat widget recent post di blog. widget ini berfungsi menampilkan post-post terbaru pada blog kita sehingga dapat mempermudah para pengunjung menjelajahi blog kita. Widget tidak menampilkan thumbnail atau gambar post, widget ini hanya memiliki tampilan post-post yang sederhana. Caranya membuatnya cukup mudah, ikuti langkah-langkah di bawah ini.


  • Masuk ke akun blogger sobat, kemudian klik menu tata letak>>buat widget baru.
  • Copy dan pastekan kode HTML di bawah ini.

 <style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.URL_BLOG_ANDA.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");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+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script> 

Ket:

http://www.URL_BLOG_SOBAT.com (Isi dengan url blog sobat)
NumPosts= 5; (Jumlah post yang di tampilkan)


  • Selanjutnya simpan dan lihat hasilnya.


Nah itulah cara mudah membuat widget recent post, selamat mencoba.

#Bantu Bagikan Artikel Kami Dong :)

0 komentar:

Post a Comment