Demo Left Sidebar
Mau Ngeshare apaan nih Sob ane kok bingung ya,, Maklum Lagi banyak kerjaan jadi otak kagak bisa mikir..Mending ane share aja lagi tentang CSS ease-out dan bagimana cara memanfaatkan CSS ease-out buat Ngeslide pada area Sidebar. Kalo yang ini demo pada sidebar sebelah kiri, kodenya dibawah ini Sobat..dan nanti yang nemplok adalah content dari Sidebar Blog Sobat bukan tulisan seperti ini..
Kodenya
.sidebar .widget{
border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
-o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
-o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
width:500px;
margin-left:25px;
border:4px dotted #FF0000;-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
Demo Right Sidebar
Nah kalau yang ini demonya untuk sidebar yang letaknya disebelah kanan..Langsung aja Sobat kodenya dibawah ini, jangan lupa utak atik lagi lo pada kode-kodenya rubah varibel-variabelnya biar tampilannya beda. Biar nanti nemploknya diblog Sobat pada waktu dihover/dicursor posisinya kagak semrawut, utak atik pada kode margin-left:-225px; itulah kode yang membedakan bila sidebarnya terletak disebalah kanan
Kodenya
.sidebar .widget{
border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
-o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
width:500px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
Langkah pemasangannya :border:2px inset #FF0000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
height:250px;
overflow:auto;
-o-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-webkit-transition:all 1s ease-out;
}
.sidebar .widget:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
background:#000 url(http://i1206.photobucket.com/albums/bb455/binkbenk/blogger-2.png)no-repeat center;
font-size:large;
width:500px;
margin-left:-225px;
border:4px dotted #FF0000;-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
- Login ke blog Sobat
- Masuk Rancangan Pilh Edit HTML
- Copy kode diatas dan pastekan diatas kode ]]></b:skin>
- Edit kode-kode yang berwarna biru
- Lalu Simpan
Selamat mencoba
Posted On : 9 Desember 2011 Time : 19.41
