Membuat Widget Label Tertentu Dengan Satu Thumbnail

Didalam ulasan kali ini juga SEO Konoe tak habis-habisnya memberikan ulasan mengenai HTML5 yakni bagaimana membuat widget Label Tertentu Dengan Satu Thumbnail dengan arti kita akan menampilkan sebuah widget dimana kita dapat menampilkan thumbnail hanya satu saja pada widget tersebut.

Kenapa dikatakan Label tertentu, nah Seo konoe akan menjelaskan maksudnya. Jadi, label tertentu maksudnya kita akan menampilkan label apa saja yang ada pada blog kita, pilih salah satu label saja, kemudian langkah berikutnya sebagai berikut :

1. Pertama yang harus anda lakukan yakni login pada blogger sobat
2. Kemudian silahkan masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> (gunakan ctrl+f biar lebih mudah)
5. Kemudian 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}

6. Setelah kode diatas sudah sobat tempatkan sesuai langkah diatas maka langkah selanjutnya masukkan kode berikut ini diatas kode </head> 

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

7. Kemudian 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&amp;alt=json-in-script&amp;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://seo-konoe.blogspot.com/feeds/posts/summary/-/SEO?max-results=6&amp;alt=json-in-script&amp;callback=recentpostslist"></script>
<a href="http://seo-konoe.blogspot.com/search/label/SEO" style="float:right;font:normal 11px Arial;padding:5px 0;">Kategori Selengkapnya &#187;</a>

9. Langkah terakhir yang anda lakukan  Agar valid HTML5 sobat harus menghapus kode <b:include name='quickedit'/> pada menu Edit HTML
INFORMASI :
Setelah anda sudah menerapkan cara diatas alangkah baiknya ikuti kembali aturan langkah yang Seo Konoe berikan diterakhir ini,
Dimana : 
Warna biru : Pada tulisan Link diatas merupakan link blog Seo Konoe, silahkan gantikan dengan URL blog anda.
Warna merah : Pada tuilsan link diatas silahkan anda gantikan label atau kategori yang ingin anda ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.

10. Selanjutnya Save dan lihat hasilnya.