Round Hover With Shadow

Hello Peeps!
tutorial hari ni di request oleh seorang akak tomey yang PM dila through fb....
Oke ni contoh effect bagi tutorial ni...

Before

After

1. * Log in > Dashboard > Design > Edit HTML > Tick Expand Widget Templates (utk rupa blog lama)
    * Log in > Template > Edit HTML > Proceed (utk blog berwajah baru)
#maksud rupa blog berwajah baru adalah camni...(blog dila dah berwajah baru)

2. Tekan f3 atau CTRL + F serentak...search code ni

/* Header
3. Bile dah jumpe..Pastekan code bawah ni kat atas code /* Header 



 /*------ 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 #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -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#FF3366; 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. Selesaikan Teka-Teki :
Purple : Warna shadow keliling border gambar....yang kat atas tu warna pink...
kalau nak tukar...Tekan Sini

Okey dah menjadi...komen kat bawah ea..tQ






Tengs For Read

AmerCorner 1st Giveaway

Nak Comic Lawak Kampus? Tekan Banner Untuk Join

Wooo...komik lawak kampus lah....dila memang minat komik ni...dulu dila kumpul komik ni...
tapi skunk dah pokai...tak ley nak kumpul dah...hik...hok...rindunya sama komik ni...
harap-harap dapat yew....

Oke mangsa tag :

Tengs For Read

Tutorial : Buat Gambar Gerak Macam Di Sidebar Dila



Hey Peeps! ada napak tak picture kat atas...Oke! actually ada sorang akak tomey mintak dila
ajarkan wat gambar yang gerak-gerak ni...kalu bahasa blogger dipanggil sebagai "marquee"
Untuk tengok contoh yang lebih ori...tengok kat sidebar dila ea..bawah tajuk "Tuan Tanah"


1.  Log In > Dashboard > Add A Gadget > HTML/Javascript

2. Copy code bawah ni

<div style="background-image: url(&quot;http://dl.glitter-graphics.net/pub/303/303771ob8r4r0z04.png&quot;); border: 3px double #FF3399; height: 250px; overflow: auto; width: 250px;"><center></center>
<marquee onmouseover="this.start()" onmouseout="this.start()" scrollamount="7" direction="up" align="center">
<center><img style="width: 143px; height: 204px;" src="URL GAMBAR" /></center><center><img style="width: 143px; height: 265px;" src="URL GAMBAR" /></center><center><img style="width: 144px; height: 245px;" src="URL GAMBAR" /></center><center><img style="width: 142px; height: 213px;" src="URL GAMBAR" /></center><center><img style="width: 138px; height: 234px;" src="URL GAMBAR" /></center>
</marquee>
<center></center><center></center></div>
3. Pastekan kat HTML/Javascript

Selesaikan Teka-Teki :

Pink Merah : Warna border..Tekan Sini untuk tukar
Biru : Size untuk kotak gambar tu...Korang ley ejas mengikut size kotak sidebar korang
Hijau : Ketebalan border kotak gambar...ley ejas mengikut pilihan korang
Purple : URL gambar yang korang nak masukkan....DOWNLOAD KAT SINI DULU

Oke done! so korang dah ley letak picture comel korang kat blog banyak-banyak...jimat cikit ruang....
dila nak Tag kan tutorial ni kepada akak tomey yang tanya dila camne nak wat gambar gerak-gerak.....dan tutorial ni Credit tu akak Lyssa Tomey




Tengs For Read