Official Tutobies Blog by Aimi Rahim

ENTRY ABOUT LINKS TUTO F'BOOK TWITTER BLOG +1 NEWER OLDER +FOLLOW

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

0 Comment[s] |