Membuat Tampilan Widget Popular Posts Yang Keren
- 15 December 2013
- CSS Widget
- 51 komentar
Mungkin kamu sudah bosan dengan tampilan widget Popular Posts (Entri Populer) yang begitu-begitu saja di blog kamu? Pada kesempatan ini saya akan memberikan sebuah solusi agar widget popular posts itu bisa tampil lebih keren. Seperti yang kamu lihat pada widget Popular Posts yang ada di blog ini. Kita akan membuat tampilan widget Popular Post di blog kamu bisa seperti itu. Tertarik?Pada widget ini saya hanya menampilkan judul blog dan memberikan penomoran pada daftar popular posts. Serta memberikan sentuhan warna yang menurut saya itu sudah sesuai di blog saya. Lalu saya memberikan penandaan warna background untuk artikel yang menjadi topik terpanas yang sedang di bahas di blog kita.
Lakukan Konfigurasi Popular Posts (Entri Populer)
Karena saya hanya akan menampilkan judul artikelnya saja pada daftar Artikel Populer atau Entri Populer. Maka saya harus menghilangkan tanda centang pada image thumbnail dan snippet. Caranya adalah masuk ke akun blogger kamu lalu pilih Layout / Tata Letak kemudian klik Edit pada widget Popular Posts kamu. Pada bagian Show (Tampilkan) hilangkan tanda centang seperti yang saya sampaikan sebelumnya.
Jika langkah diatas sudah pernah kamu lakukan, maka silahkan lanjut pada langkah berikutnya (Pemasangan Script)
Pemasangan Script
Untuk pemasangannya, Copy kemudian Paste / letakkan kode CSS di bawah ini diatas
]]></b:skin> atau </style>..PopularPosts {background: #453B1E;color: #fff;line-height: 1.6;font-size: 100%;border-radius: 5px 5px 0 0;}
.popular-posts {background: #5B5339;line-height: 1.6;font-size: 100%;border-radius: 0;color: #D2D2D2}
.popular-posts a{color: #D2D2D2}
.popular-posts a:hover{color: #DEDDDA}
.PopularPosts ul {list-style:none;margin:0;padding:0;counter-reset: popcount;}
.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #a9a9a9;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #DEDDDA;box-shadow: 1px 2px 5px #666666;}
.popular-posts ul li:nth-child(1) {background: #B9663A}
.PopularPosts li {text-transform:uppercase;background:none;margin:0;padding:10px;display:block;clear:both;overflow:hidden;list-style:none;border-bottom: 1px solid #53492C;font:13.5px/140% Coda;}
.PopularPosts li:hover{background:#68645B;}
.PopularPosts li a{text-decoration:none;}
Untuk beberapa blog mungkin sudah ada yang memasang kode
.popular-posts atau .PopularPosts hapus semua kode css tersebut kemudian ganti dengan kode diatas.Selanjutnya SAVE dan lihat hasilnya pada blog kamu. Kamu bisa merubah kembali kode diatas, dan menyesuaikannya dengan kondisi template blog yang kamu gunakan.
Dapet Pertamax nich..
Keren Sob kebetulan lagi nyari he..
Ijin coba dulu :)
Memang popular post widget enak diapa-apain, banyak sekali modifikasinya. Termasuk yang ini keren mas :-d
borong aja kang,, mumpung terbatas :p
hehe,, makasih kang.. silahkan kang.. :)
memang bnyak tampilan widget yang di tawarkan, ya selanjutnya tinggal menyesuaikan saja mana yg cocok utk template blog kita hehe..
Makasih kang :D
wah keren mas ada nomor urut nya...? ijin simpan dulu mas... terimakasih ya..?
Kreatif Sob karyanya, terus berkreasi Sob
wah keren juga mas tampilan dari widget posting populer ini, tapi blog saya nggak dipasang widget tersebut, soalnya sudah penuh blog nya hehehe :D
keren sob widget populernya :)
admin " Variasi Blogger "
Nyoba dulu nih popular postnya
Tutorial yang bermanfaat :)
Namanya kok blog pedas ya, padahal isinya mantap-mantap lho.
Biar mudah di ingat aja mas.. :D
lumayan mas.. silahkan,, moga suka ya ^_^
Siap mas Cahyo :-d
Buat widget lain juga bsa kok mbak... Jadi gk msti popular post kok :)
hehe, makasih min Variasi Blogger :D
Silahkan mbak tiara :)
hehehe makasih neng :)
Hahaha sama postingnya bagiin yg dipake sob ... kereeeennnnnnn
owh iya kang,, yg ini kodenya emng ori yg saya pake,, jadi hasilnya biar sama.. malas mikir2 warnanya lagi ato ubah ini itunya haha :D
wah bagus nih kapan-kapan saya terapkan nih :)
[OOT] tampilan blog mas makin keren aja :)
silahkan mas.. :)
hehe,, makasih loh :D
saya juga mengira artikelnya cabai rawit,abisnya blog pedas sih hihihi
boleh juga nih tutornya,,,,baru lihat tutor popular post seperti ini,,keren juga,,,
Kang Ruly ,,itu baru konsekwen tuh,adminya sendiri pakai tutor yang sama (dibagikan,),,hebatkan,,,,
sip sob :D
Sambil diterapin sambil dikasih tau juga :D
makasih kang,, ya biar bsa saya pertanggung jawabkan apa yg saya bagikan kang :D
Kang Ruly jga bagikan yg dia pake.. :D cuman beda pembahasan aja ya kan kang Rul? :p
Kulit bisa menipu isi kang :p
Tutor iseng namanya ni kang hahaha :p
Iya mas, sekali2 bongkar rahasia sendiri lah hahaha :p =D
Kemana aja ni, baru nampak?
hehe sip..
bener keren sobat, thanks tutornya
hehehe,, makasih mas :D
walaupun kulitnya ijo tp tetep ajah pedas :)
mantaap gannn
waw mantaff nih, btw itu warnanya bisa diganti kan? hohoo
sementara saya simpan dulu mas, buat persediaan :hehe
kunjungan perdana.
mang keren sob.. tinggal di copas. heheheh
heheh makasih gan..
bisa kok neng.. tinggal sesuaikan saja sama kondisi template kita nya hehe :)
silahkan kang ucup.. :D
selamat datang mas Aldino..
hehe, makasih mas.. iya tinggal copas aja ;)
Saya nyimak dulu Mas ^^
Blogwalking balik :)
silahkan sis :)
Langsung saya coba'in nih gan
makasih tutorialnya
oke gan :-bd
wah , keren-keren :D
apalagi klo warna-warni mas ,, beh tambah siipph :-d
hehe,, sipp kan masbro.. sorry baru balas.. baru tau kalau ada komentar yg belum di balas :)
Penjelasannya bagus sekali gan,sangat bermanfaat.
terimakasih banyak gan, sangat bermanfaat sekali artikelnya..
http://acemaxsshop.com/obat-penyakit-varikokel-tradisional/
Show Emoticon