Membuat Label Dengan 1 Gambar

Membuat Label Dengan 1 Gambar

Diartikel sebelumnya saya telah membuat torotorial membuat label dengan gambar, untuk sekarang saya akan membuat label dengan menggunakan 1 gambar dengan link dibawahnya. kalian bisa menggunakan cara ini untuk lebih membuat tampilan blog kalian terlihat lebih menarik.

Jika kalian tertarik, kalian bisa mengikuti langkah-langkah dibawah ini, caranya pun cukup mudah, kalian tinggal meletakkan code javascriptnya di tempat yang telah ditentukan.
Hal pertama yang harus kalian lakukan adalah :

1. Masuk ke pengaturan, kemudian klik templete, edit html, centang expand widget, kemudian copy pastekan code yang telah saya sediakan di atas code </head>., setelah selesai simpan templete kalian.
Contoh codenya :

<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/AVvXsEjvc4KJw9o_bnzzlzJikd87yVJ2o5AhqVBogLtJgpkJK06AKNCk91UymZ_LgiyiQLBKtjaEE5tXc5iZVaftSln7Qs7aKb67DvoQO3d_1Oi_R6F0KABAV8_ULEFF49SW-vBGMaq4vFtB7ch2/';}
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('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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>

2. Setelah proses diatas selesai, letakkan code dibawah ini di menu tata letak pengaturan kalian, ganti tulisan yang berwarna merah dengan nama label kalian, kemudian ganti tulisan yang berwarna hitam dengan url blog kalian.
Contoh Codenya :

<script src="/feeds/posts/default/-/Blog?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript"></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://ceritaakehidupan.blogspot.com/feeds/posts/summary/-/Blog?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://ceritaakehidupan.blogspot.com/search/label/Blog" style="float: right; font: normal 11px Arial; padding: 5px 0;">Telusuri Lagi »</a>

Untuk copy paste codenya silahkan ambil disini, gunakan Ctrl c untuk copy codenya.
Untuk Contoh Hasilnya Lihat Dibawah ini :

Telusuri Lagi »

Comments