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

Loading...

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnspvBuuELiVijzt3FFeHUvuKoZF3zB_7ot1a_9BwfzpSaToJl_V_KQOXgmXODYfdL6SWn7YTTy2Z4r7b5GS60zmG6n796tFbySpitYLy_fF97ytVtQ12pxBa4v1OqckgJFdT4OLL4Ug/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 !

Loading...

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger