ZOOPY..open house: Blogger code 3 : sidebar

Wednesday 7 March 2012

Blogger code 3 : sidebar

Go to "Design->Edit HTML

backup of your template

Search for

<body>

put in the blow body

copy this script

(rename in the bold Text with your and change the symbol # = with you link url ),

<script type="text/javascript"></script>

<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
    color:#FFFFFF;
    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 10px 3px 10px;
    padding:2px;
    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:0px;
    width:100%;
}
#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
#sideBar{
    position: fixed;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(http://your image location in format:.jpg:jpeg:png);
    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><div style="text-align: justify;"><span style="font-family:Arial;">Useful Links</span>
</div></h2>
                    <ul>
                <li><a href="#">Put Your Link here 1</a></li>
                <li><a href="#">Put Your Link here 2</a></li>
                <li><a href="#">Put Your Link here 3</a></li>
                <li><a href="#">Put Your Link here 4</a></li>
                  </ul>
                </div> </div>
    <a id="sideBarTab" href="#"><img alt="sideBar" src="http://where your pic store" title="sideBar"/></a>
</div>

Save your template and view your blog
...............................just it

notes if you need converter(to PHP,ASP,JS,SP,Perl you cam see our page Zoopy, or see in th top of this blog.. Zoopy..developer..etc

<<<Code 2 | Code4>>>

0 komentar:

Post a Comment

thank your for your comment

Subscribe to: Post Comments (Atom)