Satu Gambar Dengan Label di Bagian Sidebar

Saya lebih memilih menggunakan satu gambar perlabel dalam desain template di bagian sidebar. Mengapa? karena menurut pandangan saya lebih dinamis dibanding berupa tulisan, dan tutorial ini saya publis karena ada beberapa sahabat mempertanyakan bagaimana cara membuatnya.

Sebenarnya js ini saya ambil dari tutorial maskolis, dan jelas js tersebut sudah saya rubah agar bisa menyesuaikan tampilannya. Suka dengan tutorial ini? ikuti saja tutorial sederhana berikut ini.

01. Silahkan Simpan CSS bawah ini tepat diatas ]]></b:skin> atau </style>

/* -- GAMBAR LABELS -- */
#LEO-label {
   text-align:left;
   line-height:normal;
}
#LEO-label ul li {
   line-height:normal;
}
#LEO-label a {
   font:17px Arial;
   color:#111;
   text-decoration:none;
   margin-bottom:5px;
}
#LEO-label a:hover {
   color:#5E577F;
   text-decoration:underline;
}
.LEO-text {
   font:13px Arial;
   color:#777;
   padding:5px 0 0 5px;
}
img.LEO-thumb {
   background:none;
   margin-bottom:5px;
   margin-left:-5px;
   height:170px;
   width:300px;
}
#LEO-more {
   background:#8F0F0F;
   text-decoration:none;
   padding:3px 8px;
   border-bottom:4px solid #9D5973;
   margin-bottom:-5px;
}
#LEO-more:hover {
   background:#8F0F0F;
}
#LEO-more a {
   background:#AE5BCE;
   display:inline-block;
   font:14px Oswald;
   padding:4px 12px;
   border-radius:100px;
   text-transform:uppercase;
   color:#fff;
   margin:3px;
   text-shadow:1px 0 0 #000;
}
#LEO-more a:hover {
   background:#BF70DE;
   color:#fff;
   text-decoration:none;
}

02. Simpan JS bawah ini tepat diatas </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="LEO-thumb">');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='';}
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('<div class="LEO-text">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img alt="'+posttitle+ '" class="LEO-thumb" src="'+thumburl.replace("/s72-c/","/s330/")+'" title="'+posttitle+ '" /></a>');document.write('<a href="'+posturl+'" target ="_top" title="'+posttitle+'">'+posttitle+'</a><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>');}
   var numposts = 1;
   var showpostthumbnails = true;
   var displaymore = false;
   var displayseparator = false;
   var showcommentnum = false;
   var showpostdate = false;
   var showpostsummary = true;
   var numchars = 100;
   function recentpostslist(json) {
   document.write('');
   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" title="' + entryTitle +'">' + entryTitle + "</a> </li>";
   document.write(item);
}
   document.write('</ul>');
}
//]]>
</script>

03. Gunakan HTML bawah ini dan letakan di bagian Tata Letak/ADD Gadget.

<div id="LEO-more"><a href="http://URL-BLOG ANDA.com/label/NAMA LABEL ANDA?&amp;max-results=10" title="NAMA LABEL ANDA" >NAMA LABEL ANDA</a></div>
<div id="LEO-label">
<script type="text/javascript" src="http://URL-BLOG ANDA.com/feeds/posts/default/-/NAMA LABEL ANDA?&amp;orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
</div>

Masukan url blog Anda dan label Anda.

Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini

Share thisPlus this