Saturday, September 8, 2012

Make Floating Social Bar For Blogger Blog

Author: Gagan Masoun
Make Floating Social Bar For Blogger Blog
I have write many tutorials for floating social sharing bars.Social sharing buttons are compulsory widget for every blog.Because, these buttons can help you to get traffic from social networking websites.You can create floating widget automatically with the help of AddThis.But, I am sharing customized floating social bar widget for blogger blog.

This widget contains Google+, Facebook, Twitter, MySpace, LinkEdin, YouTube & RSS buttons.This is different and unique style from all other social sharing widgets.Let's start the tutorial.

You May Like to Read:
Floating Social Bar For Blogger Blog


Live Demo

Make Floating Social Bar For Blogger Blog


Note: Please make back up for your blogger template before make any changes.
  • Go to Blogger Dashboard > Template > Edit HTML > Proceed
  • Press (Ctrl + F) & Search Below Code
<body>
  • Copy Given Code & Paste Just Below/Under <body> 
<!--BlogsDaddy_SocialSharing-->
<style type='text/css'>
.stickysocial {
background: transparent;
position: fixed;
top: 35%;
left: 0.25%;
z-index: 100;
vertical-align: bottom;
width: 37px;
text-align: center;
}
.stickysocial a:hover {
opacity: .73;
-moz-opacity: .73;
filter: alpha(opacity=73);
}
</style>
<div class='stickysocial' id='stickysocial_dock'>
<a href='https://plus.google.com/u/0/106217413057730068740' target='_blank' title='Follow us on Google+'><img alt='Google+' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-google.png' style='position:relative; width:37px'/></a>
<a href='http://www.facebook.com/BlogsDaddy' target='_blank' title='Follow us on Facebook'><img alt='Facebook' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-facebook.png' style='position:relative; width:37px'/></a>
<a href='http://twitter.com/BlogsDaddy' target='_blank' title='Follow us on Twitter'><img alt='Twitter' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-twitter.png' style='position:relative; width:37px'/></a>
<a href='http://www.myspace.com/gagandeepsingh5911' target='_blank' title='Follow us on MySpace'><img alt='MySpace' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-myspace.png' style='position:relative; width:37px'/></a>
<a href='http://feeds.feedburner.com/BlogsDaddy' target='_blank' title='RSS'><img alt='SC' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-rss-feed.png' style='position:relative; width:37px'/></a>
</div>
See Also: How To Add Slide Out Floating Sharing Buttons For Blogger Blog 

 Remember Notes

  • Change Yellow Highlighted URL's With Your Own Social Profile URL's
  • Red Highlighted Code For Top and Left Position, If You Want This Widget On Right Then Change Left to Right
If you still face any problem regarding this widget, I am always ready to help you via mails. Even comments below the post will do!!

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

0 comments:

Post a Comment