Membuat Post By Label Menyerupai Blog Magazine Dengan Mudah

Recent Post menurut Label

Apa itu recent post by label? Recent Post By Label yaitu list postingan (blog) terbaru dengan daftar / list hanya menurut label / kategori tertentu.

SEOblogfaster kali ini akan mengulas bagaimana menciptakan blog kita terlihat menyerupai web magazin profesional dengan recent post by label. kalau anda belum pernah melihat atau belum begitu memaham apa yang dimaksud dengan recent post by label anda dapat lihat misalnya pada blog Nalar Langit.

Pada widget ini recent post sudah dilengkapi dengan Thumbnail gambar, sehingga tampilannya akan lebih menarik dan widget ini menggunakan Tag Kondisional sehinggga tidak akan tampil pada Mobile.

Cara menciptakan Recent Post By Label

Bukalah Blogger.com > Template > Edit HTML ,lalu carilah instruksi </Style> dan letakkan instruksi ini sempurna diatasnya.

/* Recent By Label */
.recent-by-tag img {float:left;width:60px;height:60px;margin-right:10px;margin-bottom:17px}
.recent-by-tag li {clear:both;line-height:1.3em !important}
.recent-by-tag li a{list-style:none;color:#555;font-weight:bold;font-size:14px !important}
.recent-by-tag li a:hover,.recent-by-tag li:hover a{color:#f35858 !important}
.recent-by-tag li .showdates{display:inline-block;font-size:10px;font-weight:normal;margin-top:5px;color:#aaa}

Lalu masukkan instruksi dibawah ini,tepat diatas instruksi </Head>

               <script type='text/javascript'>

            var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){

            var numposts = 5;

            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>

Simpan template

Keterangan:
min-width: 992px ialah batas device instruksi ini akan ditampilkan. Maksudnya, kalau device semakin kecil dari angka 992px maka instruksi tidak muncul.
var numposts = 5; angka 5 yaitu jumlah artikel yang ingin ditampilkan.
var showpostthumbnails = true; instruksi true untuk menampilkan gambar/thumbnail. Jika thumbnail tidak ingin ditampilkan ganti instruksi true dengan instruksi false.
var showpostdate = true; instruksi true untuk menampilkan tanggal postingan. Ganti dengan instruksi false kalau tidak ingin menampilkannya.

Kemudian buka sajian Tata Letak > Tambahkan HTML/JavaScript , Lalu masukkan instruksi dibawah ini pada content widget HTML/JavaScript.

<script>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){document.write("<script src=\"/feeds/posts/default/-/SEO?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");}
</script>