Membuat Widget Label Dengan Gambar Thumbnail

Dalam postingingan kali ini saya akan menunjukkan kepada kalian bagaimana cara menampilkan postingan berdasarkan label pada widget blog dengan menggunakan gambar.Dengan menambahkan gambar thumbnail pada widget kalian akan menambah daya tarik blog jadi blog tidak bisa kaku. Tutorial yang saya buat cukup sederhana dan mudah oleh karena itu mari kita mulai saja tutorial kali ini.

• Pertama masuk ke blog kalian dan pilih tata letak / layout 

• setelah itu klik add gadget dan pilih HTML / Java Script.

• kemudian pasang kode HTML dibawah ini kedalam kotak dialog HTML

<style> 
img.recent_thumb {padding: 1px; width: 72px; height: 72px; border: 0; float: left; margin: 0 10px 5px 1px;} last_posts_with_thumbs {float: right; width: 100%; min-height: 72px; margin: 5px 10px 5px 0px; padding: 0; font-size: 12px;} ul. recent_posts_with_thumbs li {padding-bottom: 5px; padding-top: 5px; min-height: 72px;}. recent_posts_with_thumbs a {hiasan teks: none;}. recent_posts_with_thumbs strong {font-size: 10px;} </ style> 
<script > 
fungsi showrecentpostswiththumbs (json) {document.write ('<ul class = "recent_posts_with_thumbs">'); untuk (var i = 0; i <numposts; i ++) {var entry = json.feed.entry [i]; var posttitle = entry.title $ t; var posturl; if (i == json.feed.entry. panjang) break; for (var k = 0; k <entry.link.length; k ++) {
jika (entry.link [k] .rel == 'balasan' && entry.link [k] .type == 'text / html') {var commenttext = entry.link [k] .title; var commenturl = entry.link [k] .href;} 
jika (entry.link [k] .rel == 'alternate') {posturl = entry.link [k] .href; break;}} var thumburl; coba {thumburl = entry.media $ thumbnail.url;} catch (error) 
{ 
s = entry.content. $ t; a = s.indexOf ("<img"); b = s.indexOf ("src = \" ", a); c = s (1) && (b! = - 1) && (c! =), (b) = - 1) && (b! = - 1) && (c! = -1) && (d! = "")) { 
Thumburl = d;} else thumburl = 'http: //lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif'; 
}

 var postdate = entry.published $ t; var cdyear = postdate.substring (0,4); var cdmonth = postdate.substring (5,7); var cdday = postdate.substring (8,10); var monthnames = new Array (); monthnames [1] = "Jan"; monthnames [2] = "Feb"; monthnames [3] = "Mar"; monthnames [4] = "Apr"; monthnames [5] = "May"; monthnames [6] = "Jun"; monthnames [7] = "Jul"; monthnames [8] = "Aug"; monthnames [9] = "Sep"; monthnames [10] = "Oct"; monthnames [11] = " Nov "; monthnames [12] =" Dec "; document.write ('<li class =" clearfix ">'); 

if (showpostthumbnails == true) 

document.write ('<img class = "recent_thumb" src = "' + thumburl + '" />'); 

document.write ('<b> <a href="'+posturl+'" target ="_top">' + posttitle + '</a> </ b> <br>'); 

    jika ("isi" dalam entri) { 

      var postcontent = entry.content. $ t;} 

    else 

    if ("summary" in entry) { 

      var postcontent = entry.summary. $ t;} 

    else var postcontent = ""; 

    var re = / <\ S [^>] *> / g; 

    postcontent = postcontent.replace (re, ""); 

if (showpostsummary == true) { 

      if (postcontent.length <numchars) { 

          document.write ('<i>'); 

         document.write (postcontent); 

          document.write ('</ i>');} 

      else { 

          document.write ('<i>'); 

         postcontent = postcontent.substring (0, numchars); 

         var quoteEnd = postcontent.lastIndexOf (""); 

         postcontent = postcontent.substring (0, quoteEnd); 

         document.write (postcontent + '...'); 

          document.write ('</ i>');} 

} 

var towrite = ''; bendera var = 0; 

document.write ('<br> <strong>'); 

if (showpostdate == true) {towrite = towrite + monthnames [parseInt (cdmonth, 10)] + '-' + cdday + '-' + cdyear; flag = 1;} 

if (showcommentnum == true) 

{ 

if (flag = = 1) {towrite = towrite + '| ';} 

if (commenttext ==' 1 Komentar ') commenttext =' 1 Komentar '; 

if (commenttext == '0 Komentar') commenttext = 'Tidak ada Komentar'; 

commenttext = '<a href="'+commenturl+'" target ="_top">' + commenttext + '</a>'; 

towrite = towrite + commenttext; 

bendera = 1; 

; 

} 

if (displaymore == true) 

{ 

if (flag == 1) towrite = towrite + '| '; 

towrite = towrite + '<a href="'+posturl+'" class="url" target ="_top"> baca selengkapnya & # 187; & # 187; </a>'; 

bendera = 1; 

; 

} 

document.write (towrite); 

document.write ('</ strong> </ li>'); 

if (displayeparator == false) 

if (i! = (numposts-1)) 

document.write ('<hr color = "# d9f1fa" size = 0.5>'); 

} document.write ('</ ul>'); 

} 

</ script> 

<script> 

var numposts = 10 ; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; </ script> <script src = "http://namablog.blogspot.com / feed / posts / default / - / nama% 20label ? orderby = diterbitkan & alt = json-in-script & callback = showrecentpostswiththumbs"> </ script> <div class = "clear" /> </ div>

Keterangan :

• ganti teks warna kuning dengan jumlah max postingan yang kamu inginkan.
• 
  
• ganti teks warna hijau dengan nama blog kalian.
• 
  
• ganti huruf warna merah dengan nama label kalian (jika nama labelnya dipakai menggunakan% 20 jika tidak maka tidak perlu)

Setelah selesai maka klik save dan lihatlah hasilya.