Cara Mudah Memasang Widget Perlabel di Blog

By Unknown

Caraneweb kali ini akan membagikan artikel tentang Cara Mudah Memasang Widget Perlabel di Blog biasanya widget ini digunakan di blog yang berisi tentang blog berita karena fungsinya ya adalah untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan juga bisa untuk meringkas ruang pada sebuah template. saya juga menggunakan widget ini karena mudah untuk pembaca agar bisa memilih postingan yang lainya. nah kebetulan saya akan membagikan tutorialnya cara memasang widget perlabel simak beberapa langkah berikut ini ya.

Cara Memasang Widget Perlabel

1. Yang peratama anda login blog dulu

2. Masuk ke dasbor pilih Template

3. Kemudian pilihlan EDIT HTML Template

4. lalu carilah kode ]]></b:skin> untuk memudahkan pencarian kode, tekan ctrl +f

5. Salinlah kode dibawah ini letakan tepat diatas kode ]]></b:skin>

 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. Kemudian cari kode </head> kemudian letakan kode dibawah ini tepat 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/AVvXsEhW2XkM2jZvEb9T3-G0lbxGsuAmegW8_eJJO6i_whEUzKJoAVf6IhzMi-okzuV6CSGPBEhPAzP7F-QrsobWE6RR1sHGereNo1gRGn0IezICG_2TLN4hDyTcb68tNqqp8lTK2Fu9Zppbd-C_/';}
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. Dan selanjutnya klik simpan template
8. Selanjutnya masuk ke dasbor dan pilih tata letak tambah gadget lalu klik javascript/html masukan kode dibawah ini

 <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>

Nah itulah cara memasang widget perlabel diblog semoga bisa bermanfaat untuk kalian semua.

Share :