| Beranda |
Tutorial Website
|
Jangan Dibuka |
Cara Modifikasi Widget Popular Posts agar tampil beda
Mungkin untuk soal modif-memodif sudah pada master semua, namun disini saya hanya ingin berbagi, kali aja ada yang males mikir buat merancang, jadi tinggal dipake aja.
Oke dari pada panjang lebar, contoh hasil modifikasi popular postnya bisa dilihat di blog ini, memang nggak begitu berarti tapi lumayan lah buat menghias, popular post tersebut akan
membesar dan berubah warna
jika diarahkan mouse, disini kodenya saya buat semudah mungkin jadi kalo ada yang masih nyewbi mungkin akan bisa mengerti, dan bisa untuk mengeditnya sendiri.
Beriku Kodenya tinggal di
DOWNLOAD
setelah itu Agan buka Template => edit HTML lau angan cari kode
]]</b:skin>
dan letakkan kode tersebut tepat diatasnya lalu simpan, jangan lupa pasang widget popular posts nya, kalau tidak dipasang bagaimana mau melihat hasilnya, wkwkwkwk.
Namun jika agan ingin popular post nya menjadi berputar tinggal ditambahin aja kode "
rotate(360deg)
" tanpa tanda kutip tepat didepan semua kode
scale(1.5)
seluruhnya ada tiga.
Contohnya :
.popular-posts ul
li:hover {
border:2px solid #6BB5FF;
background:#000000;
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
-o-transform: scale(1.5) ; -moz-transform: scale(1.5) ;
-webkit-transform: scale(1.5) ;
}
Sehingga menjadi seperti ini :
.popular-posts ul
li:hover {
border:2px solid #6BB5FF;
background:#000000;
-moz-transition:all .8s ease-in-out;
-ms-transition:all .8s ease-in-out;
-o-transition:all .8s ease-in-out;
-webkit-transition:all .8s ease-in-out;
transition:all .8s ease-in-out;
-o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg);
-webkit-transform: scale(1.5) rotate(360deg);
}
oke hanya itu saja yang bisa saya bagikan, kalo ada yang kurang jelas bisa koment dibawah.
Meletakkan sumber saat COPY PASTE berarti anda menghargai hasil karya orang lain
1 comment:
Unknown
said...
izin ambil ilmunya gan,,,,
3 May 2014 at 14:15
Post a Comment
Older Post
Home
Subscribe to:
Post Comments (Atom)
1 comment:
izin ambil ilmunya gan,,,,
Post a Comment