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/
0 comments:
Post a Comment