Cara Membuat Widget per Label dengan Gambar Admin : Unknown

Assalamu'alaikum,wr.wb

Sore sobat blogger,lama tak posting lagi,maaf lagi sibuk2nya ini,hew
Namun tak perlu kecewa karena saya pingin bagi-bagi tutorial lagi ( saya rasa juga tak mungkin kecewa karena sudah banyak sobat blogger yang lain share tutorial ini,haha). Baiklah kali ini saif pingin share mencoba buat tutorial blogger yang berikut ini mungkin sangat cocok buat blog-blog sobat semuanya. Kali ini saif pingin buat Cara Membuat atau Memasang Widget per Label dengan Thumnail Gambar,sebagai tambahannya saya kasih fungsi scroll biar nantinya bisa ditampilkan banyak dan tidak memakan tempat. Bagaimana tutorialnya,yuk kita lihat cara berikut ini ;

• Pertama seperti biasa Log in dulu ke blog sobat masing-masing
• Pilih Temlpate >> Edit HTML ( supaya tidak terjadi hal2 yg diinginkan sobat COPAS dulu template sobat ke Notepad atau cadangkan dulu )
• Kemudian cari kode  ]]></b:skin> atau */]]></b:skin> ( karena pasti ada yang berbeda )
• Lalu Copas Kode berikut dan letakkan diatasnya :

/*** 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 {} 

Catatan :

warna kuning adalah tebal ukuran garis tepi,warna dan background

warna hijau adalah ukuran gambar.

• Kemudian cari kode </head> dan letakkan kode berikut tepat diatasnya

<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/AVvXsEhimHGA10M6qv5fPR-RHLCs1Xqw73hoWGucaeXpKVl9DOU4hGGtu7L4xsT2pzEcVoyE8Xrw1W62dyQE8cAEGjpdosszf3KvuBDuN-gzkQ-0yEJykEriXYiKVhyKGIaB4M-8-VYanfbJgrAd/';}
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> 

• Kemudian simpan.

Langkah terakhir adalah meletakkan kode script per label kita di Tata Letak blog

• Pilih Rancangan >> Elemen Laman >> Tambah gadget >> HTML/JavaScript .
• Lalu copas kode dibawah ini di HTML/JavaScript.

<div style="overflow:auto; width:100%px; height:100px; padding:10px; border:1px solid #999999; background-color:#DDE1E3"><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 = 50;</script><script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div>

• Selesai dan simpan

catatan : 

warna hijau adalah fungsi scroll ( silahkan hapus jika tidak ingin memakai fungsi scroll, cukup pakai kode warna kuning )

warna kuning adalah kode per label
warna biru ganti dengan label sobat

warna merah adalah jumlah posting yang ingin dikeluarkan.

Mungkin cukup itu dulu yang dapat saya sampaikan mengenai Cara Membuat Wedget Per Label dengan Thumnail Gambar dan fungsi scrollnya,dilain kesempatan saif bakalan nyari cara tutorial yang lain lagi untuk blog kita, bila ada yang kurang jelas silahkan bertanya dikotak komentar,terima kasih semoga bermanfaat..