How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting

Sticky Social Icons (or even Feedback buttons) in the side whitespace is one of the cool things among bloggers these days and there are lot of great plug-ins available that can get you done this in few clicks. The only thing I did not like about those plug-ins is they did it using jQuery and for such simple functionality I did not prefer to overload my page with jQuery.

So I was left to experiment myself and was able to get exactly the same functionality with only plain HTML and CSS.

First the Graphics. I was not able to find the right kind of icons for this and so had to go my designer to get me the icons for it. I liked the graphics so much that I started using them here on Go4Expert.com as well and now you can use them too.



Before the CSS code check out the working sample on my Make Money Online Blog.

HTML:

div#followbuttons {
	top:250px;
	border:0px;
	position:fixed;
	z-index: 1000;
	right:-2px;
	width:35px;
}
div#followbuttons a  {
	float:right;
	border:0px;
}
div#followbuttons a:hover {
	float:left;
}

I have kept the absolute position of the icon box as 250px from top and you can change accordingly. An important point to note is that width of the followbuttons box is kept as 35px i.e. 3 pixels more than the image dimension of 32 px to have functionality of sliding on mouse hover.

Finally the HTML. Pretty Straight forward.

HTML:

<div id="followbuttons">
<a href="http://twitter.com/shabbirbhimani" target="_blank" rel="nofollow"><img src="http://i.g4estatic.com/misc/twi.png" border="0" /></a><br />
<a href="http://www.facebook.com/shabbirbhimani" target="_blank" rel="nofollow"><img src="http://i.g4estatic.com/misc/fb.png" border="0" /></a><br />
<a href="http://feeds.feedburner.com/ciw" target="_blank" rel="nofollow"><img src="http://i.g4estatic.com/misc/rss.png" border="0" /></a>
</div>

You need to change the final destination URLs or else you will be asking your users to follow me. Apart from that if you have downloaded the graphics don't forget to change the image URLs.

Enjoy!!!

 

If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.