Cara Membuat Label Tertentu Dengan Thumbnail

Unknown

Rabu, 13 Agustus 2014

Cara Membuat Label Tertentu Dengan Thumbnail - Blogger Tips. Asslamualaikum wr.wb. Tadi saya sudah posting mengenai Cara Memperbaiki Flasdisk Terkunci, namun saat ini saya akan memposting bagaimana cara membuat label tertentu dengan thumnail di blog. Mengapa label tertentu yang ada thumnailnya? yaps, karena saya ingin menampilkan beberapa label tertentu dan dari segi tampilan juga lebih menarik dan minimalis. Nah saya akan membagikannya disini. Membuat Label Tertentu Dengan Thumbnail di Blog dapat memperindah tampilan blog anda tentunya, karena itu saya juga memakainya untuk memperindah tampilan blog saya. Tanpa panjang lebar, silahkan di lihat lihat dulu screenshoot Label Tertentu Dengan Thumbnail dibawah ini :

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/AVvXsEiL4C4SfFAGpSePaB1YKffQ3KSIQ01vw3ilSb34MYQ5f1Mgqeuv3fNK9yMZz8VwZqOvspkpl9OtJ3FYvXAWV_QsUwbroJSkRGUFezMHuO8p-cW8BXgmJPd9RWqjUcpHtmpibWirgx06dEGV/';}
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.

Semoga artikel diatas yaitu Cara Membuat Label Tertentu dengan Thumnail dapat bermanfaat bagi sobat blogger sekalian. Saya Blogger pemula, jadi jika ada salah kata atau cara cara yang sudah tidak bisa digunakan lagi mohon dimaafkan dan di beri petunjuk dan saran. Jika ada pertanyaan dan masukan, sobat bisa menannyakannya di kotak komentar dibawah ini.

Terimakasih,
Credit by Pemuda Bisnis