Cách tạo Like Fan Facebook bên thanh cuộn phải blogger - thủ thuật

Thủ thuật tối nay mình gửi tới các bạn đó là dùng jquery để tạo hiệu ứng Like Fan Facebook ngay bên cạnh thanh cuộn trình duyệt. Điều này sẽ làm giảm được 1 tiện ích hiển thị trong bố cục của giao diện blogger. Thủ thuật này có thể ứng dụng trên Website và nhiều nền blog khác nhau.
Cách tạo Like Fan Facebook bên thanh cuộn phải blogger - thủ thuật

Demo tại trang itviet360.com
- Cách làm thủ thuật
+ Vào bảng điều khiển blogger - bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
+ Dán Code dưới đây vào tiện ích vừa thêm
Code:

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:280px;height:300px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 50%;"><div id="facebook_div"><img src="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/s1600/helperblogger.com-facebook-icon.png" alt="" />
<!-- Pages Fan -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=374631889294427";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/itviet360com/166823093455666" data-width="235" data-height="290" data-show-faces="true" data-stream="false" data-header="false"></div>

<!-- Ket thuc -->

</div></div></div>

+ Các thông số cần lưu ý:
* top: 50% (Con số màu đỏ) khoảng cách từ trên trình duyệt xuống tới ảnh Facebook
* Đoạn mã màu xanh: Là 2 đoạn mã các bạn lấy được từ site Fan Facebook Like. Đọc bài: http://www.itviet360.com/2012/10/dua-trang-page-facebook-vao-web-blog.html
và dán cả 2 đoạn code đó vào chỗ code màu xanh. Sau đó lưu lại xem kết quả

chúc các bạn thành công !
Chuyên mục: , , ,

2 comments:

  1. phong vũ ơi cho mình hỏi chỗ đoạn
    Đoạn mã màu xanh: Là 2 đoạn mã các bạn lấy được từ site Fan Facebook Like. Đọc bài: http://www.itviet360.com/2012/10/dua-trang-page-facebook-vao-web-blog.html
    và dán cả 2 đoạn code đó vào chỗ code màu xanh. Sau đó lưu lại xem kết quả

    -> làm như thế nào vậy bạn mình vẫn chưa hiểu

    ReplyDelete
    Replies
    1. Bạn vào link bài viết Đưa trang like Fan Facebook vào Web, blog rồi vào đó xem nhé. Ở đó có hướng dẫn cách lấy đoạn mã code màu xanh đó.

      Delete