Kali ini saya akan memberikan satu
lagi tutorial blogger tentang membuat widget per label dengan hanya satu
thumbnail pada bagian paling atas dan di bawahnya menampilkan judul
saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah.
Biasanya widget ini banyak digunakan oleh blog konten berita, salah
satu fungsi widget ini untuk memudahkan para pembaca untuk
mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas
ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi
karena banyak yang tanya di kotak komentar maupun di email, tidak ada
salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per
label yang saya gunakan disini sebenarnya mudah dan hanya menggabungkan
antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.
Cara membuatnya adalah sebagai berikut :
- Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
- Setelah itu pilih blog yang ingin anda tambahkan widget ini.
- Masuk ke template >> Edit HTML, kemudian centang expand widget templates
- Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
- Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
- Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </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/AVvXsEirFF4dF9M3HUfmptq4074DAB_Mk39knAb0xX4ZKDycmNHwxgXDi8sAimUSSbRXrWz6mTesx-0WhtbprphfshVhzCul2y-Y1UA5ZG13LNjf-ajpwziM1hcs5cZc_cLu5G3uM2k4Z_EaFynt/';}
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>
Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan
Google Code Anda sendiri atau gunakan kode script di bawah ini yang sudah saya ringkas di
Google Code.
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
<script
type='text/javascript'>var numposts = 1;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/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></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://surga-blog7.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://surga-blog7.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.
Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini
mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada
template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget
ini hanya digunakan untuk mengatur tampilan thumbnail.
Demikian tadi tutorial jadul mengenai
membuat widget per label kali ini, jika masih ada yang kurang jelas
silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga
bermanfaat.