Blog Personal tentang tips Blogging dan Internet

Membuat Popular Post Keren dan Berwarna

Icon Popular Post
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.
Popular Post Warna - warni

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.
Pengaturan Popular Post
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 ;)

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

52 Komentar untuk "Membuat Popular Post Keren dan Berwarna"

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 ;)

Kiki Dee

bagus ya, jd lebih bervariasi blognya :-d

dimas cahyo

mantaf gan, jadi keren tampilan populer postnya :-d

Ikhsan Iskandar

keren sob, terlihat lebih fresh popular post nya,, :-d

Kang Mousir

betul mba membuat blog jadi lebih cantik :)

Kang Mousir

betul gan, membuat blog jadi lebih unik dan tamil full color :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.

Komentar ini telah dihapus oleh pengarang. - Hapus
Yuliono Gundul

Alhamdulillah berhasil gan langsug saya terapkan, terima kasih banyak salam kenal yuli.

Kang Mousir

sama - sama gan, salam kenal juga :D

Arif Gunawan

kok untuk template blog aku gak bisa yah kang ;( template nya padahal bagus loh huffff ;( bisa dicek mungking disini kang => http://tipsbisnispraktis.blogspot.com/

Hade Andrian

Ajarkan ane cara buat widget feedburner yang dibawah post

om bliz

wah mangtabs kang :) visit ombliz.com all

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...

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

rudhy theart

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,

Agus Purwantoro

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...

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 !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d