Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Postingan Populer Blogger Keren


IkhsanCoegraphy - Kali ini admin akan membagikan tutorial ke kalian cara membuat widget postingan populer blogger keren di template viomagz. Kenapa viomagz? Karena pada saat saya membuat widget popular post keren ini, saya menggunakan template viomagz dari mas sugeng. Untuk yang memakai template lain silahkan di coba.

Cara Membuat Postingan Populer Keren Viomagz

  • Langkah pertama yang harus kalian lakukan adalah login ke akun blogger kalian terlebih dahulu
  • Kemudian masuk ke tema dan edit html.
  • Kalau sudah silahkan kalian cari kode ]]></b:skin> di template kalian dan pastekan kode yang saya berikan di bawah ini, tepat di atas kode tadi.


/* Popular Post */
.PopularPosts ul li:hover{background:#3333330f}.popular-posts ul li a{color:teal}.popular-posts ul li a:hover{color:#555}.PopularPosts h2{text-indent:20px;margin-bottom:-6px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;width:100%;padding-bottom:15px;padding-top:15px;font:700 16px Roboto,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;color:#fff;text-align:left;background:#0c54c1;background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,.1) 75%,rgba(255,255,255,.1) 81.5%,rgba(255,255,255,.2) 0,rgba(255,255,255,.2))}.PopularPosts h2 span{margin-left:20px}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;background:#0c54c1;margin:0 0 10px;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}.PopularPosts ul li>a{font-weight:700;font-size:14px}.PopularPosts .item-snippet,.PopularPosts .item-thumbnail,.PopularPosts .item-title{margin-left:15px;margin-bottom:9px;margin-top:5px}.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;font-size:91%}.PopularPosts .widget-content ul li a:hover{text-decoration:underline}.PopularPosts .widget-content ul li:hover{background:#0c54c1;opacity:1;transform:scale(1.02);transition:all .3s ease}.PopularPosts:hover li{opacity:.7;transform:scale(.98);transition:all .3s ease}.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:91%}.popular-posts{padding:13px;background:#0c54c15e;border-bottom-right-radius:8px;border-bottom-left-radius:8px;}

  • Kemudian tinggal klik save / simpan.

Kalau di template viomagz kalian memiliki nomor di popular postnya, bisa kalian hapus terlebih dahulu.
Caranya yaitu cari kode seperti di bawah ini, terus kalau sudah ketemu tinggal hapus saja.

<b:includable id='numberedpopularposts'>
<style>...........</style></b:icludable>

Akhir kata

Gimana mudah bukan ? cara membuat widget postingan popular di blog, dengan adanya widget ini blog kalian menjadi lebih tampak keren pastinya. Cukup sekian tutorial dari admin terimakasih.