
FANCY SHARE ICONS USING CSS & JQUERY - LIVE DEMO
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.
3. Next, search for the following piece of code.
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!
<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.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>
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!
For Further Reading,
- Displaying total number of posts and comments to blogger
- Add Flash Files to your blogger
- Adding animated GIFs to blogger
- Change color and size of default tag cloud in blogger
- Display More Targeted AdSense Ads on Your Blog
- How to add a Google Picasa Web Album Slideshow
- How to Embed Ad Code Anywhere in Your Blogger Template
- Blogger Comment Posting with Name and URL
- Ad Stripe at Top with blink in blogger blog
- Ads Theme Blogger Template
- How to Earn Six Figure Money from Blogging by Darren Rowse
- Florist - Free WordPress Dating Theme
- Quick Solution to Protect Your Blog From Spam Harvesters
- google wave in blogger?Image based tutorial
0 comments:
Post a Comment