Add Blogger Sidebar Into Your Blogger Blog

Sidebar For Blog Or Website

Sidebar use for linking important and famous article with a link. You have to do this by html on your gadget. There are many types of sidebar.

blogger-sidebar-review

I will give you a sidebar ,which made by html, css and javascript with some png file. How I made this is not a fact to you. How you use this is a fact for you. I am going to tell you step by step how you use this. But keep in mind that , only use great and important post for linking on sidebar. This helps the reader to find out most important article easily.

How You Set Blogger Sidebar

For set blogger sidebar on your blogger blog, you have to go to your blogger dashboard . Than go to blogger layout . From blogger layout select the “HTML/Javascript” gadget. Open this gadget and copy – paste the following code into it. Don’t use any title for the gadget.

<script src="http://h2cweb.net/demo/blogger/slide/prototype.js" type="text/javascript"></script>
<script src="http://h2cweb.net/demo/blogger/slide/effects.js" type="text/javascript"></script>
<script src="http://h2cweb.net/demo/blogger/slide/side-bar.js" type="text/javascript"></script>
<a href="http://h2cweb.net/" rel="dofollow" target="_blank" title="Grab this"><img src="http://h2cweb.net/demo/blogger/slide/h2cweb.png" alt="How to create a website and how to design it. Top 10 cms website tutorial." border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://h2cweb.net/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="http://h2cweb.net/demo/blogger/slide/h2cweb.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://h2cweb.net/" rel="dofollow" target="_blank" title="Free"><img src="http://h2cweb.net/demo/blogger/slide/h2cweb.png" alt="How to create website" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<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://h2cweb.net/demo/blogger/slide/left.collapse.border.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>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>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://h2cweb.net/demo/blogger/slide/sidebarcollapse.png" title="sideBar" /></a>
</div>

Now just save this gadget.

blogger-sidebar

Now , you have to work with your gadget. Find out the following code on your gadget, generally this code will be placed under.

<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>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
</ul>

You can see that Link One , Link Two ——- Link Eight. You have to put the link of your article by replacing # mark and your link title by replacing this Link Number.  You can add more link if you know how to use HTML list . Use this blogger sidebar for reader of your blog. SO that , they can find their necessary article by this blogger sidebar .

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.