Cara Membuat Widget Popularpost Warna Warni Seperti Template Kang Mousir

Popular Post adalah sebuah artikel yang paling banyak di baca.Kita buat popular post dengan menambahkan warna yang bermacam-macam mirip tampilan popular post yang di buat kang mousir (sang-seo) Tampilan yang begitu simpel tapi elegant.pengunjungpun bisa betah dengan template kang mousir.Tampilan popular post akan seperti ini.

Review Popular Post Ala Kang Mousir

Lumayan Keren Kan..Cara pasang nya :

1. Masuk Ke Akun Blogger Sobat
2. Pilih Tab Tataletak
3. Tambah Gadget Di bagian Sidebar
4. Entri Populer Buat Agar Popular Post Tanpa Gambar 

Lalu Tambahkan CSS yang Ada Di Bawah.Simpan Di Atas Kode </style> Atau ]]></b:skin>

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

Misalkan Ada Kendala Jangan segan segan untuk menanyakan tentang tutorial ini.Dan jika berhasila maka saya ucapkan selamat anda mempunyai widget popular post yang keren dan menarik dan pengunjung pun berdatangan ke blog sobat untuk melihat popular post nya :v Lebay heheh.Sekali lagi misalkan ada kendala saat pemasangan bisa tanyakan ke kolom komentar.

Tweet

Related Posts

Cara Membuat Widget Popularpost Warna Warni Seperti Template Kang Mousir

4/ 5

Oleh Sugih Bayu

Sugih Bayu Pada 08:14:00 2 Komentar