Tutorial : Sidebar Hover

Sebelum hover

Selepas hover

Nak buat tak sidebar cam tu? jom terus ke step pertama..

1) Log in > Dashboard > Design > Edit Html

2) Search code..

/* Headings

3)Dah jumpa? Copy code ni.. paste kan kod tu di bawah kod yang korang cari tadi...

 .sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar .widget {
background : #ffffff;
border-top: 2px dotted #D0A9F5;
border-bottom: 2px dotted #D0A9F5;
border-left: 2px dotted #D0A9F5;
border-right: 2px dotted #D0A9F5;
margin:0 -5px 2.0em -5px;
padding:10px 10px 10px 10px;
-moz-border-radius: 1em 4em 1em 4em;                
border-radius: 1em 4em 1em 4em;
-webkit-transition-duration: 0.5s;
}
.sidebar .widget:hover {
background : #ffffff;
border-top: 2px dotted #D0A9F5;
border-bottom: 10px solid #D0A9F5;
border-left: 2px dotted #D0A9F5;
border-right: 2px dotted #D0A9F5;
margin:0 -5px 2.0em -5px;
padding:10px 10px 10px 10px;
-moz-border-radius: 1em 4em 1em 4em;                
border-radius: 1em 4em 1em 4em;
-webkit-transition: 0.5s;
}

4) Dah siap? Preview dulu, kalau tak ada error, terus save..

Biru : Warna border
Oren : Warna backgrounde sidebar bila di hover
Merah : Warna background sidebar sebelum di hover
# Boleh cari kod warna di sini