Kali ini saya mencoba berbagi satu lagi tutorial blogger tentang membuat widget berdasarkan label dengan hanya satu thumbnail yang berada di bagian atas sedangkan pada bagian bawah hanya menampilkan judulnya saja,untuk lebih jelas sobat bisa lihat screenshot gambar dibawah ini.
Biasanya widget seperti ini banyak digunakan oleh blog yang memiliki konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Cara membuat widget per label yang di gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.
nah sekarang bagaimana cara membaut widget seperti screenshot diatas,berikut langkah langkahnya :
1. Masuk dulu ke Dashboard atau ke akun blogger sobat.
2. Terus pilih Layout dan Edit HTML
3. Sebelumnya ada baiknya sobat Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>
Warna biru diatas adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, cari kode </head> dan jika sudah ketemu copas kode berikut diatasnya:
7. Setelah itu save templates sobat, kemudian masuk ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript dan copas kode berikut kedalamnya :
Kode 3:
<script type="text/javascript">var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script src="/feeds/posts/default/-/kesehatan?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>
";
document.write(item);
}
document.write('</ul>
');
}
</script>
<script src="http://abitalita.blogspot.com/feeds/posts/summary/-/kesehatan?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://abitalita.blogspot.com/search/label/kesehatan" style="float: right; font: normal 11px Arial; padding: 5px 0;">More on this category »</a>
Silahkansobat ganti teks wara merah dengan URL blog sobat dan teks warna biru dengan nama label sobat.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika sobat meletakkan di sidebar) pada template yang sobat pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.
8. Selanjutnya Save Tempalte dan lihat hasilnya.
Lihat sumbernya disini
2 komentar
kok cuma 1 post yang nongor tidak kanyak di demo
numposts =1 ganti angkanya kang
Terima kasih atas kunjungannya, silahkan berkomentar sesuai topik. Menuliskan link aktif tidak akan ditampilkan dalam komentar.Terima Kasih.