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 hoặc ứng dụng trong bố cục của giao diện blogger có thanh cuộn trình duyệt nhỏ . 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 ww.longdicaprio.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
<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/AVvXsEj_kqed2VWGz8bsMS5w6w0SA3Mc_5YGL6FRTcHlxT77VDOOdh-3PAhdtwkjOuaNgbnoYAt8ccNVveSd8UlHpl9adhh_JxAdbyN92XE1rLq6L5Ig90pvt29Yn2_7TQgw_W84UbzQbGBFHM0/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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/ceolongdicaprio"
data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div></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 (Google Search).
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.
Thân ái !!!
.JPG)
