Pahamkah Anda yang dimaksud oleh judul tulisan ini? Kalau belum paham, silakan lihat gambar di bawah ini:
Nah, sekarang tentunya sudah paham. Apakah Anda ingin membuatnya di blog Anda? Apakah Anda sudah mengetahui cara membuatnya? Kalau belum tahu, berikut akan kami paparkan cara membuatnya. Silakan simak, semoga Anda bisa melakukannya sendiri di blog Anda.
1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template Anda
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini di atas kode ]]></b:skin> :
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
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}
.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}
Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini ke dalamnya :
<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 type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></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://aswajacenterklaten.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://aswajacenterklaten.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></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://aswajacenterklaten.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://aswajacenterklaten.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.
Selanjutnya save dan lihat hasilnya.
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.
Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini
mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada
template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget
ini hanya digunakan untuk mengatur tampilan thumbnail.
Demikian tadi tutorial mengenai
membuat widget per label kali ini, jika masih ada yang kurang jelas
silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga
bermanfaat.
0 komentar:
Posting Komentar