Tips To Work: Add an Awesome and Stylish Scrolling Sidebar in Blogger or WordPress

Add an Awesome and Stylish Scrolling Sidebar in Blogger or WordPress

Yesterday, i found a beautiful scrolling sidebar widget that scrolls along the page. That was an interesting functionality and it really enhances the beauty of your blog. You can show useful links or your best posts in this widget. Once you have seen the demo, i am pretty sure you would to have this widget in your blog. This widget can also be used to advertise other links beautifully or can place your social networking links. It works like as if its made in Flash because its really very beautiful and smooth. Here is how you can place it in your blog.

Demo Widget

Visit Demo Link
This will look like this;

How to Add Scrolling Sidebar in Blogger or WordPress

If you are Using Blogspot, go to Dashboard > Design > and click on Add a Widget, select HTML/JavasScript widget.
If you are using WordPress, login in your admin panel, Go to Appearance section, select widgets and choose a text widget in to your sidebar.
Paste this code in your widget;

<script src="https://sites.google.com/site/everythingaboutblogging/Home/prototype.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/everythingaboutblogging/Home/effects.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/everythingaboutblogging/Home/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:#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://i36.tinypic.com/2wejg37.jpg);
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:verdana;">Useful Links</span>
</div></h2>
<ul>
<li><a href="#">Your Link 1</a></li>
<li><a href="#">Your Link 2</a></li>
<li><a href="#">Your Link 3</a></li>
<li><a href="#">Your Link 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i38.tinypic.com/260g2g9.gif" title="sideBar"/></a>
</div>

Make Necessary changes in the code such as replacing links etc
That's it !

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)