Cara Menciptakan Recent Post Ost

Cara Membuat Recent Post Ost - Postingan yang aku bagikan ini yakni menciptakan Widget Recent Post dengan design Kaset, widget ini mungkin akan bermanfaat buat kalian yang memiliki blog dengan niche musik/Ost.

Pertama Silahkan cek dulu yang hampir seolah-olah dengan javascript berikut ini di template kalian yang letaknya ada diatas
</head> atau &lt;/head&gt;&lt;!--<head/>--&gt;. Jika sudah ada tidak perlu ditambah lagi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Fungsi tutorial kali ini sama dengan Cara Membuat Widget Latest Episodes By Label namun yang membedakannya hanya designnya saja. Kalian Bisa lihat pola yang sudah jadi dibawah ini

Demo

Cara Membuat Recent Post Ost

1. Silahkan buka Blogger > Tema > Edit HTML, simpan css berikut diatas </style>

/* CSS Recent Post Ost - Arlethdesign    ======================================= */ ul.bungkusin-ostnya{list-style:none;margin:0;line-height:normal} li.post-ostnya{position:relative;float:left;width:115px;text-align:center;font-size:10px;margin:5px 4px} img.postingan-ost{padding:0;background:#000;margin:2px auto;border-radius:50%;border:1px solid #333} .showpost_rilis{font-size:10px;float:left} .recent-details a{float:right;font-size:10px} .title-ost{border-bottom:0;font-weight:bold;font-family:sans-serif;text-transform:none;line-height:normal;font-size:11px;overflow:hidden;text-align:center;width:100%;height:26px;margin:0;padding:0} .title-ost a{float:none!important;text-align:center} li.post-ostnya a{position:relative;float:right} .da{padding:8px;width:0;border-radius:50%;position:absolute;text-align:center;top:35%;z-index:999999;right:40%;border:2px solid #C7C7C7;background:#222}



2. Jika sudah save tema
3. Selanjutnya Tata letak > Tambahkan Widget > HTML/Javascript, dan simpan Javascript berikut diwidget tersebut.

<script type="text/javascript"> var posts_no = 5; var showcommentpostnya = false;var showrelease_ostnya = false;var showimage_ostnya = true; document.write('<script src=\"\/feeds\/posts\/default\/-\/LABEL POST?orderby=published&alt=json-in-script&callback=showpost_ost\"><\/script>'); var _0xedfd=["\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x75\x6E\x67\x6B\x75\x73\x69\x6E\x2D\x6F\x73\x74\x6E\x79\x61\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\x70\x6C\x69\x65\x73","\x72\x65\x6C","\x74\x65\x78\x74\x2F\x68\x74\x6D\x6C","\x74\x79\x70\x65","\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\x43\x33\x4D\x6F\x30\x69\x4B\x4B\x69\x53\x77\x2F\x56\x47\x64\x4B\x38\x30\x38\x55\x37\x72\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x41\x6D\x49\x2F\x57\x37\x41\x65\x5F\x64\x73\x45\x56\x41\x45\x2F\x73\x31\x36\x30\x30\x2F\x6E\x6F\x2D\x74\x68\x75\x6D\x62\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\x61\x79","\x4A\x75\x6E\x79","\x4A\x75\x6C\x79","\x41\x75\x67\x75\x73\x74","\x53\x65\x70\x74\x65\x6D\x62\x65\x72","\x4F\x63\x74\x6F\x62\x65\x72","\x4E\x6F\x76\x65\x6D\x62\x65\x72","\x44\x65\x63\x65\x6D\x62\x65\x72","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x2D\x6F\x73\x74\x6E\x79\x61\x22\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x6F\x73\x74\x5F\x72\x69\x6C\x69\x73\x22\x3E","\x20","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x64\x61\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x69\x6E\x67\x61\x6E\x2D\x6F\x73\x74\x22\x20\x73\x72\x63\x3D\x22","\x22\x2F\x3E\x3C\x2F\x61\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x69\x74\x6C\x65\x2D\x6F\x73\x74\x22\x3E","\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E","\x73\x72\x63","\x73\x37\x32\x2D\x63","\x77\x31\x31\x38\x2D\x68\x31\x31\x38\x2D\x63","\x72\x65\x70\x6C\x61\x63\x65","\x61\x74\x74\x72","\x69\x6D\x67\x2E\x70\x6F\x73\x74\x69\x6E\x67\x61\x6E\x2D\x6F\x73\x74","\x72\x65\x61\x64\x79"];function showpost_ost(_0x45f9x2){document[_0xedfd[1]](_0xedfd[0]);for(var _0x45f9x3=0;_0x45f9x3< posts_no;_0x45f9x3++){var _0x45f9x4,_0x45f9x5=_0x45f9x2[_0xedfd[3]][_0xedfd[2]][_0x45f9x3],_0x45f9x6=_0x45f9x5[_0xedfd[5]][_0xedfd[4]];if(_0x45f9x3== _0x45f9x2[_0xedfd[3]][_0xedfd[2]][_0xedfd[6]]){break};for(var _0x45f9x7=0;_0x45f9x7< _0x45f9x5[_0xedfd[7]][_0xedfd[6]];_0x45f9x7++){if(_0xedfd[8]== _0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[9]]&& _0xedfd[10]== _0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[11]]){var _0x45f9x8=_0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[5]],_0x45f9x9=_0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[12]]};if(_0xedfd[13]== _0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[9]]){_0x45f9x4= _0x45f9x5[_0xedfd[7]][_0x45f9x7][_0xedfd[12]];break}};var _0x45f9xa;try{_0x45f9xa= _0x45f9x5[_0xedfd[15]][_0xedfd[14]]}catch(k){s= _0x45f9x5[_0xedfd[16]][_0xedfd[4]],a= s[_0xedfd[18]](_0xedfd[17]),b= s[_0xedfd[18]](_0xedfd[19],a),c= s[_0xedfd[18]](_0xedfd[20],b+ 5),d= s[_0xedfd[21]](b+ 5,c- b- 5),_0x45f9xa= -1!= a && -1!= b && -1!= c && _0xedfd[22]!= d?d:_0xedfd[23]};var _0x45f9xb=_0x45f9x5[_0xedfd[24]][_0xedfd[4]],_0x45f9xc=_0x45f9xb[_0xedfd[25]](0,4),_0x45f9xd=_0x45f9xb[_0xedfd[25]](5,7),_0x45f9xe=_0x45f9xb[_0xedfd[25]](8,10),_0x45f9xf= new Array;_0x45f9xf[1]= _0xedfd[26],_0x45f9xf[2]= _0xedfd[27],_0x45f9xf[3]= _0xedfd[28],_0x45f9xf[4]= _0xedfd[29],_0x45f9xf[5]= _0xedfd[30],_0x45f9xf[6]= _0xedfd[31],_0x45f9xf[7]= _0xedfd[32],_0x45f9xf[8]= _0xedfd[33],_0x45f9xf[9]= _0xedfd[34],_0x45f9xf[10]= _0xedfd[35],_0x45f9xf[11]= _0xedfd[36],_0x45f9xf[12]= _0xedfd[37],document[_0xedfd[1]](_0xedfd[38]),1== showrelease_ostnya&& document[_0xedfd[1]](_0xedfd[39]+ _0x45f9xe+ _0xedfd[40]+ _0x45f9xf[parseInt(_0x45f9xd,10)]+ _0xedfd[41]),1== showimage_ostnya&& document[_0xedfd[1]](_0xedfd[42]+ _0x45f9x4+ _0xedfd[43]+ _0x45f9xa+ _0xedfd[44]),document[_0xedfd[1]](_0xedfd[45]+ _0x45f9x6+ _0xedfd[41]);var _0x45f9x10=_0xedfd[22];document[_0xedfd[1]](_0xedfd[46])};document[_0xedfd[1]](_0xedfd[47])}$(document)[_0xedfd[54]](function(){$(_0xedfd[53])[_0xedfd[52]](_0xedfd[48],function(_0x45f9x11,_0x45f9x12){return _0x45f9x12[_0xedfd[51]](_0xedfd[49],_0xedfd[50])})}) </script> <noscript>Your browser does not support JavaScript!</noscript>

Tag	Keterangan
posts_no = 5;	Silahkan Ganti No 5 untuk menampilkan Jumlah postnya
LABEL POST	Ganti Dengan Label Post

Bila lebar dan tinggi tidak sesuai dengan blog kalian,
Silahkan Atur pribadi dibagian CSS nya yang sudah aku Markup.

Bagikan Artikel ini