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

Artikel Terkait

Komentar

Unknown
wah....popular postnya kayak pelangi...hehe, keren2 sih biar blognya tampak lebih keren dan professional
Kang Mousir
betul mas, blog jadi lebih terlihat professional ;)
Singgih Putra
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
Admin
keren sob, terlihat lebih fresh popular post nya,, :-d
Kang Mousir
sip, tentunya blog jadi lebih keren dengan memasang ini ;)
Unknown
wah keren bgt ga jadi power full blognya :-d
Kang Mousir
betul gan tambah kece buat blognya
Unknown
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.
masyulionodotcom
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/
Unknown
wah mangtabs kang :) visit ombliz.com all
Admin
Makasih gan totorialnya ...
Calrase Patrick
terima kasih tutorialnya... bagaimana cara membuat bloglist keren dan berwarna
Bang Udin
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
Fathurrahman
Saya coba tambah gadget langsung warna warni gan soalnya ane pake template soe responsive gan thanx
Unknown
keren mas artikelnya bermanfaat buat saya silokaliku kumpulan artikel penuh likaliku,,hehe
Rio Kun
Thanks kang atas tipsnya udah ane coba di blog jadi keren banget
admin
kalo mau di ganttin sama yang di blog ane gimana kang?
Unknown
TERIMAKASIH ,,UD DI PRAKTEKKAN DAN BERHASSIL..BLOG SY JADI MAKIN KEREN.
Unknown
Terimakasih.. udah diuji dan mantap...
zen
makasih gan, tipsnya work :D
Unknown
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 ^_^
Tf
kalo bikin popular post blog utama di blog zombie gimanaya kang ?
maohon di bantu gan
Novan
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
Paja Tapuih
kok aku juga nggak bisa ya kang,
Anonim
berhasil gan tapi tulisannya kecil gan
Unknown
Punya saya tidak mau tampil mas ..
mohon pencerahannya
Wildan Wiarta
Kok gak berwarna ya pas di blog ane?
Wildan Wiarta
Oke ternyata, pass dipasang di atas b:skin gak bisa, tapi diatas style bisa
Unknown
Wuih muantap popular postnya, mau coba praktekkan dulu ah
Unknown
tidak ada kode tsb kang di template saya
Unknown
sangat tokcer gan, makasih ya
Unknown
kang, minta kode buat yang kaya dibawah artikel blog akang ini yang ada slot iklan sama subscribe boxnya
Purwati
saya terapin ke blogku kang, makasi ya.. matep dah...
Unknown
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