Friday, 26 August 2011

Add Floating Social share Counters to Blogger





 http://lh4.ggpht.com/-xpLOKTEXUPs/Tflmq8UbdZI/AAAAAAAAD3E/rZZA7zRYrOo/image%25255B19%25255D.png?imgmax=800





 




  1. Go To Blogger > Design



  2. Choose a HTML/JavaScript widget



  3. Paste the following code inside it,







<style>

#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>

     

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

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>

<script type="IN/Share" data-counter="top"></script>

    </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="RajwinAravind">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://rajwin-aravind.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>














Make these changes:



  • Replace RajwinAravind with your Twitter username




     4.  Save your widget and you are almost done!




PS: If you have already added the Google +1 Button somewhere in your blog then you may skip step5.




    5.  Now Go To Blogger > Design > Edit HTML   and search for this,




</head>



Just above it paste the following code,



<script src='http://apis.google.com/js/plusone.js'






type='text/javascript'> {lang: &#39;en-US&#39;} </script>







     6.  Save your template.!












0 comments:

Post a Comment