Tạo các nút Google +1, Facebook, Twitter và Linkhay dạng trôi nổi cho Blogger

Adding Floating Social share Counters to Blogger

Các bạn chơi blog thì chắc chắn không lạ gì các nút chia sẻ của Facebook, Twitter, Linkhay và mới nhất là Google +1. Nhưng bố trí làm sao để những nút này vừa tiện lợi nhất cho bạn đọc lại vừa bảo đảm thẩm mỹ cho blog? Sau nhiều "trăn trở" và tìm hiểu các kiểu "show nút", tôi "kết" nhất loại floating, tức là các nút sẽ nằm ở bên "lề" của blog và tự động "đuổi" theo trang viết khi bạn kéo trang lên xuống. Bạn có thể thấy cách thức nó hoạt động ngay trên Share All World.

Thủ thuật này được tôi tham khảo của MBT và thêm vào nút chia sẻ bài lên Linkhay. Nếu bạn có "hứng thú" thì có thể tham khảo cách làm dưới đây.

Tạo nút chia sẻ Google +1, Facebook, Twitter và Linkhay dạng trôi nổi cho Blogger

1. Đăng nhập Blogger. Vào Design (đối với giao diện mới, vào Layout).
2. Chọn một HTML/JavaScript widget và bỏ trống tiêu đề widget.
3. Chèn đoạn code dưới đây vào widget mới chọn.

<style>
/*------- http://www.ShareAllWorld.info Floating Counters ------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:290px;
    top:0;
    left:0;
        z-index:100
}

#mbtsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:290px;
    width:57px;
    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: 1px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="shareallworld">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:5px 0 0px 0;">
<script type="text/javascript">var linkhay_title = '';</script>
<script type="text/javascript">var linkhay_url = '';</script>
<script type="text/javascript">var linkhay_desc = '';</script>
<script type="text/javascript">var linkhay_style = '1';</script>
<script type="text/javascript" src="http://linkhay.com/widgets/linkhay.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:#666;"><a style="color:#666;" href="http://www.shareallworld.info" target="_blank">Home</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: 250,
    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>

Bạn nhớ thay thế Twitter username của bạn vào "shareallworld".
4. Lưu widget lại và kiểm tra xem bạn đã từng cài đặt Google +1 vào blog của bạn chưa. Nếu rồi thì bạn đã xong và chỉ việc chiêm ngưỡng thành quả vừa tạo. Còn nếu chưa, thì bạn tiếp tục làm theo bước thứ 5.
5. Vào Blogger → Design  → Edit HTML (với giao diện mới: Blogger → Template → Edit HTML).
Tìm </head> và chèn đoạn code dưới đây vào ngay trước nó:

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

Cuối cùng, lưu template lại là xong!
Chúc bạn thành công!

=== Nhấn vào đây để tìm bài viết này trên google ===