Baiklah agar dapat dimengerti dri tutorial ini, sobat bisa melihat contoh seperti gambar berikut :
Sampai disini saya harapkan Anda sudah paham dan mengerti menampilkan judul artikel berdasarkan label. Untuk cara membuatnya, ikuti dan perhatikan langkah-langkah yang akan saya jelaskan seperti berikut :
1. Log in ke blogger
2. Klik Template
3. Klik Edit HTML
4. Lalu letakkan kode CSS berikut di atas kode ]]></b:skin>
/* Label_thumb */
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:70px;width:70px;padding:2px;box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);-moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,.7);}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
KET:
- Perhtikan teks yg berwarna biru (70px) diatas it adalah lebar dan tinggi gambar Tumbs (images) nya, silahkan sobat rubah sesuai keinginan.
5. Selanjutnya cari kode </head> , dan letakkan kode berikut diatasnya.
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/LabelThumb.js' type='text/javascript'/>
<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>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>
6. Setelah semua langkah diatas selesai, lalu Simpan Template.
7. Dan selanjutnya dengan pemanggilan kodenya, caranya Sobat Klik Pilih Rancangan, >> Klik Tambah Gadget >> Pilih HTML/Javascript >> Lalu copy dan paste kode berikut ini kedalamnya.
<script src="http://ut2a-4down.blogspot.com/feeds/posts/summary/-/Template%20Blogger?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<a href='http://ut2a-4down.blogspot.com/search/label/Template%20Blogger' style='float:right;font:normal 11px arial;padding:5px 0;'>More on this category »</a>
KET:
- Perhatikan teks yg berwarna merah silahkan ganti dengan alamat blog sobat
- Sedangkan warna hijau adalah nama label yg ingin ditampilkan, silahkan diganti.
- dan teks yg berwarna kuning, adlh jumlah perlabel yg ingin ditampilkan, silhkan dirubah sesuai keinginan masing2.okey
8. Simpan dan Lihat Hasilnya.
GoodLuck Semoga Bermanfaat. ;)
4 Komentar