Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Membuat Popular Post Keren Dan Warna-Warni

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.

Previous
Next Post »

2 komentar

Catatan Mamas delete February 5, 2015 at 7:18 AM

makasih nih gan tutorialnya sangat bermanfaat :)
kunjungin balik ya gan :D

wong cilik delete February 5, 2015 at 9:28 AM

Oke gan semoga bermanfaat, trimakasih sudah mampir,, sudah mluncur gan :D

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *