Membuat Label Thumbnails pada Blog adalah hal yang Sistem Komputer paparkan saat ini karena sangat menarik. Banyak hal yang mungkin bisa didapatkan dari tulisan tentang Membuat Label Thumbnails pada Blog ini.
Sebelumnya ada yang tanya tentang cara membuat label blog yang disertai thumbnails (gambar) pada obrolannya Kang Rohman tapi lupa siapa yang nanyain itu. Lah, untuk menjawab itu semua Kang Fathur Membagikan cara tersebut akan tetapi ini lebih bervariatif yakni disertai pula dengan Jumlah Komentar, Tanggal Postingan.
Untuk lebih memastikan anda bisa berkunjung ke blog yang paling ngetren saat ini, KR Tutor Plus nama blognya. Dan jika anda kurang yakin apa tutorial ini berhasil atau tidak, silakan lihat pada link demo yang Kang Fathur Sediakan.
Langkah Pertama
- Login Blogger anda;
- Pilih Rancangan (Design);
- Klik tab Edit HTML;
- Cari kode ]]></b:skin>
- Copy paste kode CSS berikut sebelum ]]></b:skin>
/* Label Thumbnails by PIO */
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}
- Kemudian cari kode </head>
- Copy paste JavaScript dibawah ini sebelum </head>
<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/AVvXsEjQ56sS8Q8EL-V-RR8sFPvC1fahop01IwwrcvcxtUhbqSKUibar7ZUSHHBGH3_pDdCF_DQwzUsSzIwcyhg9C5jOK2vN58XHf2cE99Gm-evKmHBI0totTc5qqtV7EOeUED-QLjj0sg5veF8_/';}
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>
- Simpan Template.
Langkah Kedua
- Pilih tab Elemen Laman;
- Tambah Gadget anda dan pilih JavaScript/HTML;
- Copy paste kode berikut pada Gadget HTML yag telah dipilih;
<script type='text/javascript'>var numposts = 6;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/-/Blogger?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Catatan :
- Angka 5 yang ada pada kode diatas adalah jumlah postingan yang akan ditampilkan pada gadgt yang baru dipilih.
- Tulisan Blogger Sebuah label yang akan dipasangkan pada gadget yang baru dibuat.
Semoga berhasil dan ermanfaat bagi anda semua. Selamat berkreasi. SELENGKAPNYA atau SEPENUHNYA Sistem Komputer Sitemap 1 2 3 4 5
