Recent Posts Dan Recent Comments Feeds Blogspot

Menampilkan Recent Posts (artikel terbaru) dan Recent Comments (komentar terbaru) dengan menggunakan Widget Feed Blogspot adalah sebuah teknik yang sangat sederhana dan mampu mengurangi waktu load blog apabila dibandingkan dengan menggunakan teknik lainnya yang menggunakan javascript.

RSS Feed Logo - Image Source: http://www.infobarrel.com

Untuk menampilkan Widget Recent Post dan Widget Recent Comment pada sidebar atau footer, dapat dilakukan dengan cara:

1. Add A Gadget dan pilih Feed Widget

rss feed blogger widget

2. Isikan feed url untuk Recent Posts http://alamat-blog-anda.blogspot.com/feeds/posts/default dan feed url untuk Recent Comments http://alamat-blog-anda.blogspot.com/feeds/comments/default

3. Widget Recent Posts dan Widget Recent Comments telah selesai dipasang, dan selanjutnya tambahkan CSS agar tampilannya menjadi sedikit berbeda :D

Tambahkan CSS ini di atas ]]></b:skin>

.Feed ul li{list-style:none;position:relative;counter-increment:num;margin:5px}
.Feed ul li:before{color:inherit;font-size:120%;font-weight:700;text-decoration:none}
.Feed ul li:before{background-color:#ddd;color:#000;content:counter(num);display:block;width:30px;height:30px;line-height:30px;margin-top:-15px;position:absolute;right:0;text-align:center;top:50%;z-index:1}
.Feed .item-title{background:#ededed;border-bottom:30px solid #ddd;display:block;height:50px;padding:5px;position:relative}
.Feed .item-date,.Feed .item-author{display:inline;font-size:10px;font-style:oblique;position:absolute;width:100px;height:20px;line-height:20px;overflow:hidden}
.Feed .item-date:before{content:"On: "}
.Feed .item-author:before{content:"By: "}
.Feed .item-date{bottom:5%;left:2%}
.Feed .item-author{bottom:5%;right:2%}

4. Selamat Mencoba :D

Screenshot Recent Posts dan Recent Comments Blogspot