Siang All
Populart Post merupakan hal yang cukup penting pada struktur blog , karena artikel populer akan dapat perhatian lebih ketika pengunjung melihat sebuah blog terlebih ketika style widget populart post beda dari biasanya atau unik . Kali ini saya akan berbagi tutorial widget untuk merubah penampilan populart post , Untuk lebih jelasnya lihat demonya barangkali cocok dengan template sobat
Save Template dan lihat hasilnya
NB : untuk warna #DDDDDD dan ukuran sobat sesuaikan sendiri
Populart Post merupakan hal yang cukup penting pada struktur blog , karena artikel populer akan dapat perhatian lebih ketika pengunjung melihat sebuah blog terlebih ketika style widget populart post beda dari biasanya atau unik . Kali ini saya akan berbagi tutorial widget untuk merubah penampilan populart post , Untuk lebih jelasnya lihat demonya barangkali cocok dengan template sobat
Untuk kostumisasi seperti biasa sobat masuk pada Rancangan > klik Edit Template dan cari kode ]]></b:skin> dan simpan kode dibawah ini tepat diatas kode ]]></b:skin>
.popular-posts ul li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
Save Template dan lihat hasilnya
NB : untuk warna #DDDDDD dan ukuran sobat sesuaikan sendiri
wow keren mas.. cakep nih, terimakasih tutorialnya sangat bermanfaat
BalasHapusudah keren.. cakep lagi, komplit banget pujiannya.. `.
Hapushahaha diborong miz hehe
Hapusahaha biar yang laen gak kebagian..
Hapuswah curang nih...ga bagi2...hehe
Hapushaha si mas bud .. naon ( apa ) yg dibagi-bagi itu mas hehe
Hapusternyata gak ribet... cuma tambahin itu doang ya, entar kalo mau pake balik lagi kemari .
BalasHapusboleh-boleh hehe
Hapuswah mantap juga tutorialnya sob, mungkin lain kali perlu dicoba ini sob.
BalasHapusterima kasih atas tutorialnya yg bermanfaat
monggo silahkan ...
Hapusterimaksih kembali mas
pengen make mas...tapi msh blm nyoba buka2 ngedit template...semenjak tampiln nya make yg baru...
BalasHapusnanti deh...mesti ta jajal...hehe
thx ya kang :)
blum bisa praktek kak
BalasHapuskalau udah harus masuk template , aku mumet narok kodenya
BalasHapushehe