Tutorial Cara Membuat Widget Recent Post Style Disc by Label

Tutorial Cara Membuat Widget Recent Post Style Disc by Label

Juli 06, 2017
Halo semua, pada artikel saya kali ini saya akan membahas tentang Tutorial Cara Membuat Widget Recent Post Style Disc by Label langsung saja di bawah ini.

Tutorial Cara Membuat Recent Post Style Disc by Label

Ok, postingan yang akan saya bagikan sekarang yaitu membuat Widget Widget Recent Post Style Disc by Label, widget ini mungkin akan bermanfaat untuk kalian yang mempunyai blog dengan niche Lagu/Ost.
Sebelum kita mulai silahkan cek dulu javascript seperti dibawah ini di template kalian yang letaknya ada di atas </head> 


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

Widget Recent Post Style Disc by Label

1. Langkah pertama yaitu buka Blogger > Tema > Edit HTML, kemudian tambahkan css berikut ini & letakkan dibawah <style>

2. Jika sudah kemudian silahkan Save Tema. 
/* CSS Recent Post Ost - Arleth98
   ======================================= */
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}

3. Kemudian silahkan buka Tata Letak > Add Widget > HTML/Javascript, dan simpan javascript dibawah ini. 
<script type="text/javascript" src='https://cdn.rawgit.com/Arleth98/Js/8cb66fe6/Recent-post-ost.js'></script>
<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\/-\/Ost?orderby=published&alt=json-in-script&callback=showpost_ost\"><\/script>');
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Tag, Keterangan = (posts_no = 5;, Silahkan Ganti No 5 untuk menampilkan Jumlah postnya)
Tag, Keterangan = (Ost, Ganti Dengan Label Postnya)
 
Demo Bisa kalian lihat di bawah ini

Bila lebar dan tinggi tidak sesuai dengan blog kalian,
Silahkan Atur langsung dibagian CSS nya yang sudah saya Markup.
Terima kasih sudah mampir & semoga bermanfaat
Tunggu Artikel Kami Berikutnya
Jangan Lupa Komentarnya.


EmoticonEmoticon

Langganan: Posting Komentar (Atom)