Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, January 18, 2011

Blogger Floating Icons

This one is a request from blog reader RaindropSoup. She wants to know if the concepts used in 'Blogger Christmas Banner' and 'Blogger New Year Banner' tutorials can be extended to work with three or four images, all at one side, with links. Well, you almost certainly can. The concept remains the same. You just have to wrap your individual images in div tags to force line breaks among them. Let' cut to the chase.



Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for </head> - Paste the following directly below </head>:
<!--SS Floating Icons Starts-->
<div id='ssfloatingicons'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons{
position: fixed;
top: 100px;
right: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
If you want it to be on the left, use this instead:
<!--SS Floating Icons Starts-->
<div id='ssfloatingicons2'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons2{
position: fixed;
top: 100px;
left: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
The code in place (starting portion):



Step 2:

Now that you have added the sample icons to your blog, all you have to do is modify the links and replace the images that I have used with that of yours. In the code above, I have used four social media icons. You can get fancier social media icons if you Google for 'Social Media Icons' or something to that effect. Once you've gotten your set of icons, upload it somewhere (yes you can upload these icons to one of your posts) and get it's direct link (if you upload to one of your posts, click on Edit HTML to see its direct link).

Once you have the direct links of your icons, just insert them into the code. Also, modify the link to reflect the target link that you want the browser to open when the icon is clicked:
<div>
<a href="INSERT_YOUR_TARGET_LINK_HERE" target="_blank">
<img src="INSERT_DIRECT_LINK_TO_YOUR_ICON_HERE" />
</a></div>
If you want to add more than four images, just duplicate the skeleton above appropriately.

Step 3:

You have inserted the icons to your blog, and you have customized the icons and their links. There isn't anything left for you to do. If you're unhappy with the vertical positions of the icons, or if the icons are placed too near to the side of your blog, you can adjust this by adjusting the value top (line 23) and padding (line 25) in the code.

That will be all. Have fun.

39 comments:

  1. Blog-Saint Yoboy rules again! Thanks, it worked (of course). And it was easy too (as always, you made it that way). I made the images, and that was the most time consuming.

    FYI to everyone else: Save the images as a .png file, that is...if you make your buttons and want the transparent background. (I didn't know that.)

    You can see the final product on my site http://www.theluvnv.com.

    Thank you again, Blog-Saint Yoboy. ~RSoup ;)

    ReplyDelete
  2. @RaindropSoup: Glad it worked. And looking good there. Nice set of images, the time taken to create them is definitely worth it.

    I'm not sure about PNG images, but if given the option, always use GIF format if you want to have images with transparent background. Actually, the format alone won't decide if the image is transparent.

    Regards.

    ReplyDelete
  3. very2 easy. it worked on my machine..
    yeah youre professional

    ReplyDelete
  4. @Anonymous: Glad it worked. Enjoy your stay here. Cheers.

    ReplyDelete
  5. @DAB: Don't mention it. Cheers and God bless.

    ReplyDelete
  6. it appears this when i try to save.

    Your template is invalid because the tag 'div' appears inside of the tag 'head'.

    ReplyDelete
  7. @Sabrina: Something must be wrong in your template. Get in touch with me using the contact form, and I will try to help you out.

    ReplyDelete
  8. I Have A question...everything is working perfectly but im trying to add a hover image effect over the buttons to give them some definition, but can't figure out the code to do it with?

    ReplyDelete
  9. Bro what html code do I use to add a hover image over the buttons to give them that pop?

    ReplyDelete
  10. @P3: To add hover effect we have to completely re-haul the code above. Hover doesn't work with HTML, or at least I don't know how to do it with HTML. But I know a trick with CSS that will work. But here's the thing. If you want the CSS hover trick to work, your image cannot be an <img> element. It must be a background. That's why we need to completely change the code above. I've changed it though. Same steps, different code, add it, you'll see a different image when you hover:

    <!--SS Floating Icons Starts-->
    <div id='ssfloatingicons'>
    <div><a href='http://facebook.com'><div class='customtabs' id='tab1'/></a></div>
    <div><a href='http://www.flickr.com/photos/yoboy2'><div class='customtabs' id='tab2'/></a></div>
    <div><a href='http://feeds.feedburner.com/voicesfromsouth'><div class='customtabs' id='tab3'/></a></div>
    <div><a href='http://twitter.com'><div class='customtabs' id='tab4'/></a></div>
    </div>
    <style>
    #ssfloatingicons{
    position: fixed;
    top: 100px;
    right: 0;
    padding: 5px;
    z-index: 10;
    }
    .customtabs{
    width: 64px;
    height: 64px;
    display: block;
    padding-bottom: 5px;
    }

    #tab1{
    background: url(&quot;http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png&quot;) no-repeat;
    }
    #tab1:hover{
    background: url(&quot;http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png&quot;) no-repeat;
    }

    #tab2{
    background: url(&quot;http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png&quot;) no-repeat;
    }
    #tab2:hover{
    background: url(&quot;http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png&quot;) no-repeat;
    }

    #tab3{
    background: url(&quot;http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png&quot;) no-repeat;
    }
    #tab3:hover{
    background: url(&quot;http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png&quot;) no-repeat;
    }

    #tab4{
    background: url(&quot;http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png&quot;) no-repeat;
    }
    #tab4:hover{
    background: url(&quot;http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png&quot;) no-repeat;
    }
    </style>
    <!--SS Floating Icons Ends-->

    To change the images, change the image links under #tab1, #tab1:hover, #tab2, #tab2:hover, #tab3, #tab3:hover, #tab4, and #tab4:hover.

    You also need to change the width and height from 64px image to that of your image. Good luck.

    ReplyDelete
  11. Bro your the best, it works great, but how can I make them not scroll with the page, and turn them horizontal instead of vertical?

    ReplyDelete
  12. @P3: You need to place the images in HTML table if you want them horizontal. And to make them stay at a place, change 'position: fixed;' to 'position: relative;'.

    Cheers.

    ReplyDelete
  13. Is there any way to do this social icons thing side by side with separate links in the sidebar? What I am trying to say is in is it possible to make a single image with the three icons (lets say of Facebook, twitter and pinterest) have these icons side by side but separate the links so that the facebook icon goes to facebook, the twitter icon goes to twitter and so on... I am trying to see if maybe what I have to do is obtain the html of my image but I do not know how...

    ReplyDelete
    Replies
    1. Well, to answer your question, yes it is possible. But not easily possible. You're gonna have to use HTML Image mapping to separate the 3 links. I never published any tutorials on that before because I find it hard to explain. Google for HTML Image Map and see if you can get this figured. But the easiest way would be to use 3 separate images and place them in a row. If you've got your 3 images uploaded, let me know the links and I'll put them in a row for you.

      Delete
  14. How would I be able to put them side by side on a blogger sidebar? The sidebar allows for the gadgets to be one on top of the other or vertical instead of horizontal. Pls let me know, I will be searching for HTML image map.

    ReplyDelete
    Replies
    1. You're gonna need to use a HTML/Javascript gadget. The trick is to replace the 'div' tags in the code above with 'span' tags. If that doesn't work, we can try tables. Let me know if you need specific code help.

      Delete
  15. Alright this is turning a bit harder than I thought. I had found an html image editor some time ago and had been able to create a working map and insert it into a javascript gadget on blogger. Just yesterday the gadget is not visible anymore in my page...:/

    ReplyDelete
  16. hi,
    I'm using dynamic template I want to use this floating icons for my blog how can I?

    ReplyDelete
    Replies
    1. Hi Jaya,

      It isn't a good idea, since Dynamic View templates are dynamic in nature - adding anything static to your template could mess up the cosmetic aspect of your blog.

      But if you really want to add it to your blog, go to your homepage, and edit your newest post. Switch to 'HTML' mode (as opposed to compose mode), and paste the code in there.. You need to make sure that this code always reside in your latest post.. In other words, the next time you publish a newer post, you need to transfer the code that you've inserted before, to your newest post..

      Delete
  17. Great info. I was curious how you effect the padding on an individual button (i.e., the other buttons are inline, however, I cannot one of the buttons to line up as intended). Thank for the help!

    ReplyDelete
    Replies
    1. Hi Anon,

      I'm gonna have to see and inspect this one button that you're referring to. What's your blog's address?

      Delete
  18. Replies
    1. Yeap, unfortunately, lots of things are not supported in Dynamic Views..

      Delete
  19. Oh my!!! This is one of the bests things I found for blogger,and it works, thank you!

    ReplyDelete
  20. Yoga...can i have a favour from you??? i have added floating fb like button in my blogspot site...But when some one click in any part of page it will be automatically like my page but now it is not happening....it is asking for permission of user and want to know whether he or she want to like this tab..how can i solve it???

    my blog:http://worldnowbd.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Shuvo,

      I've just seen your site and I don't see the floating FB button. What am I missing?

      Delete
  21. Thank you for your easy and clear tutor. It works well on my blog but can you show me how to add more space between the icons, please? Thank you!

    ReplyDelete
  22. Hello!
    I have floating icons on my website and I was trying to make them have a transparent background. Could you please help me? Thank you!

    ReplyDelete
    Replies
    1. Hello there,

      Granted icons themselves are transparent, this should serve well:

      .addthis_toolbox{
      background: transparent !important;
      }

      Delete
  23. Hey Yoga, somehow it isn't showing in my blog. I tried both the left and the right ones. It just comes for a second while the site is loading and then it disappears again. I have been using your other tweaks also, all worked like a charm. Please help me in this. By the way thanks dude, you are a genius. Cheers.

    my blog is www.examinsights.in

    ReplyDelete
    Replies
    1. Hi Abhiroop,

      You're using a Dynamic template. The tweak above wont work in a Dynamic template, unfortunately.

      Delete
  24. Is there any other way to do that in a dynamic views template? And could you possibly guide me on how to include rss feeds in my site. I want to include rss feeds in the left side of the site.
    By the way, thanks Yoga.

    ReplyDelete
    Replies
    1. Dynamic View templates are not custimisation-friendly. You might be able to get floating icons with some scripts, but scripts won't load all the time, and it might break your template off at one point. The same goes for RSS feed gadget, or any other customer gadgets, unfortunately.

      Delete
  25. You are amazing Yoga! My Floating Icons are not working because I have pages redirected as topics. Uggghhh help

    www.readkidstruth.com

    ReplyDelete
    Replies
    1. Hey KTMaude, I see you're using a Dynamic template. I'm afraid the floating icons were not meant to use with templates of this nature.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.