Tutorial kali ini saya bahas cara memasang widget recent post sederhana di blogger atau blogspot. Tampilan simple dan sederhana karena cuma judul saja yang ditampilkan. Tanpa menurunkan performance blogger anda.
Langsung saja berikut adalah langkah langkah nya:
1. Silahkan anda backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot
2. Langkah selanjut adalah anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot
3. Setelah masuk ke halaman editor template anda, taruh kode javascript berikut sebelum kode </head>:
<b:if cond='data:blog.isMobile == "false"'>
<script type='text/javascript'>
//<![CDATA[
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++) {
if (i == json.feed.entry.length) break;
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
entryUrl = json.feed.entry[i].link[j].href;
break;
}
}
var entryTitle = json.feed.entry[i].title.$t;
var item = '<li>' + '<a href="' + entryUrl + '" title="' + entryTitle + '">' + entryTitle + '</a></li>';
document.write(item);
}
document.write('</ul>');
}
//]]>
</script>
</b:if>
Keterangan: saya menggunakan kode <b:if cond='data:blog.isMobile == "false"'> jadi ketika anda menggunakan custom template mobile javascript diatas tidak akan ditampilkan tapi jika anda ingin tetap meload javascript tersebut di mobile mudah tinggal hapus kode <b:if cond='data:blog.isMobile == "false"'> dan </b:if>.
4. Langkah berikutnya anda cukup memasukkan di widget atau gadget HTML/Javacript nya saja kode berikut:
<script src='/feeds/posts/default?orderby=published&max-results=7&alt=json-in-script&callback=recentpostslist'/>Kode diatas adalah untuk menampilkan semua posting terbaru sebanyak 7 buah. Anda bisa mengubah kode: max-results=7 dengan angka 5 untuk menampilkan 5 postingan terbaru.
Jika anda ingin menampilkan posting terbaru untuk label tertentu anda bisa memasukkan kode berikut:
<script src='/feeds/posts/default/-/namalabelanda?max-results=7&alt=json-in-script&callback=recentpostslist'/>Ubah kode namalabelanda dengan label yang ingin anda tampilkan. Jika anda tidak tahu cara memasukkan widget di blogger silahkan lihat tutorial:
Cara menambahkan atau memasang gadget atau widget di blogger atau blogspot.
Untuk demo anda bisa lihat di blog ini pada sidebar ada widget recent post.
Mudah sekali bukan. Semoga artikel tersebut bermanfaat buat anda.
0 comments