Cara Menciptakan Popular Post Anggun Warna Warni
Popular post merupakan suatu widget yg menampilkan daftar isi dari Blog yg paling banyak dilihat oleh pengunjung Blog. Widget ini pun bermanfaat untuk menambah page view dari Artikel yg masuk dalam popular post yg bisanya di pasang di sidebar,
Cara Membuat Popular Post Keren Warna-warni - Kali ini Blog Espada akan memperlihatkan tutorial nih, yg dikhususkan bagi yg ingin menciptakan Widget popular post menso lebih menarik berwarna-warni menyerupai template Premium Evomagz, Tampilanya menyerupai dibawah ini!
Dengan menciptakan widget popular menyerupai diatas sanggup menciptakan blog anda lebih menarik dengan tampilan warna-warni serta biar aja sanggup lebih menarik perhatian dari pengunjung Blog anda.
Bila anda tidak percaya dengan Tampilan widget popular Post diatas, atau anda menerka itu Hoax silahkan Live demo di template blog ini. Ok pribadi aja jikalau anda ingin membuat Widget Popular Post warna-warni di Blog anda serta 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 serta Edit HTML
- Kemudian Copy Code CSS di bawah ini serta 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 harapan anda
- Simpan Template serta lihat hasilnya
Demikian artikel Cara Desain widget Popular Post warna Warni, Sekian yg sanggup saya bagikan kurang lebihnya saya mohon maaf serta Terima Kasih
