Cara Membuat Popular Post Warna Warni Dan Responsive

Artikel terkait : Cara Membuat Popular Post Warna Warni Dan Responsive

Cara Membuat Popular Post Warna Warni Dan Responsive- Halo Sobat Blogger.dalam kesempatan kali ini saya akan membagikan sebuah widget super keren dan serba warna yaitu Widget Populer Post Keren.Popular Post adalah Postingan-Postingan yang paling banya dikunjungi.Contoh Popular Postnya bisa kamu lihat diatas.Keren bukan.Caranya pemasangangnnya juga mudah.Ikuti langkah-Langkahnya dibawah ini :
1. Login Blogger [WAJIB].
2. Buka Menu Tata Letak.
3. Pilih Tambahkan Gadget Dan pilih Entri Populer atau apabila sudah kamu pasang Pilih Edit.
4. Atur Seperti dibawah ini :

     NOTE : Untuk Tampilan Hingga, Kamu bisa atur sendiri.
5. Setelah itu buka Menu Template.
6. Klik pada Edit HTML.
7. Setalah itu cari kode ]]></b:skin> atau </style>
8. Apabila sudah ketemu tempelkan kode dibawah ini tepat diatas kode 
    ]]></b:skin> atau </style>.

/*Custom Popular Post*/ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:.5em 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} .PopularPosts ul li a{color:#fff!important} .PopularPosts ul li a:hover{color:#2c3e50!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} /* Pengaturan Warna */ .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:#ea6153;} .PopularPosts ul li:nth-child(10){background-color:#c0392b;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

Note : Kamu bisa mengganti warna  yang kamu sukai dengan mengganti kode warna HTML            dengan kode Warna yang kamu inginkan.

9. Simpan Template.

           Sekarang Blog semakin Cantik dengan Popular Post yang Berwarna-Warni.Semoga Membantu.... :)