Thêm bộ nút Google +1 , Facebook và Twitter cho Blogger

Nguồn: sưu tầm.


Mấy cái bài kiểu như thế này nhiều rồi, hôm nay rãnh post bài lên cho blog đỡ trong vắng tý. ACE có nhu cầu thì làm thôi, chớ lâu lâu mà Blog ko có bài viết thấy chán lắm và như thường  lệ sau đây mình sẽ hướng dẫn các bạn một thủ thuật nhỏ đó là thêm Bộ nút Google +1 , Facebook và Twitter vào trong blog.

Demo

Để thực hiện thủ thuật bạn làm như sau:

1. Đăng nhập vào Blogger > Phần tử trang > Thệm tiện ích  HTML/JavaScrip.

2. Copy đoạn code bên dưới và dán vào tiện ích ( đoạn code khá là dài ^^! ) .

<style>/*-------Wordpresstoblogger.info Floating Counters------------*/#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}
#floatsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}</style>

<div id="floatdiv">
<div id="floatsidebar">
<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="quangpro1610">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.wordpresstoblogger.info/2011/07/tutorial-to-add-floating-google-1.html" 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>

4. Thay đổi 1 chút trong đoạn code:

Thay thế quangpro1610 bằng username Twitter của bạn. Nếu chưa có tài khoản bạn có thể đăng ký tại đây.

5. Sau đó lưu tiện ích lại và làm tiếp bước sau.

6. Qua Chỉnh sửa HTML và tìm thẻ đóng </head> thêm trên nó đoạn code sau:

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

7. Lưu Template và test kết quả!!!