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

Sujan Chakraborty February 26, 2016 Education Guideline Leave a comment 3 Views

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=’faceboo
k’><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

Tags

About Sujan Chakraborty

Leave a Reply

Your email address will not be published. Required fields are marked *