Cara Mengganti Popular Post Agar Lebih Berwarna

Baca Juga

Bosen dengan tampilan Widget Popular Post Agan yg begitu saja? Ganti laah gan :D hehehee. Kalo tampilannya begitu begitu saja, bisa jadi pembaca di blog agan bosan dan malah eneg melihat blog agan yg suram :3 Nah sekarang ane bakal kasih tutorial menggnati Popular Post jadi lebih berwarna dan ceria seperti punya ane(kaya anak tk aja -_-) wess lanjut aja gan :D

• Pertama tama agan hapus semua code CSS Popular Post di Template blog agan lalu tambahkan code CSS di bawah diatas code </style> atau/]]></b:skin>

lalu klik Save Templates

/*Popular Post*/.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:#f1c40f}.PopularPosts ul li:nth-child(2){background-color:#f39c12}.PopularPosts ul li:nth-child(3){background-color:#2ecc71}.PopularPosts ul li:nth-child(4){background-color:#27ae60}.PopularPosts ul li:nth-child(5){background-color:#e67e22}.PopularPosts ul li:nth-child(6){background-color:#d35400}.PopularPosts ul li:nth-child(7){background-color:#3498db}.PopularPosts ul li:nth-child(8){background-color:#2980b9}.PopularPosts ul li:nth-child(9){background-color:#ffcc06}.PopularPosts ul li:nth-child(10){background-color:#c0a22b}.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}

• Maka Popular Post agan akan seperti yg ada di blog ane atau seperti di bawah ane

Sekian Post Cara Mengganti Popular Post Agar Lebih Berwarna Semoga Bermanfaat gan :D

Terimakasih telah meluangkan waktu dengan membaca post kami :) Salam GMFN :)
(Baca Juga:Cara Merubah Warna Teks Saat Di Blok)