How To Add ShareThis Floating Sharing Buttons?

Sharing buttons nowadays helps a lot bloggers to have more visitors in their blogs. That's why a lot of sharing widget pop ups in the from somewhere. It is indeed a very helpful widget to all bloggers. But the conventional sharing widget is getting boring that's why some people are making ways to make this kind of widget very special.
Now, the evolution of this widget has come. Hovering or floating sharing widgets are now in. And ShareThis site has made their own version. Below is the screenshot of the Hovering ShareThis Buttons in Beta.





Adding ShareThis Hovering Sharing Buttons

  • Then, customize your hovering buttons in the site. Originally they features Facebook, Twitter,Google Buzz,Linkedin,Email,ShareThis buttons but you can select to use or not all that buttons in the customization.
  • After customizing, you can now get your code. A button is under the the page saying "Get the Code", you just have to click it and then a page will pop-up with the codes in it.
  • The first code is the script tags. You just have to put it anywhere in the "head" section of your blog HTML. Just go on your Dashboard > Design > Edit HTML then find this code: <head>. Then put the script tags directly below the code as I preferred or anywhere under it.
  • The second code is the widget script. Just go on your Dashboard > Design > Page Element then Add Gadget and select HTML/JavaScript. Save it after.

There you go. You now have your Hovering or Floating ShareThis Sharing Buttons. Hope you like this guide. Drop a comment if your having some problems in adding this buttons. ^^


read more "How To Add ShareThis Floating Sharing Buttons?"
2 comments Friday, November 4, 2011 Posted by jai cuizon
Labels: , , ,

How To Add Floating Sharing Buttons On Blogger?

Sharing buttons helps blog to drive more traffic. This will recommend your blog to different social networking sites in the net. The most know is Twitter, Facebook and etc. All the blogs in the net already have this feature in their blog. This is in a form of widget. This is not hard to implement if your thinking to have one your blog. The best thing about this is that it is a floating social media sharing buttons. Meaning whenever your moving the page of the blog, the social media sharing buttons stay still in the place where they are located.




The floating buttons features 6 sharing buttons, namely:
  • Facebook
  • Twitter
  • Stumble Upon
  • Digg
  • Google Buzz
  • Google +1

Adding Floating Sharing Buttons On Blogger
  1. Now go to your Dashboard > Design > Page Element.
  2. Then, Add a Gadget and select HTML/java script.
  3. Copy the script below and paste it on the HTML/java script gadget.
<!-- floating page sharers Start teachblogspot.blogspot.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from ehowportal.blogspot.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" 
href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script 
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" 
src="http://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://ehowportal.blogspot.com/2011/05/how-to-add-floating-social-media.html">Get this</a></div>
</div>
<!-- floating page sharers teachblogspot.blogspot.com -->
     4.  Preview your blog.
     5.  If you have your floating sharing social media buttons working well in the preview then SAVE it.

Now you have your floating social media sharing buttons. Visitors can now +1, dugg, buzz, twit and whatever they call it.

Drop a comment if you have something to say! ^^
read more "How To Add Floating Sharing Buttons On Blogger?"
0 comments Wednesday, November 2, 2011 Posted by jai cuizon
Labels: , , ,
Subscribe to: Posts (Atom)

Related Posts Plugin for WordPress, Blogger...

Recent Post

SPONSOR

Tag Cloud

Blogumulus

Random Posts

Archives