Membuat Popular Post Keren Dan Warna-Warni

Rabu, Februari 4th, 2015 - Tutorial Blog

Tags :

Cara Membuat Popular Post Berwarna – Popular Post adalah daftar artikel yang sering atau paling banyak di lihat oleh para pengunjung blog. Mungkin anda sering melihat disetiap blog popular postnya berbeda-beda. Pada kesempatan kali ini kita akan membahas bagaimana membuat popular post dengan efek berwarna-warni agar lebih terlihat cantik dan menarik. Memiliki tampilan popular post yang menarik merupakan hal yang sangat penting pada sebuah blog, Terkadang para pengunjung sering mencari konten-konten yang paling banyak dibaca pada blog tersebut, Untuk itu sangat bermanfaat pula jika anda sedikit mengedit popular post pada blog sobat agar terlihat lebih baik.

Cara Membuat Popular Post Berwarna


Bagi kamu sob yang ingin membuat tampilan widget popular post pada blog menjadi keren dan berwarna-warni seperti pada gambar dibawah ini. Jangan kawatir, pada kesempatan kali ini kita akan membahas Bagaimana Membuat Popular Post Berwarna di blog dengan mudah dan cepat.

Membuat Popular Post Keren Dan Warna-Warni

Lalu bagaimana cara mebuat popular post menarik dan berwarna? Baik tanpa panjang lebar langsung saja kita masuk ke pokok pembahasan kali ini. Untuk membuat popular post keren berwarna silahkan ikuti langkah-langkah berikut ini.

Tutorial Membuat Popular Post Berwarna

1. Masuk ke blog sobat terlebih dahulu
2. Jika belum terdapat widget popular post tambahkan dahulu dan seting hanya muncul judul artikel saja seperti pada gambar dibawah ini

Membuat Popular Post Keren Dan Warna-Warni

3. Kemudian masuk ke Template dan pilih Edit Template
4. Cari kode script ]]></b:skin> atau </style>
5. Jika sudah ketemu, Kemudian letekan kode script di bawah ini tepat di atas kode tersebut

/*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}

Keterangan.

  • Anda bisa merubah setingan warna dengan mengedit bagian background-color:#f1c40f Sesuaikan dengan warna keinginan anda
  • Jika tidak ingin menganti warnanya, Langsung saja Simpan Template

Selamat sekarang tampilan popular post pada blog anda sudah menjadi berwarna-warni seperti pada gambar di atas, Begitulah sob tutorial mebuat popular post mejadi berwarna warni, Silahkan di coba pada blognya masing-masing. Selamat mencoba dan semoga bermanfaat.

Share this article
Previous Post « « Cara Membuat Artikel Terkait Keren Dengan Gambar and Cara Membatasi Jumlah Artikel Yang Ditampilakan Pada Setiap Label » » Next Post

Membuat Popular Post Keren Dan Warna-Warni

Membuat Popular Post Keren Dan Warna-Warni | wongcilik2017 | 4.5