Add Fancy Share Icons To Every Blogger Post

share-icons-blogger
I'm sure everyone runs a social bookmarking widget on their blog. What if we add a little more interactivity & unique style to those icons. This is exactly what we're gonna do in this article! We plan to turn an unordered list of sharing icons into a fancy share box using little CSS & Jquery. The idea is to show the icons partially hidden. When hovered, they slide to the right & become completely visible.

FANCY SHARE ICONS USING CSS & JQUERY - LIVE DEMO

Well, I guess that the demo has impressed you. Before I proceed with the tutorial, I would like to inform you that this particular widget is browser compatible - works on all major browsers. The code was tested on the following major browsers - Firefox 3+, IE 6+, Safari, Chrome & Opera). Enough of the stories! Let's get this installed on our blog.
fancy-share-box-blogger
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your template and search for the following piece of code.
<div class='post-footer-line post-footer-line-1'/>
2. Download the following text document - FANCY SHARE ICONS FOR BLOGGER. Paste the code mentioned in the text document just below the line mentioned at step 1.
3. Next, search for the following piece of code.
]]></b:skin>
4. Replace the above code with  following piece of code.
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute; }
ul.sharebox li a { margin:0 0 0 -24px; display:block; }
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
]]></b:skin>
<script>
$(document).ready(function(){
var i = 10;
var j = 0;
$("ul#sharebox li").each(function() {
$(this).css("z-index", i)
if (j > 0)
$(this).css("left", j * 24 + 100 + "px");
i = i - 1;
j = j + 1;
});
});
</script>
7. That's it. Save your template.

Note: The effect is visible only on the post page, in other words, you need to visit the individual pages on your blog to realize the effect. If you want them to appear on all the pages, then just remove the first and the last line of the coding mentioned at step 2.

I hope you enjoyed this widget. If you wish to add a specific icon apart from the list mentioned in the article, please contact me via email with the icon and your template. We'll try to add them for you provided your template has already got this widget installed! Share your views via comments!

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Widgets, CSS Tricks
tanduaysyndrome said on July 8, 2011 at 1:04 AM :

Just say Hello to all, and offcourse especially to the owner on this blog. what can i say that this blog is very vital it is very helpful in my blog too. :)
do check it
Quick Money

Thank you add comment too :)

REPLY
Mukund said on July 8, 2011 at 10:18 AM :

@tanduaysyndrome: Thanks for the comment! I hope you enjoy the upcoming articles on my blog! Well, I would be happy to see a comment that is related to the article!

REPLY
sidharth.pk said on November 29, 2011 at 10:06 PM :

Great job bro. I have added it on my www.dailyhacks.in

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]