Membuat Widget Label Dengan 1 Thumbnail Valid HTML5

Ok, sobat BDariku kali ini admin akan sharing tentang tutorial bagaimana cara membuat label tertentu dengan 1 thumbnail. Maksud saya disini adalah membuat widget label yang hanya menampilkan judul saja dan hanya menampilkan 1 thumbnail saja.

Widget ini biasanya digunakan digunakan oleh blog 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 membuatnya adalah sebagai berikut :

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah 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}

7. Selanjutnya masukkan kode berikut ini diatas kode </head>

<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>

8. Setelah itu save templates, kemudian menuju ke Tata Letak pilih kotak yang akan ditambahkan widget ini. Klik add gadget - HTML/Javascript masukkan kode berikut ini kedalamnya:

<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/-/Naruto?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://www.dariku.net/feeds/posts/summary/-/Naruto?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://www.dariku.net/search/label/Naruto" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

9. Agar valid HTML5 sobat harus menghapus kode <b:include name='quickedit'/> pada menu Edit HTML
Keterangan:
Warna biru : Ganti URL dengan URL blog anda.
Warna merah : Ganti label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Selanjutnya Save dan lihat hasilnya.

Jika ada masalah silakan sobat beri pesan melalui kotak komentar dibawah ini.

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku