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.

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.