Floating Google Plus One
How To Add Floating Google Plus One, Twitter And Facebook Buttons .Now MTF has got a new trick and giving you a new Blogger Floating buttons with also included Google plus one button.
This Floating share buttons will fully helping your blog to sharing your content.  Now a days all Blogs almost all depending upon the social network and you can visit higher websites they can also depending upon the Social network. Friends Blogger is one of the platform that you write and also spread your contents. Also Blogger many times give you both thing learn to earn and earn to learn. I think if someone will write original content share her content in Social network they can get high traffic. The Code i am going to give that code i have already tested lets you test in your Blog. My special thanks goes to Jtricks.
  1. First login to your blogger dashboard.
  2. Go to Blogger design
  3. Choose a HTML/JavaScript widget
  4. Paste the following code inside it,

<style>
/*-------MTF Floating Counters------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#mbcsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="mbcsidebar">
    <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="MyTopFreeware">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://mytopfreeware.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 MyTopFreeware with your twitter user name.

Save your template.

Visit your Blog and enjoy your new buttons.

0 comments:

Post a Comment