Modifikasi Widget Posting Populer Menjadi Berwarna-Warni
Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin>
atau </style>
:
/* Custom CSS for Blogger Popular Post Widget */
.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;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
Klik Simpan Template. Begitu saja.
35 Komentar
Dixy
wih keren \o/
content:counter(num); itu yang membuat penomoran otomatis ya mas...?
abang ichal
kuncinya pada yg nth-child(n) kan...
Unknown
Nice tutorial! Asyik bener tuh kalau 'block' nya dibikin oval.. :yaya:
Unknown
kalau dibikin populer post horisontal gmn........??
Taufik Nurrohman
Unknown
kalau dengan title + thumb + snippet juga menjadi horisontal gmn...!!!??
AdminBe
Thanks for Share, Ilmu yang bermanfaat (Insha Allah!)
Unknown
thank gan.....
Ijal Fauzi
Creative ! Makasi mas Taufik ! :-bd
Unknown
Wow keren, mksh mz..
Unknown
Mantap mas taufik, izin ambil CSS-nya sebagai basis modifikasi tampilan selanjutnya :)
Lentera Langit
mas., klo saya pengen menerapkan nomor2nya pada homepage saya, gmn caranya?, pernah aq nyoba tapi gk jadi2... :(
Taufik Nurrohman
Andi AF Studio
aha.. :D menggelitik sekali, warna-warni.. sip deh, saya pasang dengan 1% semua, biar adil.. \o/
Update Campuran
wah ini keren \o/
Goro
mas kalo saya mau ganti nomor background kan bulat diganti persegi gimana ya
Taufik Nurrohman
Hapus baris ini:
Unknown
mas Taufik, gmn tuh supaya saat diklik link judul pd popular post bs open link new tab?, sama kayak saat diklik gambar
Taufik Nurrohman
Di dalam XML widget posting populer:
Unknown
sdh dr sononya hny 10 judul yg tampil.., klo sy pengen nambah lebih dr 10 judul bs gk mas?
Taufik Nurrohman
Sepertinya tidak bisa.
choluoxy
mas punya saya kok gak bisa ya? ada tulisan spt ini
Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 551, kolom 15: The entity name must immediately follow the '&' in the entity reference.
itu apanya mas ya?? thankz
Taufik Nurrohman
⇒ /2012/01/penolakan-blogger-terhadap-javascript.html
you
Assalamu'alaikum mas taufik, apakah bisa pada widget populer post menambahkan tanggal publikasi di setiap posting. saya coba menggunakan
<data:post.timestamp/>
tidak bisa.Taufik Nurrohman
Waalaikumsalam. Sepertinya tidak bisa.
masyulionodotcom
keren mas, ijin praktek ya mas, kayaknya menarik ini. terima kasih salam yuli
everybodygoesblog
Mau tanya gan:
1. Diblog saya kok nggak warna-warni ya? Putih polos seperti background blog, salah dimananya?
2. Apa harus pakai thumbnail? Kalau judul saja bagaimana?
3. Ukurannya bisa diperkecil lagi nggak? Soalnya pas urutan nomor kepotong gan di blog saya.
Makasih
Taufik Nurrohman
Kalau markup HTML-nya masih sama harusnya bisa jadi warna-warni. Atau mungkin kamu pakai peramban yang tidak pendukung selektor CSS
:nth-child(N)
Ardi Handayat
Thanks gan berhasil :D :D
Erdin Maulana
Maaf Gan, Gambarnya kok gk muncul. :D
fortunanetworks.com
Salam mas TaufikNurrohman.
Saya sharing artikel ini di blog saya ya mas..
terimakasih sebelumnya..
Salam Sukses selalu.
Taufik Nurrohman
Yop. Semoga bermanfaat.
Harmansyah
Tempat kursus para blogger disini :D, thanks kang rohman
nyaasar
Bang Taufik, kalau semisal widget itu dibuat jadi "Unpopular Post". Apa yang harus dirubah?
Unknown
Untuk menampilkan selain popular post, biasanya orang-orang nampilin Recent Post, coba cari panduan pemasangannya di Google atau di website ini.
Selain Recent post biasa (berdasarkan tanggal), ada juga recent post yang diurut berdasarkan label.