Dengan adanya widget recent post pengunjung dapat mengetahui postingan terbaru dari blog kita. Sebenarnya blogger juga menyediakan widget feed yg fungsinya sama seperti recent post. Bagi anda yang ingin membuat widget recent post di blog, berikut adalah langkah-langkah membuat widget recent post
CSS Recent Post
- Login ke akun blogger.
- Kemudian, klik menu template.
- Klik edit html.
- Pastekan kode berikut diatas kode ]]></b:skin>
#recent-posts li {list-style: none;border-bottom: 1px dotted #ff5848;padding-bottom: 10px;padding-top: 10px;}- Kemudian klik simpan
Script Recent Post
- Login ke akun blogger.
- Kemudian klik menu tata letak.
- Klik tambahkan elemen atau add gadget.
- Lalu pilih HTML/Javasript.
- Kemudian pastekan kode di bawah ini.
<script>
//<![CDATA[
var homePage = "http://www.technocenterid.com/",
numPosts = 10;
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><a href="'+link+'" title="'+title+'" target="_blank">'+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>
- Klik simpan
Jangan lupa untuk mengganti var homePage = “http://www.technocenterid.com/” dengan url blog anda dan numPosts = 10 ganti dengan jumlah postingan yg ingin ditampilkan
Demikianlah tutorial mengenai cara membuat widget recent post di blog, sebenarnya anda dapat membuatnya dengan RSS Feed namun memang sedikit lebih rumit, dengan menggunakan tutorial ini semoga dapat mempermudah anda.
EmoticonEmoticon