Feature Label 3

» » How To Add Floating Social Media (Google +1, Facebook, Twitter, Digg, Stumbleupon) Buttons On Blogger

0 Feb 26, 2016
UPDATE: I Have Released Updated The Version Of this widget you can get it from here.
Add Pop Out Social Bookmarking Widget with Smooth Jquery Hover Effect.
Why do we need these social media Facebook, Twitter, Google +1, Digg, StumbleUpon buttons? Social media is a great way to drive more traffic to your sites. Get these buttons means that you will have a better chance to make your site become popular.


In this tutorial I will show you the way to add floating these buttons to your blogger. All you need to do is following these simple steps:

1. Go to Dashboard>Design>Edit HTML and search for <head>
2. Paste this code just below it and save your template. Note: Google +1 button only works when you disable default share buttons in "Blog Posts" widget

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

3. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript

4. Paste this code inside it

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style>
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>

<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>

<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>

<div class="addbuttons"><a href="http://www.blogtipsntricks.com/2011/07/how-to-add-floating-social-media-google.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div>

5. Save your widget, refresh your blog. Now you can see the widget.

 <==The left sidebar of this page is an illustration
Posted by

Post a Comment

0 comments

Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you.