Home » » Cara Membuat Share Button Melayang

Cara Membuat Share Button Melayang

Written By Unknown on Kamis, 29 Maret 2012 | 20.15

Jika kemaren kita sudah belajar Menambah Widget dibawah Posting, Berikut ini Belajar Blog berbagi pengalaman Cara Membuat Share Button Melayang. Tombol ini selalin untuk share juga untuk melihat berapa banyak yang menyukai artikel atau blog anda. Tombol ini akan terus mengikuti di halaman atau di depan layar monitor anda.

Dan Berikut ini cara-cara membuatnya.
1. Setelah anda login - Dasbor  - Tambah Gadget - HTML
2. Copast kode berikut ini.

<style>
/*-------BB Floating------*/
#floatdiv {
    position:absolute;width:100px;height:229px;
    top:0;left:0;z-index:100}
#bbsidebar {border:1px solid #ddd;padding-left:5px;
    position:absolute;height:220px;width:60px;
    margin:0 5px 0 5px;}
</style>
<div id="floatdiv">
<div id="bbsidebar">
    <table cellpadding="1px" cellspacing="0">
    <tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 7px;">
<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 0 2px 5px;"><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="NAMA TWITTER ANDA">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.ken-zoo.blogspot.com" target="_blank">Widget</a></p></td></tr></table>
</div></div><script type="text/javascript">
// JavaScript Document
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>

4. Save. (Ganti kode yang berwarna biru dengan nama Twitter anda)
5. Dan Untuk nenyempurnakannya Silahkan masuk ke Rancangan - Edit HTML - Expand widget ( jangan lupa, save template dulu) dan Cari kode  </head>
Pastekan Kode ini di ATASnya

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

6. Save dan Lihat hasilnya.

Demikian ulasan tentang Cara Membuat Share Button Melayang. Semoga bermanfaat bagi kita semua
Share this article :

0 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger