Membuat Widget Label Tertentu dengan Thumbnail di Bawah Postingan

Tutorial kali ini tentang cara membuat widget label atau kategori tertentu dengan thumbnail yang akan diletakkan di bagian bawah postingan. Unsur script untuk pembuatan widget ini sudah valid HTML5, sehinggal anda tidak perlu khawatir akan error script yang bakal terjadi saat memasangnya.

Widget ini akan menampilkan artikel terbaru dari masing-masing label yang dipilihkan. Cocok digunakan pada blog magazine dan blog personal.

Sebetulnya script widget ini sama persis dengan Cara Membuat Widget Recent Post Thumbnail + Tanggal Postingannya yang sudah saya ulas pada tutorial blogger sebelumnya. Hanya saja sedikit bebeda pada CSSnya dan sedikit tambahan pada JavaScriptnya.

Jika tertarik memasang widget ini, silahkan ikuti tutorialnya berikut.

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blog

1. Login ke blogger, masuk ke dashboard blog anda, lalu klik pada menu Template > Edit Template.

2. Cari kode </style> atau </b:skin> lalu letakkan kode CSS berikut ini tepat di atasnya.

/* Recent By Label */
#tag1, #tag2{margin:0;padding:0 0 30px;width:100%}
#tag1-wrapper h2,#tag2-wrapper h2,#tag1-wrapper h3,#tag2-wrapper h3 {color:#333;text-transform:capitalize;font-size:140%;font-weight:400;padding:15px 0;margin:0 0 15px;border-bottom:1px solid #eee}
#tag1-wrapper .recent-by-tag li,#tag2-wrapper .recent-by-tag li{width:30%;margin-right:5%;margin-bottom:30px;display:block;float:left}
#tag1-wrapper .recent-by-tag li:last-child,#tag2-wrapper .recent-by-tag li:last-child{margin-right:0}
#tag1-wrapper .recent-by-tag img,#tag2-wrapper .recent-by-tag img{width:100%;height:130px}
#tag1-wrapper .recent-by-tag li a,#tag2-wrapper .recent-by-tag li a{color:#454545}
#tag1-wrapper .recent-by-tag li a:hover,#tag2-wrapper .recent-by-tag li a:hover{color:#349acb}
#tag1-wrapper .recent-by-tag li .showdates,#tag2-wrapper .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:bold;color:#a7b0b7}

3. Karena widget ini akan diletakkan dibagian bawah postingan, maka anda perlu menambahkan kerangka baru, dengan cara; temukan kode berikut

<b:section class='main' id='main' showaddelement='no'>

Lalu susutkan dengan mengklik bidang (segitiga) tepat sejajar disisi kirinya, sehingga menjadi seperti ini

<b:section class='main' id='main' showaddelement='no'>...</b:section>

4. Kopi kode berikut ini dan letakkan di bagian bawah kode yang disusutkan tadi.

<div id='tag1-wrapper'>
  <b:section class='tags1' id='tags1' showaddelement='yes'>
<div class='clear'/>
  </div>
<div id='tag2-wrapper'>
  <b:section class='tags2' id='tags2' showaddelement='yes'>
<div class='clear'/>
  </div>

6. Cari kode </head> lalu letakkan kode di bawah ini tepat di atasnya.

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var showpostdate = true;
//<![CDATA[
var _0xecb6=["\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x65\x63\x65\x6E\x74\x2D\x62\x79\x2D\x74\x61\x67\x22\x3E","\x77\x72\x69\x74\x65","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x24\x74","\x74\x69\x74\x6C\x65","\x6C\x65\x6E\x67\x74\x68","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x72\x65\x70\x6C\x69\x65\x73","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x68\x72\x65\x66","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x75\x72\x6C","\x6D\x65\x64\x69\x61\x24\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C","\x63\x6F\x6E\x74\x65\x6E\x74","\x3C\x69\x6D\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","","\x68\x74\x74\x70\x3A\x2F\x2F\x32\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x67\x69\x6F\x76\x61\x31\x5A\x43\x68\x2D\x41\x2F\x55\x7A\x71\x36\x4C\x38\x51\x54\x4A\x4E\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x41\x4A\x63\x2F\x55\x53\x58\x69\x63\x74\x54\x71\x5F\x78\x73\x2F\x73\x37\x30\x2D\x63\x2F\x4B\x4D\x2B\x49\x63\x6F\x6E\x2E\x70\x6E\x67","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x4A\x61\x6E\x75\x61\x72\x69","\x46\x65\x62\x72\x75\x61\x72\x69","\x4D\x61\x72\x65\x74","\x41\x70\x72\x69\x6C","\x4D\x65\x69","\x4A\x75\x6E\x69","\x4A\x75\x6C\x69","\x41\x67\x75\x73\x74\x75\x73","\x53\x65\x70\x74\x65\x6D\x62\x65\x72","\x4F\x6B\x74\x6F\x62\x65\x72","\x4E\x6F\x76\x65\x6D\x62\x65\x72","\x44\x65\x73\x65\x6D\x62\x65\x72","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6C\x65\x61\x72\x22\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x61\x72\x67\x65\x74\x20\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x63\x74\x2D\x74\x68\x75\x6D\x62\x22\x20\x61\x6C\x74\x3D\x22","\x22\x20\x73\x72\x63\x3D\x22","\x22\x2F\x3E\x3C\x2F\x61\x3E","\x3C\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x72\x65\x6C\x3D\x22\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x74\x72\x6F\x6E\x67\x3E","\x3C\x62\x72\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x64\x61\x74\x65\x73\x22\x3E","\x20","\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E"];function rcentbytag(_0xb075x2){document[_0xecb6[1]](_0xecb6[0]);for(var _0xb075x3=0;_0xb075x3<numposts;_0xb075x3++){var _0xb075x4=_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xb075x3];var _0xb075x5=_0xb075x4[_0xecb6[5]][_0xecb6[4]];var _0xb075x6;if(_0xb075x3==_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xecb6[6]]){break };for(var _0xb075x7=0;_0xb075x7<_0xb075x4[_0xecb6[7]][_0xecb6[6]];_0xb075x7++){if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[9]&&_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[10]]==_0xecb6[11]){var _0xb075x8=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[5]];var _0xb075x9=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];};if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[13]){_0xb075x6=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];break ;};};var _0xb075xa;try{_0xb075xa=_0xb075x4[_0xecb6[15]][_0xecb6[14]]}catch(h){s=_0xb075x4[_0xecb6[16]][_0xecb6[4]];a=s[_0xecb6[18]](_0xecb6[17]);b=s[_0xecb6[18]](_0xecb6[19],a);c=s[_0xecb6[18]](_0xecb6[20],b+5);d=s[_0xecb6[21]](b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=_0xecb6[22]){_0xb075xa=d}else {_0xb075xa=_0xecb6[23]};};var _0xb075xb=_0xb075x4[_0xecb6[24]][_0xecb6[4]];var _0xb075xc=_0xb075xb[_0xecb6[25]](0,4);var _0xb075xd=_0xb075xb[_0xecb6[25]](5,7);var _0xb075xe=_0xb075xb[_0xecb6[25]](8,10);var _0xb075xf= new Array;_0xb075xf[1]=_0xecb6[26];_0xb075xf[2]=_0xecb6[27];_0xb075xf[3]=_0xecb6[28];_0xb075xf[4]=_0xecb6[29];_0xb075xf[5]=_0xecb6[30];_0xb075xf[6]=_0xecb6[31];_0xb075xf[7]=_0xecb6[32];_0xb075xf[8]=_0xecb6[33];_0xb075xf[9]=_0xecb6[34];_0xb075xf[10]=_0xecb6[35];_0xb075xf[11]=_0xecb6[36];_0xb075xf[12]=_0xecb6[37];document[_0xecb6[1]](_0xecb6[38]);if(showpostthumbnails==true){document[_0xecb6[1]](_0xecb6[39]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[41]+_0xb075x5+_0xecb6[42]+_0xb075xa+_0xecb6[43])};document[_0xecb6[1]](_0xecb6[44]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[45]+_0xb075x5+_0xecb6[46]);document[_0xecb6[1]](_0xecb6[47]);var _0xb075x10=_0xecb6[22];var _0xb075x11=0;if(showpostdate==true){_0xb075x10=_0xecb6[48]+_0xb075x10+_0xb075xe+_0xecb6[49]+_0xb075xf[parseInt(_0xb075xd,10)]+_0xecb6[49]+_0xb075xc+_0xecb6[50];_0xb075x11=1;};document[_0xecb6[1]](_0xb075x10);document[_0xecb6[1]](_0xecb6[51]);if(_0xb075x3!=numposts-1){document[_0xecb6[1]](_0xecb6[22])};};document[_0xecb6[1]](_0xecb6[52]);}
//]]>
</script>

7. Cari lagi kode </body> lalu letakkan kode berikut ini tepat di atasnya.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('#tag1-wrapper img,#tag2-wrapper img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//]]>
</script>

8. Simpan template.

9. Masuk atau klik Tata Letak, akan tampak tambahan gadget seperti gambar berikut.

10. Untuk memasukkan script pemanggil widget label tertentu caranya ialah, klik Tambahkan Gadget > HTML/JavaScript, lalu letakkan kopi kode berikut ini dan paste ke kolom yang tersedia.

<script>
document.write("<script src=\"/feeds/posts/default/-/Black?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
</script>

Perhatikan:
Kata Black pada kode di atas adalah nama label, sesuaikan kata tersebut dengan label yang ingin ditampilkan.

10. Jangan lupa Simpan.

Ukuran thumbnail silahkan sesuaikan dengan lebar blog anda dengan mengedit CSS pada langkah 2. Demikian cara membuat Widget Label Tertentu dengan Thumbnail di Bawah Postingan. Sumber: Arlina Design.