Today,I am going to show you how you can create a Fixed Sidebar or should i say a Pinbar that remains even when you are scrolling down. Like the one that appears on my blog.So,lets start with the HTML
HTML Code:
<html>
<head>
</head>
<body>
<p>Follow Us</p>
<ul id="social_side_links">
<li><img src="digg.png" href="#" /> </li>
<li><img src="fb.png" href="#" /></li>
<li><img src="twitter.png" href="#" /></li>
</ul>
</body>
</html>
Now if you don't own a website and use Blogger like me. Then you should go to AddThis and signup there if you are not registered. Get the code from from follow Tools tab. and just paste it under <ul> tag and in place of <li> tags.
Now lets go to the CSS.
CSS Code :
<style type="text/css">
#social_side_links {
position: fixed;
top: 90px;
left: 0;
padding: 5px;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #111 ), color-stop( 50%, #444 ), color-
stop( 50%, #333 ));
background: -webkit-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -moz-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -ms-linear-gradient(#555, #444 50%, #333 50%, #111);
background: -o-linear-gradient(#555, #444 50%, #333 50%, #111);
background: linear-gradient(#555, #444 50%, #333 50%, #111);
border-width: 2px 2px 2px 0;
border-style: solid;
border-color: #777 #888 #999;
-webkit-border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-box-shadow: #888 7px 0 10px -5px;
-moz-box-shadow: #888 7px 0 10px -5px;
-o-box-shadow: #888 7px 0 10px -5px;
box-shadow: #888 7px 0 10px -5px;
}
p{font-size:25px;font-family:arial,helvetica,sans-serif;}
</style>
Well it might look like a lot of code for a simple work however it is actually simple in reality.
Iam using gradients for the background. you may use some online tools to generate the gradient if you don't know how to make the CSS gradient.
Border-radius is used to give curvy corners as i have shown in my previous post How to create rounded corners Using CSS .
Box-shadow is one of the best features of CSS3 and is used to give a shadow effect to the box. I'll show you the syntax to make the usage clear
Syntax :Box-shadow:color x-offset y-offset blureffect
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.Which is the fourth value in our example.
Apart from giving a follow us sidebar , you can also use it to make an always appearing Sidebar menu for easy navigation.
