Social Networks play an important role in driving huge traffic to your blogs.Adding an eye catching share bar with floating option can get your readers attention to share it.This Floating Share bar includes three type of social media buttons the first one is Twitter,second is Facebook share and the third one is the newly created social networking site called Google+.Although these sharing buttons are floating so you can also choose to float it left or right of your blog post pages.This widget can only be shown in home pages only.I myself using this widget in my blog so you can see the live demo without navigating to other page.This hack can also be applied on Blogger blogs.I will tell you where to add it in Blogger later but first follow these steps to add it in WordPress.Friday, 20 April 2012
Add Floating Share Bar in WordPress Without Any Plugin
Social Networks play an important role in driving huge traffic to your blogs.Adding an eye catching share bar with floating option can get your readers attention to share it.This Floating Share bar includes three type of social media buttons the first one is Twitter,second is Facebook share and the third one is the newly created social networking site called Google+.Although these sharing buttons are floating so you can also choose to float it left or right of your blog post pages.This widget can only be shown in home pages only.I myself using this widget in my blog so you can see the live demo without navigating to other page.This hack can also be applied on Blogger blogs.I will tell you where to add it in Blogger later but first follow these steps to add it in WordPress.Social Sharing Buttons Below Every Post In Blogger
We often share some valuables with our readers and now we are presenting social sharing buttons present at the bottom of each post.As i already mentioned that nobody can deny the importance of social media to grow up in blogging world.Social media actually gathers more readers to your blog.What your aim is you have to make them to share your post,and sharing is not possible unless you add social media buttons.Adding social media buttons below post title is also a great idea.
How to add this widget – Making it Easy
Follow my simple steps to add this in your blog,
1.Log in to Blogger>Design>Edit HTML.
2.Find this code in your template ]]></b:skin>.Use Ctrl+F to find this code.
3.Add the following code just above ]]></b:skin>,
/*-------Fadein----*/.Fadein img {filter:alpha(opacity=100);opacity: 1.0;border:0;}.Fadein:hover img {filter:alpha(opacity=30);opacity: 0.30;border:0;} |
4.Add the following code just below <data:post.body/>
<b:if cond='data:blog.pageType == "item"'><center><span style='color: rgb(0, 153, 0);'>Thanks for making this possible! Kindly Bookmark and Share it.</span><br/><br/><a class='Fadein' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAkoRHYPXkRXnQbaVZTMIe9ee0k0QCq5tYB0kAX8He_GpnBvTZ5J2VDzxDtk_Znr7uXzmoVGNGjZ5QwxUOBr9bupYBdKPbb_vCGzO3Ke4qvT3DN_0PG77Vhku1ENvIlrUAIUxg7a6r_Cg/s1200/TAG-IT.gif '/></a><!--DIGG--><a class='Fadein' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPb4xvc_oNJK1QSEn5PttIB5UspbVK7J0LvznAnzYdpA73UOkYTMufeI7rXvGwT74pHKEGxW1VCqS4BpTlyfd3XuyJdCVlHYzfY1jG2kXlalLKAmUVrBhvM7zkT-7DswYxNsOJWYX6-Y/s400/Digg.gif '/></a><!--Stumble--><a class='Fadein' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdazN-mdznDnzFsDR9bRoOF3Dle_lCrhzSI2FyozU6F0eOd-JU7rJR5Vo5dBvgGuny-KOx6rwlwqTaDz2BrkoZRKOm8jg5B3Nylw_qbKUvFG_1zrvNtBTzkYnCHxsuZJDfUNTWd-3l0rV/s400/STUMBLE-IT.gif'/></a><!--Facebook--><a class='Fadein' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ib6LX-G_96DZQfMBZbbKavooryKFHj7JE91wNF6dq55UN9htH6h9vpOdvW5e6Ci92HFwMvFWg1mV8vaPi0MFeL-yAYU9udp8E-Nyzg9J00_ZrgpuxTFvqJEyb1gGE2lsdtkzZs-SIyA/s400/facebook.png '/></a><!-- Twitter --><a class='Fadein' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_YDlzPviTG0fU5hOi7uDemHbxp7t3Io_eNIg_DlT3EmLXlnF_xH9NxKGrE5tYO1kizxvIxvuwyfTrZY1n8mdYlm36YaxJ-TMHdH7tcdR9hM_5SwP3WVG5HlCGnJAWFMg5FObRqpO6Deiz/s400/TWEET-IT.gif'/></a></center></b:if> |
Let’s move on to Customization
These are the customization for this widget,
- You can change the color of the text by using desired color.
- Change the default text to whatever you want!
- Change the icons accordingly.
I hope you like this post.If you do please share your views and thoughts via comments,subscribe to get free email updates and directly in your inbox and last but not least please like us on Facebook
Subscribe to:
Posts (Atom)
