Cara Membuat Recent Post Ost - Postingan yang saya bagikan ini yaitu membuat Widget Recent Post dengan design Kaset, widget ini mungkin akan bermanfaat buat kalian yang mempunyai blog dengan niche musik/Ost.
Pertama Silahkan cek dulu yang hampir mirip dengan javascript berikut ini di template kalian yang letaknya ada diatas
</head> atau </head><!--<head/>-->. 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 contoh yang sudah jadi dibawah ini
Cara Membuat Recent Post Ost
- 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}
- Jika sudah save tema
- 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 langsung dibagian CSS nya yang sudah saya Markup.
Comments
Post a Comment