Untuk tutorial kali ini, sy akan berkongsi cara membuat sexy sliding bar menu. Sexy sgt ke sampai nama pun sexy? Jwpnnya sy pun tdk tahu. haha.. Sidebar ini diberi nama Sexy Sliding Bar Menu. Nak Tahu Seksi ke x seksi cuba lah tgk di sebelah kiri http://syoknyerblogginglist.blogspot.com/
1 Pergi ke Dashboard > Design > Page Elements > Add a Gadget.
2 Masukkan koding dibawah didlam Html/javascript gadget
<script src="https://sites.google.com/site/syoknyerblogging/try/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/syoknyerblogging/try/effects.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/syoknyerblogging/try/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwWq76_vTmE1cWAOd8rJ05F_Ch0Ws_clqWGp0sDLoJk_Y3F0SMfiHoTFYpDKBakYDS_bBTvXUwusgrAPKhAFHSPiv9zW1p_eaRESFrybiXGjXpvA4Jgwu5SuL95gdeN6Wk4vJugZouHcv/s320/left.collapse.border.gif);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2yuoVgaBYEc3x_bUfiknYOd5194_HoKxDmPM7MXJJITxWAaQSQcUMNBk07N6ErS7n3JAuyGNr9dUN0fY7sK9b0OOCv-hJEBfd-_klE3kmSNwdgaSFPUzFJmSDy8Bl_dXV8dmmDBQUo5Ag/s320/sidebarcollapse.gif" title="sideBar" /></a>
</div>
3 Editkan Link 1,2,3 mengikut selera anda sendiri. Dan Save
4 Selamat Mencuba (^^,)
