Floating Google+, Facebook and Twitter share widget

Hello there, how are you?

I had oversight to give you blogger gadget since we gave Social Icons Widget for blogger. So today I brought a very useful widget for blogger like our previous Social icons widget, Floating Google+, Facebook and Twitter share widget.

If you're like this widget, you can add it your blog by follow below steps.

Editing HTML

Step 1

Login to your blogger dashboard and go to Template >> Edit HTML. Put a tick to Expand Widgets Template. Now press Ctrl+F and search for the ]]></b:skin> code.

Step 2

Now paste below code after the ]]></b:skin> code and save the template.

<style type='text/css'>
#floatdiv { 
    position:absolute; 
    width:94px; 
    height:229px; 
    top:0; 
    left:0; 
        z-index:100 
}

#saamgeadaviya { 
border:1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px; 
left: -12px;
padding: 8px; 
position:relative; 
height:220px; 
width:55px; 
margin:0 0 0 69px; 
}
</style>

Adding Widget

Step 3

Now go to Layout >> Add a Gadget >> HTML/JavaScript and paste below code in it.

<div id="floatdiv"> 
<div id="saamgeadaviya"> 
    <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="Your Twitter ID">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;"></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>

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

Replace Your Twitter ID with your Twitter ID. Now save your widget and see your blog.
If you're think this is useful to you, please leave your comments. We want your comments to continue this blog. Thanks!

Share on Google Plus

About Eranda

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.