Google +1, Facebook, Twitter Buttons Melayang di Blog

Stelah saya posting sebelumnya cara menambahkan tombol google +1 dan tombol share lainnya di bawah judul postingan nah sekarang saya akan membahas bagaimana membuat google +1, facebook, Twitter buttons melayang di blog. 

Mungkin sudah banyak blog-blog lain posting artikel yang semacam ini dan bahkan sudah tidak asing lagi bagi pecinta dunia maya karna sering kita jumpai di blog lainnya, tapi gak ada salahnya bila saya berbagi untuk pengunjung yang belum mengetahuinya simak caranya di bawah.

Cara pemasangan kode.....

• Masuk ke acount blog sobat
• dari dasbor klik rancangan
• plih tambah gadget=>html/ javascript
• paste kode di bawah di dalamnya

<style>
/*-------theant tombol melayang------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}
#theantsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>

<div id="floatdiv">
<div id="theantsidebar">
    <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="theant17">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://www.theant-budiana.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>

Catatan : Ganti theant17 dengan  nama pengguna twitter sobat.

• simpan widget
• pindah ke edit HTML cari kode </head> dan simpan kode di bawah ini di atas kode itu

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

• jika sobat sudah menambahkan google +1 di blog sobat lewati cara edit HTML
• simpan template dan ucapkan sukur

Sekarang setiap pengunjung blog sobat akan melihat tombol google +1 facebook, tombol twitter mengapung di blog sobat walaupun halaman di geser ke atas ke bawah ia akan tetap disitu. jangan lihat yang satu ini cara membuat postingan terbaru tampil melayang.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.