untuk demo, info dan tutorial lebih lengkap, rujuk video ini
code Javascript di Step 1 telah update pada 4 Apr 2016
Step 1
Copy code dibawah, kemudian pastekannya di sidebar layout anda, melalui widget
HTML/Javascript.*sila tukar alamat blog alamat blog yang kami warnakan oren tersebut kepada alamat blog anda.
<div id='recent-posts-script'><script type='text/javascript'>var //--------- SIDEBAR RECENT POSTS SETTING ------------- // | jumlahposts = 8, // jumlah recent post | gambar = true; // true jika nak, false jika xnak | // | //------------------------------------------------------- document.write('<script type=\"text/javascript\" src=\"http://www.thesisblogger.com/feeds/posts/default?alt=json-in-script&callback=recent\"><\/script>'); var _0x90d8=["\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","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x75\x72\x6C","\x6D\x65\x64\x69\x61","\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","","\x2F\x2F\x32\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x4B\x2D\x37\x66\x46\x47\x5F\x7A\x6B\x34\x49\x2F\x55\x77\x5F\x54\x56\x53\x6B\x32\x52\x37\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x47\x41\x6B\x2F\x4D\x38\x64\x4A\x52\x39\x47\x78\x42\x58\x67\x2F\x73\x33\x30\x37\x2F\x54\x68\x75\x6D\x62\x6E\x61\x69\x6C\x2E\x6A\x70\x67","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x74\x65\x6D\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x6D\x61\x67\x65\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22\x20\x61\x6C\x74\x3D\x22\x20","\x20\x6F\x6B\x3F\x20\x62\x65\x72\x69\x6B\x75\x74\x20\x61\x64\x61\x6C\x61\x68\x20\x61\x72\x74\x69\x6B\x65\x6C\x20\x74\x65\x72\x62\x61\x72\x75\x20\x64\x61\x6E\x20\x74\x65\x72\x6B\x69\x6E\x69\x20\x74\x65\x6E\x74\x61\x6E\x67\x20\x22\x20\x2F\x3E\x20","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x73\x70\x61\x6E\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x61\x3E","\x68\x61\x73\x68","\x72\x65\x70\x6C\x61\x63\x65","\x62\x6F\x64\x79\x2E\x63\x75\x73\x74\x6F\x6D\x2E\x70\x6F\x73\x74\x2D\x70\x61\x67\x65","\x62\x6F\x64\x79\x2E\x6D\x2E\x63\x75\x73\x74\x6F\x6D","\x2E\x6D\x6F\x62\x69\x6C\x65\x2D\x69\x6E\x64\x65\x78\x2D\x70\x61\x67\x65","\x72\x65\x6D\x6F\x76\x65","\x2E\x77\x69\x64\x67\x65\x74\x2E\x48\x54\x4D\x4C","\x70\x61\x72\x65\x6E\x74\x73","\x23\x72\x65\x63\x65\x6E\x74\x2D\x70\x6F\x73\x74\x73\x2D\x73\x63\x72\x69\x70\x74","\x77\x72\x69\x74\x65"];function recent(_0xe6bfx2){for(var _0xe6bfx3=0;_0xe6bfx3<jumlahposts;_0xe6bfx3++){var _0xe6bfx4=_0xe6bfx2[_0x90d8[1]][_0x90d8[0]][_0xe6bfx3];var _0xe6bfx5=_0xe6bfx4[_0x90d8[3]][_0x90d8[2]];var _0xe6bfx6;if(_0xe6bfx3==_0xe6bfx2[_0x90d8[1]][_0x90d8[0]][_0x90d8[4]]){break};for(var _0xe6bfx7=0;_0xe6bfx7<_0xe6bfx4[_0x90d8[5]][_0x90d8[4]];_0xe6bfx7++){if(_0xe6bfx4[_0x90d8[5]][_0xe6bfx7][_0x90d8[6]]==_0x90d8[7]){_0xe6bfx6=_0xe6bfx4[_0x90d8[5]][_0xe6bfx7][_0x90d8[8]];break}};var _0xe6bfx8;try{_0xe6bfx8=_0xe6bfx4[_0x90d8[10]][_0x90d8[9]]}catch(error){s=_0xe6bfx4[_0x90d8[11]][_0x90d8[2]];a=s[_0x90d8[13]](_0x90d8[12]);b=s[_0x90d8[13]](_0x90d8[14],a);c=s[_0x90d8[13]](_0x90d8[15],b+5);d=s[_0x90d8[16]](b+5,c-b-5);if((a!= -1)&&(b!= -1)&&(c!= -1)&&(d!=_0x90d8[17])){_0xe6bfx8=d}else {_0xe6bfx8=_0x90d8[18]}};if(gambar==true){var _0xe6bfx9=_0x90d8[19]+_0xe6bfx6+_0x90d8[20]+_0xe6bfx8+_0x90d8[21]+_0xe6bfx5+_0x90d8[22]+_0xe6bfx5+_0x90d8[23]}else {var _0xe6bfx9=_0x90d8[24]+_0xe6bfx6+_0x90d8[25]};var _0xe6bfxa=_0x90d8[26]+_0xe6bfx5+_0x90d8[27];var _0xe6bfxb=location[_0x90d8[8]][_0x90d8[29]](location[_0x90d8[28]],_0x90d8[17]);if($(_0x90d8[30])[0]||$(_0x90d8[31])[0]){if($(_0x90d8[32])[0]){$(_0x90d8[36])[_0x90d8[35]](_0x90d8[34])[_0x90d8[33]]()}else {if(_0xe6bfxb!=_0xe6bfx6){document[_0x90d8[37]](_0xe6bfx9+_0xe6bfxa)}}}else {$(_0x90d8[36])[_0x90d8[35]](_0x90d8[34])[_0x90d8[33]]()}}}</script></div>
Step 2
Copy code dibawah, kemudian pastekannya di CUSTOM CSS (Blogger Template Desinger).
*klik sini untuk ketahui dimana letaknya CUSTOM CSS anda.
/*--: THESIS RECENT POST :--*/
.custom #recent-posts-script,#recent-posts-script *{overflow:hidden}.custom #recent-posts-script{margin-bottom:17px}.custom #recent-posts-script .item{border-bottom:1px solid #dfdfdd;display:block;position:relative;height:75px;padding:12px 0}.custom #recent-posts-script .image{padding:1px;float:left;height:75px;width:100px;clear:left;background:#dfdfdd}.custom #recent-posts-script .item span{color:#333;overflow:hidden;position:relative;padding:0 0 0 11.0px;top:-3.4px;font-weight:600;font-size:13px;line-height:1.5;height:75px;display:block}.custom #recent-posts-script .item:hover span{text-decoration:underline}#recent-posts-script{counter-reset:my-badass-counter;display:list-item}#recent-posts-script .link{padding:10px 0 10px 30px;border-bottom:dotted 1px #dfdfdd;box-sizing:border-box;display:list-item}#recent-posts-script .link:before{content:counter(my-badass-counter);counter-increment:my-badass-counter;display:inline-block;float:left;position:relative;margin-left:-25px;color:#a6a6a6;font-weight:700;font-family:'Hammersmith One',Arial,Helvetica,Tahoma,sans-serif}#recent-posts-script .link span{clear:left;font-weight:600;font-size:13px;line-height:1.5px;color:#495c23}#recent-posts-script .link:hover > span{text-decoration:underline;color:#ff6b1e}
Done, dan lihat hasilnya.
Ciri-ciri widget
1. Widget recent posts hanya akan muncul di Sidebar single post pages, tidak muncul di index pages yang sememangnya page tersebut ada banyak recent posts pada main column.
2. Laju loading dan responsive.
3. Dinamik setting, boleh set tanpa gambar atau dengan gambar (thumbnail). Style untuk kedua-dua tetapan tersedia secara default dengan kemas (rujuk video untuk demo).
4. Boleh di paste ke HOOK BEFORE FOOTER untuk munculkannya di mobile.