How to add Floating Google +1, Facebook, Twitter Buttons For Blogger

{ Published by Dilan - On 6:26 AM - 0 comments }












  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget
  3. Paste the following code inside it,



<style>
/*-------MBT Floating Counters------------*/
#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="CrazyDilon">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://bloggingclaz.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 CrazyDilon With your Twitter username


4.  Save your widget and you are almost done!
Related Posts Plugin for WordPress, Blogger...
, ,