1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Web Design, HTML And CSS' started by shabbir, Sep 18, 2010.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,293
    Likes Received:
    365
    Trophy Points:
    83
    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.

    [​IMG] [​IMG] [​IMG]

    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!!!
     
  2. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    looks nice, i wonder if i can implement it in wordpress
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,293
    Likes Received:
    365
    Trophy Points:
    83
  4. seoguru

    seoguru New Member

    Joined:
    Oct 6, 2010
    Messages:
    19
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    http://www.seofleet.com
    thanks for sheering with us this information
     

Share This Page