-->
logo blog

Widget Recent Post dengan Thumbnail dan Tanggal Saja

Widget Recent Post dengan Thumbnail dan Tanggal Saja

Sahabat tertarik membuat recent post dengan thumbnail dan tanggal postingan saja? Widget ini terlihat menarik, simpel, dan keren. Caranya sangat mudah lo. Lakukan saja, langkah-langkah berikut:
  1. Langsung saja, masuk ke dashbor blog sahabat.
  2. Silahkan meluncur ke TEMPLATE > EDIT TEMPLATE
  3. Silahkan cari kode </style> atau </b:skin>. Letakkan kode di bawah ini, tepat di atasnya. Ingat, di atasnya.
  4. .recent-by-tag li{height:80px;margin:0;padding:10px 0 0;border:1px solid #eee;border-bottom:none}
    .recent-by-tag li:last-child{border-bottom:1px solid #eee}
    .recent-by-tag img {width:70px;height:70px;margin:0 10px;display:block;float:left}
    .recent-by-tag li a{color:#454545}
    .recent-by-tag li a:hover{color:#349acb}
    .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:bold;color:#a7b0b7}
  5. Selanjutnya, cari kode </head>. Letakkan kode di bawah ini juga, tepat di atas kode </head>.
  6. <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>
    Keterangan: silahkan ganti huruf yang berwarna merah dengan jumlah postingan yang hendak ditampilkan.
  7. Jika sudah, simpan template sahabat dengan baik.
  8. Setelah itu, sahabat meluncur ke TATA LETAK (LAYOUT) blog. Tambahkan gadget > HTML/Java Script, lalu masukkan kode di bawah ini dengan benar.
  9. <script>
    document.write("<script src=\"/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag\"><\/script>");
    </script>
  10. Simpan.
Selesai, silahkan melihat hasilnya. Jika ada kesulitan, silahkan corat-coret pada kolom komentar di bawah.
Sumber tutorial: arlina design; sumber gambar: bungfrangki.

Share this:

Artikel Menarik Lainnya

Show comments
Hide comments

No comments

Silahkan berkomentar dengan baik.

Info Pendidikan