Category / Label with Thumbnail or Headlines Post

Membuat label dengan thumbnail hover, kategori diambil imagenya guna ditampilkan agar terlihat lebih cuamik. Master Dody Farial sudah megupas tuntas dengan artikelnya miscah.blogspot.com. Ikuti langkah-langkah pembuatannya disana, nah jika sobat ingin menambahkan lagi label untuk dipanggil perhatikan langkah pada point ke-6.
Sobat hanya perlu menuliskan kembali script bagian bawahnya saja This is script!

<script type="text/javascript" src="/feeds/posts/default/-/YOUR-LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Kali ini seperti biasa Beben Koben si bloglang anu ganteng kalem tea akan berbagi yang sedikit lebih dahsyat mengenai category with thumbnail and headlines posted :-" Mirip dengan trik diatas karya master Dody, tapi disini ada cuplikan isi postingannya. Trick diambil dari sobat blogger pemilik My Fundoo Blog.

Masuk dan tengok pada bagian bawah blog tersebut, disana ada kategori Widget, Blogger Templates, Blogging Tricks dan SEO.

Seperti itu yang akan Koben share buat para pelancong setia blog aneh ini ;)) :"> Don't forget to Download Full Your Template!!!

Kode CSS

.catLabel {
float: left;
width: 290px;
height: 410px;
margin: 0px 5px 4px 0px;
padding: 8px 8px;
overflow: hidden;
font-family:"Times New Roman",Georgia,Serif;
border-left: 2px solid #999;
border-right: 2px solid #999;
border-top: 3px solid #003366;
border-bottom: 2px solid #999;
}
.catLabel img {
background: #F8F8F8;
border: 1px solid #555;
padding: 3px;
margin: 5px 10px 0px 0px;
float: left;
width: 75px;
height: 75px;
}
.catLabel h2 {
color: #AA0000;
font-size: 18px;
font-family: 'Georgia', Arial, sans-serif;
text-align: left;
margin: 0px 0px 5px 0px;
padding: 0px 0px 5px 0px;
border-bottom: 2px solid #999;
}

Letakin diatas kode ]]></b:skin> Lebar dan tinggi harap diperhatikan, karena berpengaruh pada jumlah kategori yg nanti ditampilkan!

JavaScript

<script language='JavaScript'>
//<![CDATA[

imgr = new Array();
imgr[0] = "http://www.clubwebsite.co.uk/img/misc/noImageAvailable.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 115; // number character showed in blog post
summaryTitle = 100; // number of character showed in post title
numposts = 3; // number of post showed in each category

var contarlabels = 0;

labelname = new Array("YOUR-LABEL1","YOUR-LABEL2","YOUR-LABEL3","YOUR-LABEL4","YOUR-LABEL5");
labeltitle = new Array("TITLE-LABEL1","TITLE-LABEL2","TITLE-LABEL3","TITLE-LABEL4","TITLE-LABEL5");

// DO NOT CHANGE SIDE IT

function removeHtmlTag(strx,chop){
 var s = strx.split("<");
 for(var i=0;i<s.length;i++){
  if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  }
 }
 s =  s.join("");
 s = s.substring(0,chop-1);
 return s;
}

function showrecentposts(json) {

var salida = "";
var salidainner= "";

 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
  var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'alternate') {
         posturl = entry.link[k].href;
         break;
       }
    }
  
  for (var k = 0; k < entry.link.length; k++) {
       if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
         pcm = entry.link[k].title.split(" ")[0];
         break;
       }
    }
  
    if ("content" in entry) {
       var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
       var postcontent = entry.summary.$t;}
    else var postcontent = "";
    
    postdate = entry.published.$t;
 
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 
 s = postcontent ; 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!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;

 var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"></a><a href="'+posturl+'"><b>'+removeHtmlTag(posttitle,summaryTitle)+'</b></a><br/>'+removeHtmlTag(postcontent,summaryPost)+'...<div class="botline"></div>';

 //document.write(trtd);
       salidainner += trtd;

 j++;
}

salida += '<div class="catLabel">';
salida += '<h2>' + labeltitle[contarlabels] + '</h2>';
salida += salidainner;
salida += '<b><a href="http://YOUR-BLOG.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">See All '+ labelname[contarlabels] +'</a></b>';
salida += '</div>';
document.write(salida);
contarlabels ++;
}

//]]>
</script>

<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL1?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>

<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL2?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>

<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL3?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>

<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL4?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>

<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL5?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>

Masukin saja via Add a Gadget ► HTML/JavaScript.Keterangan:

• summaryPost = 115
Panjang kalimat postingan yang mau ditampilkan.
• summaryTitle = 100
Panjang karakter judul postingan.
• numposts = 3
Jumlah postingan yang tampil, harus sesuai dengan
<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL4?max-results=3
• labelname = new Array("YOUR-LABEL1","...
Kategori yang akan dipanggil. Harus teliti, beda kapital, lambang, atau karakter lainnya maka tidak akan berjalan!
• labeltitle = new Array("TITLE-LABEL1","...
Judul kategori, bebas mau dikasih apaan judulnya mah :D
• Perhatikan
<script src='http://YOUR-BLOG.blogspot.com/feeds/posts/default/-/YOUR-LABEL1?max-results=3&orderby=published&alt=json-in-script&callback=showrecentposts'></script>
harus sama dengan langkah ke-4
labelname = new Array("YOUR-LABEL1","...
• Good Luck

Happy label & category with thumbnail \m/