Minggu, 15 Januari 2012

cara buat hover sidebar seperti blog gue

1. Login akun Blogger anda.
2. Klik edit html
3.coba ctrl+f cari /* sidebar */
4.letakkan kode dibawah pada akhir kode /* sidebar */ yg sudah ada, hanya saja di tambahkan

CONTOH GAMBAR 





/* Sidebar */
.sidebar{padding:0; margin:0}
.sidebar h2{ opacity:0.9; background:none; border:1px solid none;-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; margin-bottom:2px; padding:8px 10px 10px 10px; color:none; font-family:'Molengo',Trebuchet MS,Serif; font-size:20px; transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg); font-weight:bold}
.sidebar h2:hover{transform:rotate(-3deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
.sidebar ul{margin:0; padding:0}
.sidebar li{list-style:none; padding:4px 0; line-height:1.4em; margin:0; border-bottom:1px dashed none;}
.sidebar .widget{ opacity: 0.7; margin-bottom:10px; padding:0}
.sidebar .widget-content{ background:none; border:1px solid red; border-radius:8px; margin:0; padding:10px}
.main .Blog{border-bottom-width:0}




#sidebar-wrapper {





float:none;
width:nonepx;

padding:0px 0px 0px 0px;
display:inline;
overflow:hidden;
margin-right:0px;
}
.sidebar h2 {text-align:center;text-decoration:blink ;
font-family: reenie Beanie;
height:none px;
line-height:none px;
color:GOLD;
text-shadow:2px 2px 1px red;
font-size:20px;
padding-center:none px;
font-weight:bold;
background:url("http://top10hackingfacebooksofware.xtgem.com/imgjqurypropil/ok3-1.gif")no-repeat scroll 0 0 TRANSPARENT ;

box-shadow:-3px -3px 3px #666,3px 3px 3px #666,3px 3px 20px #33F; -moz-box-shadow:-2px -2px 2px #666,2px 2px 12px #666,2px 2px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;

border:none px solid #F7BE81;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
margin-bottom:6px;
}
.sidebar h2:hover{
font-family: IM Fell English,arial,serif;
font-size:20px;
color:RED;
text-shadow:2px 2px 2px WHITE;
font-weight:bold;
background:url(http://i1213.photobucket.com/albums/cc466/say_love1/Colorful-15.gif)repeat scroll 0 0 TRANSPARENT ;

box-shadow:-3px -3px 3px #666,3px 3px 3px #666,3px 3px 20px #33F; -moz-box-shadow:-2px -2px 2px #666,2px 2px 12px #666,2px 2px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;













border:2px solid gold;
border-shadow:2px 2px 1px red;
}
.sidebar .widget {


border: 3px solid GOLD;
-moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-2px -2px 2px #666,1px 1px 1px #666,1px 1px 10px #FF4500; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #FF4500; -webkit-box-shadow:-2px -2px 3px #666,1px 1px 1px #666,1px 1px 10px #FF4500; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;







color:red;
width:none px;
margin:15px 0px 0px 0px;
list-style:none;
}
.sidebar .widget-content {

padding: 11px 10px;
margin:0; opacity:1.0;
background:url("http://i1119.photobucket.com/albums/k637/King771/KING7.gif") repeat scroll 0 0 TRANSPARENT; background-position:bottom left;
border-radius:10px;
border:none px solid purple;
margin-bottom:20px;
padding: 10px 10px 10px 10px;
-moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-3px -3px 3px #666,3px 3px 3px #666,3px 3px 20px #33F; -moz-box-shadow:-2px -2px 2px #666,2px 2px 12px #666,2px 2px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out}
.sidebar .widget-content:hover {

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ4A27r-lJDXoKUz8Yv6X1IBzFLuxz77xtm3v6k44E6cTdIkzo1Wmf2s7UgTaeRcSAuUIlJKLMm8q_edKJHp_SZAgCSpuHsBaJKBr95NTMYxLjjvglZC7_UZfBcwyoTyw2HtAHGEdvj9mr/s1600/api.gif") no-repeat scroll 0 0 #000; background-position:bottom left;

background-position:bottom left}
.sidebar ul {
list-style-type: ;
margin: 0 5px ;
padding: 0;
}
.sidebar li  {
background:url(http://i634.photobucket.com/albums/uu61/adetea/link_arrow_thumb1.png) no-repeat left;
color:blue;
text-decoration: RED;
padding: 0px 0px 0px 10px;
display:block;
border-bottom:none px solid grey ;
list-style-type:;
line-height:28px;
font-family: IM Fell English,arial,serif;
font-size:15px;
}
.sidebar li a:link, .sidebar li a:visited {
color:GOLD;
}
.sidebar li a:hover {text-decoration:blink ;
color: pink;
text-decoration:blink;
}


5.Tinggal simpan deh.



NB: YG WARNA MERAH KODE SIDEBAR AWAL BLOG
        DAN YG BIRU KODE YG DIMBAHKAN .

0 komentar:

Posting Komentar