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

shabbir's Avatar author of How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting
This is an article on How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting in Web Design, HTML And CSS Tutorials.
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 Code:
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 Code:
<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!!!
0
Full Zip Hoody's Avatar, Join Date: Sep 2010
Go4Expert Member
looks nice, i wonder if i can implement it in wordpress
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.
0
seoguru's Avatar
Banned
thanks for sheering with us this information