Panduan Manual Membuat Fitur Automatic Featured Category Pada Blog

Panduan Manual kali ini adalah salah satu fitur yang sangat menarik dan berguna pada semua blog adalah Fitur Automatic Featured Category, dengan fitur ini anda dapat menampilkan kategori yang dianggap penting untuk di tampilkan dihalaman depan.

 Perlu diketahui, bahwa kategori yang di pasang akan tampil secara otomatis tanpa anda harus repot mengeditnya setiap saat, dan gambar thumbnail nya pun secara otomatis mendeteksi sesuai gambar yang ada pada posting tersebut.

Apa yang harus dipersiapkan? yang harus anda persiapkan hanyalah nama kategori serta alamat kategori yang ingin di tampilkan. Namun perlu diketahui bahwa nama label ini bersifat case-sensitive artinya nama yang di pasang hurufnya harus sama persis dengan label di blog anda, misal nama kategori Hardware berbeda dengan hardware oleh karenanya pastikan terlebih bahwa nama label sama persis hurufnya.

  
Cara yang mudah untuk mendapatkan alamat link kategori atau nama kategori adalah dengan klik kanan pada nama kategori yang di inginkan, lalu pilih Copy Link Location ( untuk browser Firefox), paste pada tex editor seperti notepad, wordpad atau sejenisnya.

 

Setelah itu pastekan di Notepad

Contoh alamat kategori :

http://dahrulsp.blogspot.com/search/label/Hardware

Contoh nama kategori yang diperlukan :

Hardware

Langkah – Langkahnya

• Login ke blogger dengan ID anda. 
• Klik Rancangan. 
• Klik tab Edit HTML. 
• Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

1. Carilah kode ]]></b:skin>, copy lalu paste kode berikut 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 {}

2. 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/AVvXsEh1hzPwc9nn4HpDAl6x7H-sZR0phUutgQOZcJe0WOw1ktFq8unHTAM6p1sIPqpf_zco1UysvQizb4tRwiV6X-cidWLQP5x0raJbJ2BCseaAVx_XTiAdphoqBosKQ5VUQEUhCfn193AZedd5/';}
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>

3. Setelah itu :

1. Klik Rancangan
2. Klik 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.

<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/-/Hardware?orderby=updated&
alt=json-in-script&callback=labelthumbs"></script>

<div class="more_topic"><a href="http://dahrulsp.blogspot.com/search/label/Hardware">More for this topic &raquo;</a></div>

• Gantilah kode yang berwarna merah dengan nama kategori, kode yang berwarna biru ganti dengan alamat link kategori. 
• Klik tombol SIMPAN
• Selesai.

Dalam kode diatas ada beberapa yang dapat anda atur misal jumlah karakter yang ingin di tampilkan, thumbnail, jumlah posting, tanggal posting, komentar, serta more link.

Dalam script tersebut ada tulisan seperti ini :

var numposts = 3;

var showpostthumbnails = true;

var displaymore = false;

var showcommentnum = false;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 80; 

Kode berwarna merah adalah kode yang bisa anda edit, true berarti tampilkan, false berarti jangan di tampilkan. Silahkan coba-coba ganti saja.