Tuesday, April 11, 2017

Membuat Widget Popular Post Keren Ala Maringngerrang Blog

Membuat Widget Popular Post Keren Ala Maringngerrang Blog

Assalamu'alaikum warohmatullahi wabarokatuh. Pada posting kali ini saya akan membahas mengenai bagaimana cara membuat widget popular posts dengan tampilan yang lebih menarik. Membuat widget popular posts ala Maringngerrang Blog. Widget ini dibuat tanpa memasukkan gambarnya (thumbnail) karena memperhatikan dampak loading faster.

Jadi untuk menambahkannya pertama-tama silakan sobat tambahkan widget/gadget Popular Posts (jika belum ada) pada blog sobat.


Setelah itu atur widget popular posts yang akan sobat tambahakan seperti pada gambar berikut ini, atur waktunya (Paling banyak dikunjungi) sesuai keinginan sobat, sebaiknya gunakan populer per bulan (30 hari terakhir) atau per pekan (7 hari terakhir).


Kemudian Simpan dan buka bagian Tema pada blog sobat lalu pilih Edit HTML.


Kemudian tambahkan kode CSS berikut ini. Letakkan diatas kode ]]></b:skin>.

/* Popular Posts */
.PopularPosts ul{padding:0;margin:0}
.PopularPosts li{display:block;padding:3px 25px!important;margin:5px 0 0 20px;position:relative;border:1px solid #00aeef;transition:all .15s}
.PopularPosts a{color:#333;font-weight:bold}
.PopularPosts li:before{content:"\f0c1";position:absolute;top:6%;left:-5%;background:#00aeef;padding:10px;border-radius:50%;height:12px;width:12px;font:normal normal normal 14px/1 FontAwesome;color:#fff;text-align:center;border:1px solid #00aeef}
.PopularPosts .item-snippet{text-align:left;margin-bottom:3px;cursor:default;font-size:11px}
.PopularPosts .item-title{text-align:center}
.PopularPosts li:hover{background:#00aeef;color:#fff;border:1px solid #d8d9da}
.PopularPosts li:hover a{color:#fff}
.PopularPosts li:hover:before{border:1px solid #f5f8fa}
.item-content .item-thumbnail{display:none}

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comments