Go4Expert

Go4Expert (http://www.go4expert.com/)
-   Web Design, HTML And CSS Tutorials (http://www.go4expert.com/articles/web-design/)
-   -   How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting (http://www.go4expert.com/articles/add-sticky-social-icons-whitespace-t23347/)

shabbir 18Sep2010 17:45

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.

http://i.g4estatic.com/misc/fb.png http://i.g4estatic.com/misc/twi.png http://i.g4estatic.com/misc/rss.png

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!!!

Full Zip Hoody 30Sep2010 01:20

Re: How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting
 
looks nice, i wonder if i can implement it in wordpress

shabbir 4Oct2010 10:21

Re: How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting
 
If you liked this article do nominate this article for Article of the month - Sep 2010 Before 15th of October 2010.

seoguru 9Oct2010 15:28

Re: How to Add Sticky Social Icons In the Whitespace Sidebar Without Any Scripting
 
thanks for sheering with us this information


All times are GMT +5.5. The time now is 00:26.