Cara Mudah Memasang Widget Perlabel Berdasarkan Kategori di Blog v2

Cara Mudah Memasang Widget Perlabel Berdasarkan Kategori di Blog v2

Baca Juga

Kali ini Bang dimar mau nulis lagi Cara Mudah Memasang Widget Perlabel Berdasarkan Kategori di Blog v2 yang setelah kemarin nulis yang v1 caranya sama bedanya hanya.
Hasilnya kalo kemarin v1 hanya ada satu gambar yang sekarang semua menggunakan gambar seperti contoh ini

Widget perlabel v1

Widget perlabel v2

Langsung saja begini langkah pembuatanya

1. Silahkan masuk dasbor klik templet=>edit HTML
2. Silahkan anda cari kode ]]></b:skin> dan letakkan script dibawah ini diatas kode yang dicari tadi

/*** 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. Selanjutnya cari kode </head> letakkan juga script dibawah ini sebelum 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/AVvXsEgtRy1D_Fsm4wwoDCcJwOWW05gfeULl8y8RQSnYfqgZTZi-iXQ1uZoasozP7_7vmvJZhfhicoEqHuCUk_aYG_hMCgQxyz1bcf-QaftWrgzwZDO8EYRTbb0M_Giv_d2MKRuyr5D3QgIc3mVH//';}
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('<strotng><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>

Setelah anda masukkan script klik save

4. Kemudian masuk ke tata letak =>klik addWidget=>javascript dan pastakan kode dibawah ini kedalamnya

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

Keterangan angka 6 adalah jumlah tampilan di widget bisa anda rubah angkanya dan Label anda ganti dengan nama label sesuai label yang anda miliki tulisan besar kecilnya harus sama dengan yang di label dan bila label anda ada sepasi penulisanya anda ganti dengan %20

Penting!! Sebelum anda edit HTML anda backup dulu templetnya bila ada error mudah untuk mengembalikannya dan pada saat pasang javascrip di widget ada error coba pindah di posisi widget yang lain misal disebelah atas atau bawah kiri atau kanan

Demikian Cara Mudah Memasang Widget Perlabel Berdasarkan Kategori di Blog v2 semoga bermanfaat

Baca juga:
Cara Mudah Memasang Tombol Back To Top