Cara Memasang Kategori tententu dengan Thumbnail di Website atau Blog

Selamat malam temen-temen Blog Manado, tidak terasa postingan saya kali ini adalah postingan Blog Manado yang ke-300 untuk kategori Tutorial Blog. Ngomong-ngomong tentang kategori, artikel kali ini berhubungan dengan kategori, yaitu cara memasang kategori tertentu dengan thumbnail atau gambar. 

Tips memasang kategori tertentu plus thumbnail ini baru saja Blog Manado dapat dari blognya Web Design dan sudah Blog Manado praktekkan di blog saya yang lain dan berhasil. Web Design memang hebat ya, bisa nulis artikel sebanyak itu, bisa bikin template lagi. 

Untuk demonya lihat disini kategori paling bawa.

Biasanya fitur yang muncul disertai thumbnail adalah related post atau recent post dan itu tutorialnya sudah banyak banget beredar di kalangan blogger, tapi kali ini adalah fitur kategori tertentu, misalnya kalau di blog ini kategori tutorial blog, wordpress, joomla, dan lain-lain. Jika temen-temen penasaran, bisa dilihat disini. Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik tab Edit HTML. 
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Carilah kode ]]></b:skin>, copy kode dibawa ini, lalu paste kode dibawa persis 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 {}

6. Carilah kode </head>, copy lalu paste kode berikut persis 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/AVvXsEhCtJrWzuOXUhbrNxVudddI3DNUdWmXOKw7GlJj5LdP8uvvPVLL0a_BLuwqnzehNswurzqY2IneNyuP5mkhcEEOGmQ1StwQb65H1_UVdsrRNY4smvkglSzwMw2vJXHSNnaOtxYnkw5dydFK/';}

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>

7. Klik tombol SIMPAN TEMPLATE.

8. Langkah pertama selesai.

1. Klik tab Rancangan/Design. 
2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman. 
3. Klik Tambah Gadget untuk menambahkan gadget baru. 
4. Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript  
5. Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna biru dengan nama kategori yang di inginkan. 

<script type='text/javascript'>var numposts = 6;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/-/Top Lyrics?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

1. Klik tombol SIMPAN
2. Langkah kedua Selesai.

Keterangan :

• var numposts = 6;
• var showpostthumbnails = true;
• var displaymore = false;
• var showcommentnum = false;
• var showcommentnum = false;
• var showpostdate = false;
• var showpostsummary = true;
• var numchars = 60;

Kode berwarna merah adalah kode yang bisa temen-temen edit, true berarti tampilkan, false berarti jangan di tampilkan, 60 adalah jumlah karakter, dan 6 adalah jumlah thumbnail yang ditampilkan Anda bisa ganti sesuai keinginan.

Terima kasih kepada Web Design yang telah memberikan tutorial gratisnya, semoga Web Design tambah laris manis dan terus menulis untuk blogger pemula seperti saya ini, ya Web Design?...

Selamat mencoba dan semoga bermanfaat untuk Teman - teman Blog Manado..........