Cara Membuat Popular Post Menjadi Berwarna

Oleh Rafid Aslam

1 Juni 2014

Hai sobat Blogger, kali ini saya akan menyampaikan tentang Cara membuat popular post berwarna. Anda pasti kenal widget popular post, sebagian blogger menganggapnya wajib untuk di pasang di blog, karena berguna untuk memperbanyak pengunjung pada post tersebut. Mungkin anda bosan karena widget Popular post anda terlihat membosankan dan terlalu lama loadingnya, jangan khawatir karena saat ini saya akan memberitahu anda agar popular post menjadi warna-warni seperti punya saya.

Ikuti langkah-langkah di bawah ini:

1. Masuk ke akun blogger, lalu pilih tata letak
2. Lalu pilih "Tambahkan Gadget" (letaknya terserah anda)
3. Lalu pilih Entri Populer

4. Lalu hapus centang pada thumbnail gambar dan cuplikan, pilih tampilkan entri 10, lalu klik simpan

5. Lalu masuk ke template>>Edit HTML
6. Tambahkan kode di bawah ini di atas 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}

7. Lalu klik simpan.

Dan lihatlah pada blog anda, popular post yang keren berwarna-warni. Jika anda ingin bertanya, tanyakan di kotak komentar di bawah ini.

Tag : Tips Blogger

Bagikan :

Tweet