Label Widget with Thumbnail

Label widget with thumbnail ini berbeda dengan widget label biasanya, karena widget ini dapat menampilkan gambar dan ringkasan artikel secara otomatis, jadi tidak perlu mengeditnya setiap saat ada postingan baru. Dengan widget ini pula kita dapat menampilkan postingan dalam satu label atau kategori dalam sebuah widget.

Widget ini sebenarnya dibuat untuk menampilkan label atau kategori yang berada di dalam sub menubar yang tersembunyi agar dapat terlihat oleh pengunjung. Langsung saja bagi yang ingin memasangnya ikuti langkah berikut.

Label widget with thumbnail

Langkah pertama

• Login ke blogger
• Pilih menu Template
• Klik Edit HTML
• Cari kode ]]></b:skin> lalu copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

/*** Featured Categories ***/

img.label_thumb {

float:left;

padding:5px;

border:1px solid #8f8f8f;

background:#D2D0D0;

margin-right:10px;

height:55px;

width:55px;

}

img.label_thumb:hover{

background:#f7f6f6;

}

.label_with_thumbs {

float: left;

width: 100%;

min-height: 70px;

margin: 0px 10px 2px 0px;

adding: 0;

}

ul.label_with_thumbs li {

padding:8px 0;

min-height:65px;

margin-bottom:10px;

}

.label_with_thumbs a {}

.label_with_thumbs strong {}

• Kemudian cari kode </head> lalu copy kode di bawah ini dan letakkan tepat di atas kode </head>

<script type='text/javascript'>

//<![CDATA[

function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBjrnWy-zQtMAT4zDmoesC1y_2tzOyUmocLBmgUm2IhmFr0VVdArmwgKIqLqE1LNMTkvW4ixKWxlLHexVohMZihv9vrnT9XDOrcYHvepjwf74ir4dlFngxbNXqHKw09yXIHjOwmVrt-j6/';}

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('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){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('');document.write(postcontent);document.write('');}

else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}

var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}

if(showcommentnum==true)

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

if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}

if(displaymore==true)

{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}

document.write(towrite);document.write('</li>');if(displayseparator==true)

if(i!=(numposts-1))

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

//]]>

</script>

• Kemudian simpan Template

Langkah kedua

• Pilih menu Tata Letak
• Klik Tambahkan Gadget
• Copy kode di bawah ini dan letakkan Konten yang tersedia

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 80;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

• Ganti kode warna merah dengan label atau kategori blog yang ingin Sobat tampilkan
• Terakhir klik Simpan dan lihat hasilnya.

Label Widget with Thumbnail ini juga dapat dipasang lebih dari satu sehingga dapat menampilkan semua label atau kategori yang ada di blog, kita tinggal copy kode pada langkah kedua dan letakkan pada posisi dimana widget ingin ditampilkan. Demikian cara menampilkan Label Widget with Thumbnail ini, semoga dapat bermanfaat dan selamat mencoba.