Skip to main content

Tutorial gambar timbul bila cursor sentuh

ada request la pulak daripada blogger yang tak dikenali..saya tak dapat tengok blog dia coz dia tak tinggalkan link dia..apa2 dah orang request tuto kenalah tunaikan...


tak mau cakap panjang lebar...JOM kita mulakan tutorial

1)dashboard>design>edit html>tick expand widget
2)tekan ctrl+F untuk memudahkan pencarian.cari kod dibawah nie
/* Header
 3)dah jumpa ke belum??kalau dah jumpa copy kod dibawah dan paste diatas kod yang dicari tadi
/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=100);
-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #ff0080;
padding: 0px;
}
4)save la dulu kalau takut try preview tapi kalau preview kadang2 tak menunjukkan hasilnya

*edit
-merah tu untuk warna yang disukai..boleh cari dekat SINI
-pink untuk jenis border contohnya kalau tak suka dotted boleh tukar kepada solid,dashed


selamat mencuba!

kredit to:wan hazel

Comments

_iezrah! said…
salam.. sy da cube buat. jadi. :) tq! puas sy cr.. akhirnye temui kat sini.. gembira!
21 July 2011 at 11:15
Yang said…
Salam , kenapa blank eh ? doesn't get any result of this tuto :/
29 December 2011 at 02:50
Post a Comment

Popular posts from this blog

freebies header part2

asyik bagi orang freebies header cantik2 tapi header sendiri tak cantik..saya tau la kenapa setiap kali buat header untuk diri saya tak cantik..T_T...ok la malas nak cakap banyak,saya kasi korang.. pastikan kredit saya ye..kalau tak mau kredit siap!hahaha cara nak ambik: -klik gambar -klik right klik dan save image as *maaf tak berapa nak cantik =)
8 comments
read more

tutorial hover scrollbar

title:tutorial hover scrollbar request from: Hanis Sakinah .......................................................................................... assalamualaikum dan salam sejahtera..hari ini saya nak ajar kawan-kawan buat hover scroll..bagi yang dah tahu sila abaikan..nak tahu macam mana hover scrollbar tu?sila sentuh cursor kawan-kawan di scrollbar saya=).ok dah..jom kita mulakan sesi pembelajaran kita..v(*_*) 1)dashbord>design>edit html 2)search code   ]]></b:skin> 3) bila dah jumpa code tu,sila copy code di bawah dan paste atas  ]]></b:skin> ::-webkit-scrollbar { height:12px; width: 10px; background-image:url( url bckgrd ); } ::-webkit-scrollbar-thumb { background-image:url( url bckgrd ); -moz-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar:hover { background-image:url( url bckgrd ); } ::-webkit-scrollbar-thumb:hover { background-image:url( url bckgrd ); -moz-border-radius: 10px; border-radius: 10px; } *url ba...
1 comment
read more

freebies background part 4

assalamualaikum w.b.t.. nak bagi background dekat korang nie.. ambik lah jangan tak ambik tapi mesti mau kredit..kalo tak lawa cakap\jadi orang yg jujur/ Flower cute background https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNLEkawfQDwiUWupO4wP6ft-6tok_8uPgWQW2NaOvvQPzxA3kJR972kDhP4Hl9QRi6x7BDhOOhJL0Gi8gGP-MeaiCjAjojLKzGkJmrDJOFXgRf7fITOCMGOi4WKd_vDUxy5HH8032gDhV/s1600/polkadot-crop.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqeiNPZVq1fEczqo8y6HqV_1UAuIGVNYpNrhovIML9GXyEX-fhK5VaT7Rzm7Jrl6WZJM7ll7w95WjYA8NdXjV5iUxs7wdh4197XvOhHBqHu3YFh4gQzk-7IwvwCspJm4Jf4iUM74Rv0A9D/s1600/polkadot-crop+purple.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicb9FvTFnNJKXjOqDJ8G-neMypMsN4Cotr7T1coMIZIUOie03jwtMp5k3b6M8RpU9VCHm5byrGWbm59911yZsFh5_GnNGdN0F993kcLm8rKQaBaoLorQjFhMQ3VaQPvK4hj3AgCqnSJ4T0/s1600/polkadot-crop+blue.png https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpiDdjq_KVHSN0AA7ZiDCT6yjCvXYWcKpIse7Vyv3NuowlhjvkRyKYvriIa4bkSPZ...
Post a Comment
read more