Membuat Recent Posts dan Popular Posts Untuk Blogger

Setelah sebelumnya telah saya share tentang Membuat Form Berlangganan Artikel Via E-mail, pada postingan kali ini saya akan melanjutan menshare tentang cara Membuat Recent Posts dan Popular Posts Untuk Blogger, ya menurutku Recent Posts dan Popular Posts adalah widget yang juga penting untuk dipasang di blog kita, selain juga untuk pelangkap dan memperindah tampilan blog tapi juga berfungsi untuk menampilkan postingan terbaru dan postingan terpopular.

Konon widget ini juga penting untuk dipasang ketika kita ingin mendaftarkan blog kita ke Google Adsense, namun saya juga kurang tahu apakah ini mitos atau nyata, karna buktinya blog saya ini belum di ACC sama Google Adsense padahal sudah saya pasang Widget Recent Posts dan Popular Posts di blog ini. Hahaha

Nah untuk kalian yang ingin memasangnya akan saya terangkan satu persatu, dimulai dari cara membuat Widget Recent Posts terlebih dahulu, monggo disimak.

1. Masuk ke akun Blogger kalian.
2. Pilih Tata Letak, Tambahkan Gadget, lalu klik HTML/JavaScript
3. Masukkan kode dibawah ini lalu Simpan.
<script>//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<7;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]></script>
4. Lanjut kita Edit Tema untuk memasang CSS, pasang kode di bawah ini di atas kode </head>
<style type='text/css'>
#recent-posts{
    background:#01a7de;
    width:auto;
    padding:0 autopx;
    margin:0 auto;
    border-bottom:1px solid #000;
    font:13px Open Sans MS;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    color:#fff;
}
#recent-posts li{
    border-top:1px solid #000;
    padding:5px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style><style type='text/css'>
#recent-posts{
    background:#01a7de;
    width:auto;
    padding:0 autopx;
    margin:0 auto;
    border-bottom:1px solid #000;
    font:13px Open Sans MS;
}
#recent-posts ul,#recent-posts li {
    list-style:none;
}
#recent-posts a{
    color:#fff;
}
#recent-posts li{
    border-top:1px solid #000;
    padding:5px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>

Sekarang kita lanjut untuk membuat Popular Posts, tidak jauh beda dengan saat membuat Recent Posts, Ok langsung saja simak.

1. Masuk ke akun Blogger kalian.
2. Pilih Tata Letak, Tambahkan Gadget, klik Popular Posts silahkan atur sesuai keinginan.

Membuat Recent Posts dan Popular Posts Untuk Blogger

3. Masuk pada bagian edit Tema untuk memasang kode CSS, lalu pasang kode di bawah ini di atas kode ]]></b:skin>

/*----- Popular Posts -----*/
.PopularPosts .widget-content ul{width:autopx;background:#333;padding:0px !important;list-style-type:none;font:13px Open Sans MS;border-bottom:1px solid #000;}
.PopularPosts .widget-content ul li{margin:0 auto px;padding:5px 0 !important;background:#01a7de;border-top:1px solid #000;}
.PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:black;}
.PopularPosts .widget-content ul li:first-child{border-top:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none}

OK Sekian dulu postingan yang bisa saya bagikan untuk malam ini, silahkan dicoba dan semoga bermanfaat, jika kode error maafkan saya, karena saya juga baru belajar.

BACA JUGA POSTINGAN LAINNYA:


KOMENTAR DAN POSTINGAN LAINNYA