Add Floating Share Buttons Widget For Blogger Blogspot

This widget will allow your visitors to share your blog posts on social networks such as google+, facebook, twitter ...

The design is very attractive widget with animation from top to bottom and encourages readers to share your article easily by clicking on one of these buttons.
we spend now to install this widget

Go To Blogger > Design

Choose a HTML/JavaScript widget

Paste the following code inside it,

<style>

/*-------All Blogger Tools------------*/

#floatdiv {

position:absolute;

width:94px;

height:229px;

top:0;

left:0;

z-index:100

}

#mbtsidebar {

border:1px solid #ddd;

padding-left:5px;

position:relative;

height:220px;

width:55px;

margin:0 0 0 5px;

}

</style>

<div id="floatdiv">

<div id="mbtsidebar">

<table cellpadding="1px" cellspacing="0">

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>

</td>

</tr>

<tr>

<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">

<g:plusone size="Tall" expr:href="data:post.url">

</g:plusone></td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="allbloggertool1">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>

</tr>

<tr>

<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">

<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://all-blogger-tools.blogspot.com/" target="_blank">Widgets</a></p>

</td>

</tr>

</table>

</div>

</div>

<script type="text/javascript">

// JavaScript Document

<!--

/* Script by: www.jtricks.com

* Version: 20071017

* Latest version:

* www.jtricks.com/javascript/navigation/floating.html

*/

var floatingMenuId = 'floatdiv';

var floatingMenu =

{

targetX: 0,

targetY: 300,

hasInner: typeof(window.innerWidth) == 'number',

hasElement: typeof(document.documentElement) == 'object'

&& typeof(document.documentElement.clientWidth) == 'number',

menu:

document.getElementById

? document.getElementById(floatingMenuId)

: document.all

? document.all[floatingMenuId]

: document.layers[floatingMenuId]

};

floatingMenu.move = function ()

{

floatingMenu.menu.style.left = floatingMenu.nextX + 'px';

floatingMenu.menu.style.top = floatingMenu.nextY + 'px';

}

floatingMenu.computeShifts = function ()

{

var de = document.documentElement;

floatingMenu.shiftX =

floatingMenu.hasInner

? pageXOffset

: floatingMenu.hasElement

? de.scrollLeft

: document.body.scrollLeft;

if (floatingMenu.targetX < 0)

{

floatingMenu.shiftX +=

floatingMenu.hasElement

? de.clientWidth

: document.body.clientWidth;

}

floatingMenu.shiftY =

floatingMenu.hasInner

? pageYOffset

: floatingMenu.hasElement

? de.scrollTop

: document.body.scrollTop;

if (floatingMenu.targetY < 0)

{

if (floatingMenu.hasElement && floatingMenu.hasInner)

{

// Handle Opera 8 problems

floatingMenu.shiftY +=

de.clientHeight > window.innerHeight

? window.innerHeight

: de.clientHeight

}

else

{

floatingMenu.shiftY +=

floatingMenu.hasElement

? de.clientHeight

: document.body.clientHeight;

}

}

}

floatingMenu.calculateCornerX = function()

{

if (floatingMenu.targetX != 'center')

return floatingMenu.shiftX + floatingMenu.targetX;

var width = parseInt(floatingMenu.menu.offsetWidth);

var cornerX =

floatingMenu.hasElement

? (floatingMenu.hasInner

? pageXOffset

: document.documentElement.scrollLeft) +

(document.documentElement.clientWidth - width)/2

: document.body.scrollLeft +

(document.body.clientWidth - width)/2;

return cornerX;

};

floatingMenu.calculateCornerY = function()

{

if (floatingMenu.targetY != 'center')

return floatingMenu.shiftY + floatingMenu.targetY;

var height = parseInt(floatingMenu.menu.offsetHeight);

// Handle Opera 8 problems

var clientHeight =

floatingMenu.hasElement && floatingMenu.hasInner

&& document.documentElement.clientHeight

> window.innerHeight

? window.innerHeight

: document.documentElement.clientHeight

var cornerY =

floatingMenu.hasElement

? (floatingMenu.hasInner

? pageYOffset

: document.documentElement.scrollTop) +

(clientHeight - height)/2

: document.body.scrollTop +

(document.body.clientHeight - height)/2;

return cornerY;

};

floatingMenu.doFloat = function()

{

// Check if reference to menu was lost due

// to ajax manipuations

if (!floatingMenu.menu)

{

menu = document.getElementById

? document.getElementById(floatingMenuId)

: document.all

? document.all[floatingMenuId]

: document.layers[floatingMenuId];

initSecondary();

}

var stepX, stepY;

floatingMenu.computeShifts();

var cornerX = floatingMenu.calculateCornerX();

var stepX = (cornerX - floatingMenu.nextX) * .07;

if (Math.abs(stepX) < .5)

{

stepX = cornerX - floatingMenu.nextX;

}

var cornerY = floatingMenu.calculateCornerY();

var stepY = (cornerY - floatingMenu.nextY) * .07;

if (Math.abs(stepY) < .5)

{

stepY = cornerY - floatingMenu.nextY;

}

if (Math.abs(stepX) > 0 ||

Math.abs(stepY) > 0)

{

floatingMenu.nextX += stepX;

floatingMenu.nextY += stepY;

floatingMenu.move();

}

setTimeout('floatingMenu.doFloat()', 20);

};

// addEvent designed by Aaron Moore

floatingMenu.addEvent = function(element, listener, handler)

{

if(typeof element[listener] != 'function' ||

typeof element[listener + '_num'] == 'undefined')

{

element[listener + '_num'] = 0;

if (typeof element[listener] == 'function')

{

element[listener + 0] = element[listener];

element[listener + '_num']++;

}

element[listener] = function(e)

{

var r = true;

e = (e) ? e : window.event;

for(var i = element[listener + '_num'] -1; i >= 0; i--)

{

if(element[listener + i](e) == false)

r = false;

}

return r;

}

}

//if handler is not already stored, assign it

for(var i = 0; i < element[listener + '_num']; i++)

if(element[listener + i] == handler)

return;

element[listener + element[listener + '_num']] = handler;

element[listener + '_num']++;

};

floatingMenu.init = function()

{

floatingMenu.initSecondary();

floatingMenu.doFloat();

};

// Some browsers init scrollbars only after

// full document load.

floatingMenu.initSecondary = function()

{

floatingMenu.computeShifts();

floatingMenu.nextX = floatingMenu.calculateCornerX();

floatingMenu.nextY = floatingMenu.calculateCornerY();

floatingMenu.move();

}

if (document.layers)

floatingMenu.addEvent(window, 'onload', floatingMenu.init);

else

{

floatingMenu.init();

floatingMenu.addEvent(window, 'onload',

floatingMenu.initSecondary);

}

//-->

</script>

Replace allbloggertool1 with your Twitter username.

PS: If you have already added the Google +1 Button somewhere in your blog then you need to add this code Just above

</head>

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

Now you are done.

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources,

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.