Membuat Popular Post Keren dan Berwarna

Membuat Popular Post Keren dan Berwarna

Popular post/artikel populer adalah artikel yang banyak dilihat oleh pengunjung. Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik dan enak untuk dilihat. Untuk tampilan popular post akan terlihat seperti gambar dibawah ini.

Memasang Popular Post Keren dan Warna - Warni

1. Silakan masuk pada akun blogger Anda
2. Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.
3. Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode ]]></b:skin> atau </style> dan Simpan

/*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}
Selamat sekarang Anda mempunyai tampilan popular keren, unik, warna - warni dan menarik. Anda juga bisa mengganti warna tersebut dengan mengubah nilai pada CSS Pengaturan Warna ;)

Artikel Terkait

Komentar

Hilal Soraya
wah....popular postnya kayak pelangi...hehe, keren2 sih biar blognya tampak lebih keren dan professional
Kang Mousir
betul mas, blog jadi lebih terlihat professional ;)
Codex Hammurabi
mantaf mas. (y) ciri khas popular post templatnya mas sugeng yang baru ya ?
Kang Mousir
Sepintas terlihat mirip mas, tapi beda kok dari segi warnanya juga. Coba bandingkan popular post punya Saya dengan Mas Sugeng beda ;)
Anonim
bagus ya, jd lebih bervariasi blognya :-d
Kang Mousir
betul mba membuat blog jadi lebih cantik :)
dimas cahyo
mantaf gan, jadi keren tampilan populer postnya :-d
Kang Mousir
betul gan, membuat blog jadi lebih unik dan tamil full color :D
Ikhsan Iskandar
keren sob, terlihat lebih fresh popular post nya,, :-d
Kang Mousir
sip, tentunya blog jadi lebih keren dengan memasang ini ;)
Hand Excel
wah keren bgt ga jadi power full blognya :-d
Kang Mousir
betul gan tambah kece buat blognya
Aulia Muflih
sadiss... gk bisa pasang backlink... :(
padahal kan gak merugikan satu sama lain..
Kang Mousir
Mohon maaf, karena Saya anggap itu merugikan dan menguntungkan salah sat u pihak.
Ryan Widyantono
Komentar ini telah dihapus oleh pengarang.
Yuliono Gundul
Alhamdulillah berhasil gan langsug saya terapkan, terima kasih banyak salam kenal yuli.
Kang Mousir
sama - sama gan, salam kenal juga :D
Anonim
kok untuk template blog aku gak bisa yah kang ;( template nya padahal bagus loh huffff ;( bisa dicek mungking disini kang => http://tipsbisnispraktis.blogspot.com/
om bliz
wah mangtabs kang :) visit ombliz.com all
Mad solihin
Makasih gan totorialnya ...
calrase patrick
terima kasih tutorialnya... bagaimana cara membuat bloglist keren dan berwarna
heru borneo
wisatajalantraveling
salam kenal kang mousir.....
ijin numpang nyimak artikelnya , maklum newbie gan...kebetulan sudah lama cari artikel ini...thank ilmunya gan...
semoga sukses selalu...aminnnn
Fathur rahman
Saya coba tambah gadget langsung warna warni gan soalnya ane pake template soe responsive gan thanx
Dudung 46
keren mas artikelnya bermanfaat buat saya silokaliku kumpulan artikel penuh likaliku,,hehe
satrio ade
Thanks kang atas tipsnya udah ane coba di blog jadi keren banget
Disambung com
kalo mau di ganttin sama yang di blog ane gimana kang?
Ery Syahputra
TERIMAKASIH ,,UD DI PRAKTEKKAN DAN BERHASSIL..BLOG SY JADI MAKIN KEREN.
Pulsa Murah
Terimakasih.. udah diuji dan mantap...
Lisa Sakamoto
makasih gan, tipsnya work :D
Roxuai blogz
Terima kasih banyak kang mousir .... langsung di coba, semoga berhasil ya hehehe... saya banyak belajar dan mendapat ilmu yang bagus dari blog ini, semoga blognya jadi berkat ya mas mousir ... bravo ^_^
Ryand Al-Qassam
kalo bikin popular post blog utama di blog zombie gimanaya kang ?
maohon di bantu gan
jaga karsa
keren bang. terimakasih :D
zulfadli
Keren Mas...Work tipsnya...Terima kasih banyak
Anonim
kirain angka2 disamping judul itu adalah jumlah komentar, ternyata urutannya aja yah.... atau siapa tahu bisa kang dibuat yang ada jumlah komentarnya dari setiap post disamping judul
muhammad iqbal
kok aku juga nggak bisa ya kang,
Anonim
berhasil gan tapi tulisannya kecil gan
Tasriandi R
Punya saya tidak mau tampil mas ..
mohon pencerahannya
Wildan JW
Kok gak berwarna ya pas di blog ane?
Wildan JW
Oke ternyata, pass dipasang di atas b:skin gak bisa, tapi diatas style bisa
Dhia Syarafana
Wuih muantap popular postnya, mau coba praktekkan dulu ah
Achmad Rozie Ant
tidak ada kode tsb kang di template saya
Budi aja
sangat tokcer gan, makasih ya
Ao Taka
kang, minta kode buat yang kaya dibawah artikel blog akang ini yang ada slot iklan sama subscribe boxnya
Purnama Wati
saya terapin ke blogku kang, makasi ya.. matep dah...
Dia Amera
keren kang
kapan-kapan mau modif juga ntar
de eka Sas
terimakasih kang..
blog saya sudah berhasil terpasang popular post berwarna warni dengan sangat sangat suksesss...
MM Multimedia
seru kayanya nich sesuai dengan blog saya yang color-full
numpang jajal yach kang ... nanti kalo ada masalah boleh nanya yach, dan jangan bosen bikin tutorial diseputar blog
Salam

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal