Cara Membuat Label Tertentu Dengan Thumbnail

Cara Membuat Label Tertentu Dengan Thumbnail - Blogger Update. Asslamualaikum wr.wb. Tadi saya sudah posting mengenai Template Fastest Magz V3, tapi anda pasti kebingung membuat label tertentu nah saya akan membagikannya disini. Membuat Label Tertentu Dengan Thumbnail memperindah tampilan blog anda, karena itu saya juga memakainya untuk memperindah tampilan blog saya. Yuk lihat screenshoot Label Tertentu Dengan Thumbnail :

Langkah-Langkah Membuat Label Tertentu Dengan Thumbnail

1. Buka Blog Anda >> Edit Tempalate.

2. Cari kode ]]></b:skin>, lalu masukan kode dibawah ini diatas 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 {}

3. Cari kode </head>, lalu masukan kode dibawah ini diatas 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/AVvXsEi0eiif42j8RDfcbPJjRUc2u-y7F84x0VcXNkdkXPqJbClT4UGMBGmCcA9sAYpKl4cN9SjQhFx2WQJAHF40tOSkI8laSgIclkvrtQzUgdPlQNCPOX0l3E-8SSezLUfzQFexTECW_DQLfkRB/';}
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> 

4. Simpan template.
5. Pilih tata letak >> tambahkan gadget >> HTML/javascript.
6. Masukan script dibawah ini ke dalam gadget HTML/javascript.

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = true;var displayseparator = false;var showcommentnum = false;var showpostdate = true;var showpostsummary = false;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blogger?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Note :
var numposts = Berepa banyak post yang ditampilkan.
var showpostthumbnails = Menampilkan gambar.
var displaymore = Menampilkan fitur baca selengkapnya.
var displayseparator = Menampilkan pemirsa.
var showcommentnum = Menampilkan berepa banyak komentar.
var showpostdate = Menampilkan waktu kapan posting.
var showpostsummary = Menampilkan ringkasan posting.
var numchars = 80 >> Berapa banyak kata ringakasan posting.

Ganti tulisan merah dengan label anda sendiri. (contoh : Tutorial%20Blogger )

7. Simpan dan selesai.

Jika ada pertanyaan silahkan ditanya dikotak komentar saya akan menjawab pertanyaan sobat blogger sebisa saya. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Cara Membuat Label Tertentu Dengan Thumbnail. Simak juga artikel saya yang lainnya : Cara Membuat Emoticon Di Komentar Blogger, Cara Memasang Iklan Disamping Kiri dan Kanan Blog Melayang, Cara Membuat Iklan Melayang Di Bawah Blogger Dengan Tombol Close, dan Cara Membuat Artikel Yang Berkualitas SEO Friendly. Terima kasih sudah berkunjung.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya