Tutorial : Image Hover 12 (Border)

Assalamualaikum . Tutorial ini pun lebih kurang sama dengan yang tadi . Cuma kali ni , border tu akan keluar sama ada dari kiri atau kanan . Korang boleh buat :)

Blogskin/Classic Template

1. Dashboard > Template

2. Press F3 dan cari code </style>

3. Copy code di bawah ni 

Kiri

img{ background:transparent: box-shadow:inset 0 0px 0px #FCDFFF; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; padding:5px; border:1px solid #FFE8E8; } img:hover{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; box-shadow:inset -600px 0px 1px #FCDFFF;}

Kanan 

img{ background:transparent: box-shadow:inset 0 0px 0px #FCDFFF; -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; padding:5px; border:1px solid #FFE8E8; } img:hover{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; box-shadow:inset 600px 0px 1px #FCDFFF;}

4. Paste code di atas code yang korang cari tadi

5. Preview & save

Template Designer

1. Dashboard > Design > Edit HTML > Tick Expands Widget

2. Press F3 dan cari code ]]></b:skin> 

3. Paste code di atas code yang korang cari tadi

4. Preview & save

Credit to : AtinTory