Skip to main content

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&amp;alt=json-in-script&amp;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&amp;alt=json-in-script&amp;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

Popular posts from this blog

Event Organizer Contoh Struktur Organisasi

Event Organizer Contoh Struktur Organisasi , jika kita berbicara mengenai Event Organizer pastinya tidak terlepas dengan acara pertunjukan ataupun hiburan, Event Organizer atau EO sendiri memiliki tugas sebagai penyedia jasa ahli dalam bidang penyelenggara sebuah acara pertunjukan, entah itu sebuah event hiburan ataupun event pameran.

Pentingnya Penghijauan Buat Bumi Pertiwi

Dizaman yang modern ini kesadaran akan seorang insan untuk lebih bisa mengerti akan alam dan lingkungannya seakan sudah jauh berkurang dibandingkan orang yang peduli dan mengerti akan pentingnya penghijauan dan pelestarian lingkungan buat bumi pertiwi yang kita cintai ini. Penghijauan alam dan lingkungan sekitar sangatlah penting untuk kelangsungan hidup umat manusia yang tinggal di bumi ini, karena dengan adanya penghijauan bumi kita akan terhindar dari segala musibah dan hidup kita bisa lebih terjaga dan sehat, kenapa bisa begitu ? karena dengan adanya penghijaaun, bumi kita akan terlihat hijau dan sehat, dan apabila bumi kita sehat secara otomatis lingkungan di sekitar akan sehat juga, dan yang paling penting kemungkinan banjir ataupun tanah lonsor itu tidak akan pernah terjadi lagi, yang mana semua itu bisa ditanggulangi jikalau bumi kita peduli akan alam dan menjaga alam yang kita cintai ini dengan sepenuh hati. Alam yang sehat menandakan bahwa manusianya juga sehat, untuk ...