Membuat Widget Label Tertentu dengan Satu Thumbnail

Posted by Andi Aryatno Sunday, January 20, 2013

Ini sebenarnya adalah penggabungan dari membuat widget label tertentu dengan thumnbail dan membuat widget hanya tampil judulnya. Yah, walhasil jadinya thumbnail hanya tampil satu di artikel paling baru saja. Widget ini sangat keren dan menarik, kalau tidak percaya lihat saja di beranda blog ini. Saya juga menggunakan widget ini untuk blog saya. Keren nggak Sob tampilannya? Keren kan... Kalau keren silakan serap di blog kamu.

Jika Anda lihat pada template Mas Kentir, di bagian tertentu pada template itu terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja. Cara membuatnya adalah sebagai berikut :

1. Login dulu ke akun blogger kamu
2.  Masuk ke dasbor dan pilih menu "Template"
3. Klik "Edit HTML" lalu pilih "Lanjutkan"
4. Jangan lupa ceklist kotak kecil yang disampingnya ada tulisannya "Expand Widget Template"
5. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk melakukan pencarian cepat), lalu letakkan kode berikut 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 merah diatas, itu adalah lebar dan tinggi gambar thumbnail

6. Selanjutnya masih di edit html, cari kode </head>, masukkan kode berikut 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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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>

7. Setelah itu klik "Pratinjau", jika tidak ada pemberitahuan ada kesalahan dalam memasukkan kode berati template siap dipakai. Klik "Simpan Template"
8. Kemudian menuju ke Tata Letak add gadget >> HTML/JavaScript, masukkan kode berikut 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/-/widget?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://maskentir.blogspot.com/feeds/posts/summary/-/widget?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://maskentir.blogspot.com/search/label/widget" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

- Tulisan warna biru adalah label blog, ganti dengan label blog yang ingin dipasang. Jika label terdiri lebih dari dua kata, maka gunakan "%20" untuk menggabungkannya. Contoh untuk menuliskan label Tutorial Blog, maka penulisannya Tutorial%20Blog, perhatikan juga besar kecilnya huruf
- Untuk tulisan warna merah, ganti dengan url blog kamu.

Simpan 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.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.

Share on :


Artikel Terkait:

4 comments

  1. adi zeverpen Says:
  2. mas saya uda nerapin n uda muncul labelnya, tapi ga sampe beberapa detik template saya jadi blank alias blog saya jadi putih smua yg tampil cuman label yg di buat tadi. tapi kalau widget yg lain aman2 aja mas, cuman pas pasang script yg mas terapin di atas blog saya langsung blank. bukan cuman sekali smua yg berhubungan dgn label yg saya pasang di sedibar blog saya malah langsung blank. tolong solusianya mas. apa mungkin template saya yg ga support?
    soalnya saya pake template dari artisteer software pembuat template.
    tapi pas saya coba pake template yg lain malah aman2 aja ga terjadi blank.

     
  3. Ini scriptnya sudah saya terapkan di blog Mas Kentir. Coba lihat di beranda blog ini. kalau boleh tau blog Anda alamat apa?
    Pada point 7 sebelum disimpan scriptnya kan harus di Pratinjau dulu agar tau kalau-kalau terjadi kesalahan dalam memasukkan script. Kalau dipratinjau sudah oke, harusnya saat disimpan kemudian dibuka blognya juga harusnya oke Sob.

     
  4. rifkahZ Says:
  5. ijin terapkan pada navbar blog sob..

     
  6. Makasih gan infonya sangat membantu saya dalam menyelesaikan sebuah blog.

     

Post a Comment

Powered by Blogger.

Followers