Cara memasang Floating Sosial Button

Jika anda memasang floating share button,ikuti langkah2 yg berikut(button ini akan sentiasa float dan kelihatan walaupun korang roll blog korang).Klik sini untuk live demo.


Langkah 1
Pergi ke Dashboard >Layout>Add a Page element > Html/javascript.

Langkah 2
Paste kod berikut ke dalam Html/javascript yg anda buka tadi.

<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="mybloggertricks">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.MyBloggerTricks.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>

Langkah 3 
Pergi ke Blogger > Design > Edit HTML>Expang widget template dan cari kod </head>

Langkah 4
Paste kod berikut di atas kod </head>

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

Save dan lihat hasilnya.

Teruskan membaca...

Cara memasang Facebook Fanpage di blog

Facebook like box!kenapa korang perlu ada fanpage untuk blog korang dan kenapa perlu letakkan facebook likebox kat blog kita?Tak lain tak bukan sebab nak tingkatkan trafik blog kitalah kan.Malah semua blog perlu ada fanpage termasuklah blog ni.Jadi macam mana nak ambil kodnya dan pasang di blog?Ikuti langkah2 dibawah.

Langkah 1
Pergi ke sini http://developers.facebook.com/docs/reference/plugins/like-box/

Langkah 2
Buat seperti tutorial yang ditunjukkan pada gambar dibawah.
Isi lebar,tinggi warna like box mengikut kesesuaian blog dan kehendak korang.Korang tak digalakkan memasang stream pada like box kerana ianya tak banyak membantu dan hanya menyemakkan blog korang.

Langkah 3
Klik Get Code,kemudian klik pada iframe seperti ditunjukkan pada gambar dibawah.

Langkah 4
Copy kod yang diberikan,kemudian pergi ke Dashboard > Layout > Add Gadget > Html/Javascript dan paste kod tadi ke dalam Html/Javascript tadi dan lihatlah hasilnya.:)

Teruskan membaca...

Cara memasang like button

Like button merupakan satu alat penting untuk meningkatkan trafik blog selain share button.Maklumlahkan,facebook merupakan satu perantaraan yg penting untuk menghubungkan antara fb user dengan entri2 yg korang tulis.Jadi,tunggu apa lagi?jom pasang skrang..

Langkah 1

Login akaun blogger korang,pergi ke dashboard > design > edit HTML > expand widget templates
( backup template korang dulu)

Langkah 2
Menggunakan fungsi find (ctrl + F), cari kod berikut: <div class='post-header-line-1'/> atau jika tiada,cari kod  <div class='post-header-line-1'> atau <data:post.body/>


Langkah 3
Copy kod dibawah kemudian pastekan dibawah kod <div class='post-header-line-1'/> atau jika tiada,cari kod  <div class='post-header-line-1'> atau <data:post.body/>

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/>

Tekan preview,dan jika tiada error,tekan save.

Teruskan membaca...

Cara pasang facebook share button

Kelebihan share button ialah ia dapat menambah trafik blog.Dan semamangnya tu jer tujuan button tu dipasang.Jadi lebih baik korang pasang cepat-cepat.Berikut ialah contoh2 button yang boleh korang pilih untuk dipasang di blog korang.^_^

Code full:code yang mempunyai counter di atas butang share

Code compact:code yang mempunyai counter di tepi butang share

Langkah 1
Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)


Langkah 2
Menggunakan fungsi find (ctrl + F), cari kod: <div class='post-header-line-1'/> 
atau jika tiada,cari: <div class='post-header-line-1'> 


Langkah 3
Copy kod berikut dan pastekan selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> 


Kod untuk Full:

<div style="float:right;padding:4px;"> <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>

Kod untuk compact:

<div style="float:right;padding:4px;"><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>

klik preview,jika tiada error,klik save:)

Teruskan membaca...