Membuat Widget yang Berisi Postingan Label Tertentu

Seperti pada postingan aslinya di http://www.maskolis.com saya juga kebingungan membuat judul dari tutorial blogger ini. Saya putuskan untuk mengambil judul Membuat Widget yang Berisi Postingan Label Tertentu. Biar ngerti ane tampilin screen shoot nya deh di blog saya satu http://blackberry-custom.blogspot.com :

Nah sudah jelas kan maksud nya membuat widget dengan postingan berdasarkan label, sekarang kita bahas cara pembuatanya (kayak bikin kue yah hehe)

• Login ke blogger terus masuk ke menu Template, biasakan sebelum otak-atik template agan backup dulu ya. Kemudian masuk ke menu Edit HTML dan masukan kode berikut diatas kode ]]></b:skin>

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px} img.label_thumb:hover{background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0} ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Perhatikan yang saya warnain merah, itu adalah lebar thumbnail/besar gambar yang akan muncul, silahkan ubah sesuai selera.

• Selanjutnya masukan kode di bawah ini di atas kode </head>

Copy kode berikut :

<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/AVvXsEjRx-IHgppws11pPh9xojovAwYa7e8iPN5WOhJup9yKM2XBxnS0q-CJ1xIK_H_k1NmGu3PUdSmBZDRUlxrWPtQl022xb096UMFXEksCB8exborx3GAg0sV44yoz7ujE9A33UR5PSObH6Gbg/';} 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>

Jika kode di atas kepanjangan silahkan kode script berikut sebagai pengganti kode diatas:

<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>

• Kemudian Save Template
• Selanjutnya kita membuat widget, masuk ke menu Layout pilih Add Gadget pilih HTML Java Script. Masukan kode berikut di dalamnya:

Copy kode berikut :

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

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://anto-trd.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://anto-trd.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

Keterangan :

• Warna biru : adalah label atau kategori/label yang ditampikan, agan bisa menggantinya sesuai dengan label agan. Yang perlu diperhatikan, tulisan label diatas harus sama persis dengan label yang ada di blog agan
• Warna merah : Ganti URL dengan URL blog anda.

Berbagi :