Cara Membuat Widget Recent Post di Blog

Cara Membuat Recent Post di Blogger

BangSiagian.id - Jika kita membahas mengenai blog pastinya diblog ada fitur recent post. Recent posts ini adalah fitur yang menampilkan artikel postingan paling terbaru di sebuah blog. Widget recent posts ini untuk mempermudah pengunjung blog untuk mengetahui artikel terbaru yang di blog yang mereka kunjungi.

Apakah widget recent post wajib kita pasang di blog?
Widget recent post ini tidak wajib dipasang diblog, tapi saya sarankan pasanglah widget recent post diblog. Semua pemilik blog memasang widget ini diblog mereka.

Di kesempatan ini saya akan membagikan arikel tutorial cara membuat widget recent post di blog. Recent post yang bagikan ini simpel, ringan dan responsive, recent post ini hanya menampilkan teks saja tanpa ada gambar.

Kalau kamu ingin untuk memasang recent post diblog, silahkan kamu ikuti caranya memasangnya dibawah ini.


Cara Membuat Widget Recent Post di Blog


1. Login ke akun blogger
2. Pilih blog yang ingin dipasang recent post
3. Klik menu tata letak disebelah kiri
4. Klik Tambahkan Gadget
5. Klik HTML/JavaScript lalu masukkan kode recent post dibawah 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;font-size:15px}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#2574a9;}li.recent-posts a:hover{color:#2574a9;text-decoration:none}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "//www.bangsiagian.id",
numPosts = 15;
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+'">'+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>

Keterangan:
Perhatikan kode recent poss diatas yang saya kasih tanda merah.

6. Klik simpan
7. Lihat hasilnya

Tidak susahkan membuat widget recent post di blog nya?.

Demikianlah artikel tutorial cara membuat widget recent diblog. Semoga artikel ini berguna dan bermanfaat untuk pengunjung blog saya.

Selamat mencoba dan semoga berhasil.

Iklan Atas Artikel

Iklan Tengah Artikel 1


Iklan Tengah Artikel 2

Iklan Bawah Artikel