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 Comments:
wih keren \o/
content:counter(num); itu yang membuat penomoran otomatis ya mas...?
kuncinya pada yg nth-child(n) kan...
Nice tutorial! Asyik bener tuh kalau 'block' nya dibikin oval.. :yaya:
kalau dibikin populer post horisontal gmn........??
.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 {
width:810px;
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
overflow:hidden;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
padding:6px 6px;
counter-increment:num;
position:relative;
float:left;
width:150px;
height:100px;
-webkit-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
-moz-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
box-shadow:-1px -1px 10px rgba(0,0,0,.7);
}
.PopularPosts ul li .item-snippet {display:none}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:100%;
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;
right:0;
bottom:0;
}
/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27}
.PopularPosts ul li:nth-child(5) {background-color:#149A48}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1}
.PopularPosts ul li:nth-child(7) {background-color:#61469C}
.PopularPosts ul li:nth-child(8) {background-color:#863E86}
.PopularPosts ul li:nth-child(9) {background-color:#863E62}
.PopularPosts ul li:nth-child(10) {background-color:#815540}
http://2.bp.blogspot.com/-CllAP1S7fgI/USL3gpmbdfI/AAAAAAAAHD8/sTZkuabm2tk/s1600/popular-post-widget.png
kalau dengan title + thumb + snippet juga menjadi horisontal gmn...!!!??
Thanks for Share, Ilmu yang bermanfaat (Insha Allah!)
thank gan.....
Creative ! Makasi mas Taufik ! :-bd
Wow keren, mksh mz..
Mantap mas taufik, izin ambil CSS-nya sebagai basis modifikasi tampilan selanjutnya :)
mas., klo saya pengen menerapkan nomor2nya pada homepage saya, gmn caranya?, pernah aq nyoba tapi gk jadi2... :(
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style> ... kode CSS ... </style>
</b:if>
aha.. :D menggelitik sekali, warna-warni.. sip deh, saya pasang dengan 1% semua, biar adil.. \o/
wah ini keren \o/
mas kalo saya mau ganti nomor background kan bulat diganti persegi gimana ya
Hapus baris ini:
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
mas Taufik, gmn tuh supaya saat diklik link judul pd popular post bs open link new tab?, sama kayak saat diklik gambar
Di dalam XML widget posting populer:
<a expr:href='data:post.href' target='_blank'>
sdh dr sononya hny 10 judul yg tampil.., klo sy pengen nambah lebih dr 10 judul bs gk mas?
Sepertinya tidak bisa.
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
⇒ /2012/01/penolakan-blogger-terhadap-javascript.html
Assalamu'alaikum mas taufik, apakah bisa pada widget populer post menambahkan tanggal publikasi di setiap posting. saya coba menggunakan <data:post.timestamp/> tidak bisa.
Waalaikumsalam. Sepertinya tidak bisa.
keren mas, ijin praktek ya mas, kayaknya menarik ini. terima kasih salam yuli
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
Kalau markup HTML-nya masih sama harusnya bisa jadi warna-warni. Atau mungkin kamu pakai peramban yang tidak pendukung selektor CSS :nth-child(N)
Thanks gan berhasil :D :D
Maaf Gan, Gambarnya kok gk muncul. :D
Salam mas TaufikNurrohman.
Saya sharing artikel ini di blog saya ya mas..
terimakasih sebelumnya..
Salam Sukses selalu.
Yop. Semoga bermanfaat.
Tempat kursus para blogger disini :D, thanks kang rohman
Bang Taufik, kalau semisal widget itu dibuat jadi "Unpopular Post". Apa yang harus dirubah?
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.
Post a Comment
<< Home