Cara Membuat Widget Recent Post di Blog

Gambar Hanya Pemanis! :)

Cara Membuat Widget Recent Post di Blog - Saya rasa anda semua sudah tidak asing lagi dengan widget dan tutorial yang akan saya bagikan kali ini yaitu tentang widget recent post di blog.

Widget Recent Post ini memiliki fungsi seperti widget recent post yang lainnya, yaitu untuk menampilkan feed artikel terbaru dari blog kita. Hanya bedanya widget kali ini tidak menampilkan Thumbnail/gambar postingan hanya Menampilkan Judul postingan saja, yang dapat membuat widget ini menjadi ringan dan tidak membuat lambat loading blog anda.

• Cara Membuat Recent Post Keren di Sidebar Blog
• Membuat Recent Post Berdasarkan Label
• Membuat Widget Recent Post Dengan Navigasi
• Cara Membuat Recent Post Per Label Fast Loading

Berikut ini langkah Cara Membuat Widget Recent Post di Blog:

1. Masuk ke Dashboard blog > pilih Tata Letak > Add Gadget > HTML/Javascript
2. Kemudian salin dan paste pada konten box gadget baru tersebut > lalu simpan gadget.

<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_AND.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> 

Kustom: Ganti kode yang ditandai dengan URL blog anda dan juga jumlah recent post yang ingin ditampilkan.

Sekian artikel kali ini tentang Cara Membuat Widget Recent Post di Blog, semoga bermanfaat..