How to set up a side menu on your blog

Now I will show you how to set up a side bar on your blog. It's very easy.
For this sing in your blog and go to design and Add Gadget >HTML/Javascript
Now copy the code below and paste it to your gadget.

<script src="http://sites.google.com/site/banglahacks/shrd/prototype.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/banglahacks/shrd/effects.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/banglahacks/shrd/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(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAuk5iEkPHYpnccnGkTkiQwqn9hdHH0AeRCt-GzRON09ZukAT21E_JvLlfvtMMIPeBQnMKsDw4J-38hgnZMO4yQaje49fTRb_hljdogVXkieHXq5rAAew4H5FNwDvRcaTjnKTH3Dy7ymj/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/AVvXsEilPdL1lIlqEI_DTd7h0JbcRDVTldJa3xMqjDOP4E6jA4eFBNvcF_wEU3qPzcRu1xkqSvT2bsx87N3zw7OtH7Pn6HH_kxBnrOdE3rgEGsCfsz_qC-LsjodLHKfQv5fnnRJwZhEVvV1A5Vd5/s320/sidebarcollapse.gif" title="sideBar" /></a>

</div>

Costomization :

Link : Here I use four link. If you want you can use five or ten link .

Align : I use left align for the side menu. You can use right.

Thank you for read the full post . ☺☺☺☺

from : http://techtunes.com.bd/