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

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


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=[“x3Cx75x6Cx20x63x6Cx61x73x73x3Dx22x72x65x63x65x6Ex74x2Dx62x79x2Dx74x61x67x22x3E”,”x77x72x69x74x65″,”x65x6Ex74x72x79″,”x66x65x65x64″,”x24x74″,”x74x69x74x6Cx65″,”x6Cx65x6Ex67x74x68″,”x6Cx69x6Ex6B”,”x72x65x6C”,”x72x65x70x6Cx69x65x73″,”x74x79x70x65″,”x74x65x78x74x2Fx68x74x6Dx6C”,”x68x72x65x66″,”x61x6Cx74x65x72x6Ex61x74x65″,”x75x72x6C”,”x6Dx65x64x69x61x24x74x68x75x6Dx62x6Ex61x69x6C”,”x63x6Fx6Ex74x65x6Ex74″,”x3Cx69x6Dx67″,”x69x6Ex64x65x78x4Fx66″,”x73x72x63x3Dx22″,”x22″,”x73x75x62x73x74x72″,””,”x68x74x74x70x3Ax2Fx2Fx32x2Ex62x70x2Ex62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx2Fx2Dx67x69x6Fx76x61x31x5Ax43x68x2Dx41x2Fx55x7Ax71x36x4Cx38x51x54x4Ax4Ex49x2Fx41x41x41x41x41x41x41x41x41x4Ax63x2Fx55x53x58x69x63x74x54x71x5Fx78x73x2Fx73x37x30x2Dx63x2Fx4Bx4Dx2Bx49x63x6Fx6Ex2Ex70x6Ex67″,”x70x75x62x6Cx69x73x68x65x64″,”x73x75x62x73x74x72x69x6Ex67″,”x4Ax61x6Ex75x61x72x69″,”x46x65x62x72x75x61x72x69″,”x4Dx61x72x65x74″,”x41x70x72x69x6C”,”x4Dx65x69″,”x4Ax75x6Ex69″,”x4Ax75x6Cx69″,”x41x67x75x73x74x75x73″,”x53x65x70x74x65x6Dx62x65x72″,”x4Fx6Bx74x6Fx62x65x72″,”x4Ex6Fx76x65x6Dx62x65x72″,”x44x65x73x65x6Dx62x65x72″,”x3Cx6Cx69x20x63x6Cx61x73x73x3Dx22x63x6Cx65x61x72x22x3E”,”x3Cx61x20x68x72x65x66x3Dx22″,”x22x20x74x61x72x67x65x74x20x3Dx22x5Fx62x6Cx61x6Ex6Bx22x20x74x69x74x6Cx65x3Dx22″,”x22x3Ex3Cx69x6Dx67x20x63x6Cx61x73x73x3Dx22x72x63x74x2Dx74x68x75x6Dx62x22x20x61x6Cx74x3Dx22″,”x22x20x73x72x63x3Dx22″,”x22x2Fx3Ex3Cx2Fx61x3E”,”x3Cx73x74x72x6Fx6Ex67x3Ex3Cx61x20x68x72x65x66x3Dx22″,”x22x20x72x65x6Cx3Dx22x6Ex6Fx66x6Fx6Cx6Cx6Fx77x22x3E”,”x3Cx2Fx61x3Ex3Cx2Fx73x74x72x6Fx6Ex67x3E”,”x3Cx62x72x3E”,”x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x73x68x6Fx77x64x61x74x65x73x22x3E”,”x20″,”x3Cx2Fx73x70x61x6Ex3E”,”x3Cx2Fx6Cx69x3E”,”x3Cx2Fx75x6Cx3E”];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>

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.