Cara membuat Popular Post Cantik Warna Warni
Tuesday, December 29, 2015
Cara Membuat Popular Post Keren Warna-warni - Kali ini Blog Espada akan memberikan tutorial nih, yang dikhususkan bagi yang ingin membuat 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 banyak dilihat oleh pengunjung Blog. Widget ini juga bermanfaat untuk menambah page view dari Artikel yang masuk dalam popular post yang bisanya di pasang di sidebar,
Dengan membuat widget popular seperti diatas bisa membuat blog anda lebih menarik dengan tampilan warna-warni dan semoga aja bisa lebih menarik perhatian dari pengunjung Blog anda.
Bila anda tidak 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 membuat Widget Popular Post warna-warni di Blog anda dan Bisa anda sesuaikan warnanya sendiri sesuai selera anda.
Demikian artikel Cara Desain widget Popular Post warna Warni, Sekian yang dapat saya bagikan kurang lebihnya saya mohon maaf dan Terima Kasih
Sumber https://www.blogespada.net/
Dengan membuat widget popular seperti diatas bisa membuat blog anda lebih menarik dengan tampilan warna-warni dan semoga aja bisa lebih menarik perhatian dari pengunjung Blog anda.
Bila anda tidak 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 membuat 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}
.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 saya bagikan kurang lebihnya saya mohon maaf dan Terima Kasih
Sumber https://www.blogespada.net/