Cara membuat Popular Post Cantik Warna Warni

By | February 10, 2019

Cara Membuat Popular Post Keren Warna-warni – Kali ini Blog hhandromax.com akan memberikan tutorial nih, yang dikhususkan bagi yang ingin menciptakan Widget popular post menjadi lebih menarik berwarna-warni seperti template Premium Evomagz, Tampilanya seperti dibawah ini!

Popular post merupakan suatu widget yang menampilkan daftar isi dari Blog yang paling kaya dilihat oleh pengunjung Blog. Widget ini juga bermanfaat untuk menambah page view dari Artikel yang masuk dalam popular post yang dapatnya di pasang di sidebar,

Dengan menciptakan widget popular seperti diatas dapat menciptakan blog anda lebih menarik dengan tampilan warna-warni dan semoga aja dapat lebih menarik perhatian dari pengunjung Blog anda.

Bila anda tak percaya dengan Tampilan widget popular Post diatas, atau anda mengira itu Hoax silahkan Live demo di template blog ini. Ok langsung aja bila anda ingin menciptakan Widget Popular Post warna-warni di Blog anda dan Bisa anda sesuaikan warnanya sendiri sesuai selera anda.

Cara Membuat widget Popular Post warna warni

  • Silahkan anda Login ke akun Blogger anda
  • Kemudian pilih Template dan Edit HTML
  • Kemudian Copy Code CSS di bawah ini dan Paste diatas ]]></b:skin> atau </style>

/*Widget Popular post by */
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}.PopularPosts ul li:nth-child(1){background-color:#A51A5D}.PopularPosts ul li:nth-child(2){background-color:#F53477}.PopularPosts ul li:nth-child(3){background-color:#FD7FAA}.PopularPosts ul li:nth-child(4){background-color:#FF9201}.PopularPosts ul li:nth-child(5){background-color:#FDCB01}.PopularPosts ul li:nth-child(6){background-color:#DEDB00}.PopularPosts ul li:nth-child(7){background-color:#89C237}.PopularPosts ul li:nth-child(8){background-color:#44CCF2}.PopularPosts ul li:nth-child(9){background-color:#01ACE2}.PopularPosts ul li:nth-child(10){background-color:#94368E}.cloud-label-widget-content{text-align:left}.label-size{display:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px}.label-size:hover{border:1px solid #000;color:#000!important}.label-size a:hover{color:#000!important}

Silahkan Ganti kode warna diatas sesuai keinginan anda

  • Simpan Template dan lihat hasilnya

Demikian artikel Cara Desain widget Popular Post warna Warni, Sekian yang dapat admin bagikan kurang lebihnya admin mohon maaf dan Terima Kasih