Cara Membuat Widget Post Berdasarkan Label

Kali ini saya akan memberikan tips yang sudah saya jalankan sendiri dan berhasil.

Widget ini berfungsi untuk menampilkan postingan singkat kita berdasarkan label contohnya bisa diliat dibagian bawah blog ini atau gambar dibwaha ini.

Ok langsung aja deh.

1.Login ke blogger anda terlebih dahulu >> Pilih tata letak atau rancangan >> Lalu pilih Edit HTML

2.Centang Kotak Expland Template Widget

3.lalu cari code ]]></b:skin> gunakan tombol F3 atau CTRL+F untuk mempercepat pencarian lalu copy kode berikut tepat diatasnya ]]></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 {} 

4. Sekarang copy kan code dibawah ini 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/AVvXsEg3hXbsw-c5K3zRJkB_puuYrYhCKJiCmokruk8Iq_HlGJGvitbVuFaecv8oRDyOstTYiM3dFn4laJFMk6D-aLboIQON_YLQXIBMbw0OLK6L9tzehZgeeizMcaMJexjFY7d24nmB_XFIJpna/';}

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> 

5.Jangan Lupa Pratinjau terlebih dahulu setelah selesai jika berhasil terakhir SAVE Template.

6.Eitz belum selesai kembali ke tata letak>> tambah gadget>> lalu pastekan code berikut ini

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




yang tulisan berwarna merah diatas kalian ganti dengan label yang ada di blog kalian yang akan ditampilkan. Lalu save dan lihat hasilnya.

• Tweet

Judul: Cara Membuat Widget Post Berdasarkan Label
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh Ciboy Levionsa 8:42 PM

Artikel Terkait Widget Blog :