Thêm Facebook Fanpage vào Blog với Smooth Jquery Hover Effect

Xem Demo   Một biểu tượng Facebook nằm bên phải Blog, khi ta di chuột vào đó  thì fanpage sẽ hiện ra. Cũng hay đấy chứ? Cùng thực ...




Một biểu tượng Facebook nằm bên phải Blog, khi ta di chuột vào đó  thì fanpage sẽ hiện ra. Cũng hay đấy chứ? Cùng thực hiện nhé.

Thêm Widget Vào Blog

Bước 1: Đăng nhập vào Blog của bạn, Vào Mẫu -> Chỉnh sửa HTML
Bước 2: Tìm Thẻ </head> và thêm vào đằng trước nó đoạn code sau:
[<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>]Bước 3: Lưu Mẫu
Bước 4: vào Bố cục >> Click: Thêm tiện ích >> Chọn HTML/Javascript - Tốt nhất thêm ở phần footer để có thể hiển thị ở tất cả các trang.
Thêm code sau vào:
[<style type="text/css">
#fbplikebox {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.fbplbadge {
background-color: #3B5998;
display: block;
height: 150px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/s1600/vertical-right.png");
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>] 
Bước 5: Bước này quan trọng nè. Ở đoạn code trên tìm và thay thế:
- Thay xxx bằng URL fanpage của bạn, sau đó tiếp tục thay thế các ký tự trong URL như sau:
+ Thay ký tự : bằng %3A
+ Thay ký tự / bằng %2F
Ví dụ Fanpage của mình có dạng
http://www.facebook.com/datvnncom
Sau khi thay thế sẽ như này:
http%3A%2F%2Fwww.facebook.com%2Fdatvnncom
Ngoài ra bạn cũng có thể thay đổi màu nền,  hình ảnh, kích thước ...

Ok, giờ lưu lại và xem thành quả nào!

Nguồn: helplogger.blogspot.com

BÌNH LUẬN

Tên

add-on,4,Affiliate,1,Blogger,12,Blogger Template,7,Blogger Tricks,5,Cs-cart,5,permalink,2,rehub,2,seo,2,Video,1,WooCommerce,4,Wordpress,27,Wordpress Plugin,22,Wordpress theme,16,yoast seo,1,
ltr
item
DATVNN.COM: Thêm Facebook Fanpage vào Blog với Smooth Jquery Hover Effect
Thêm Facebook Fanpage vào Blog với Smooth Jquery Hover Effect
https://4.bp.blogspot.com/-Zqvnrw2Xnlk/V0Z2un8uHbI/AAAAAAAAALQ/QPPiHPTElfMJaiR-K4G3K8djUq8oTn7HACLcB/s400/floating%2Bstatic%2Bfacebook%2Blike%2Bbox%2Bwidget%2Bfor%2Bblogger%2Bblogspot.png
https://4.bp.blogspot.com/-Zqvnrw2Xnlk/V0Z2un8uHbI/AAAAAAAAALQ/QPPiHPTElfMJaiR-K4G3K8djUq8oTn7HACLcB/s72-c/floating%2Bstatic%2Bfacebook%2Blike%2Bbox%2Bwidget%2Bfor%2Bblogger%2Bblogspot.png
DATVNN.COM
https://www.datvnn.com/2016/05/them-facebook-fanpage-vao-blog-voi.html
https://www.datvnn.com/
https://www.datvnn.com/
https://www.datvnn.com/2016/05/them-facebook-fanpage-vao-blog-voi.html
true
2621903661232250745
UTF-8
Đã tải tất cả bài viết Không tìm thấy bài viết nào XEM TẤT CẢ Đọc thêm Trả lời Hủy trả lời Xóa Bởi Home TRANG BÀI VIẾT Xem Tất Cả ĐỀ NGHỊ CHO BẠN NHÃN LƯU TRỮ TÌM KIẾM TẤT CẢ BÀI VIẾT Không tìm thấy bất kỳ bài viết phù hợp với yêu cầu của bạn Về trang chủ Chủ nhật Thứ 2 Thứ 3 Thứ 4 Thứ 5 Thứ 6 Thứ 7 Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec vừa nãy 1 phút trước $$1$$ minutes ago 1 giờ trước $$1$$ hours ago Hôm qua $$1$$ days ago $$1$$ weeks ago hơn 5 tuần trước Followers Follow NỘI DUNG PREMIUM NÀY ĐƯỢC KHÓA BƯỚC 1: Chia sẻ lên mạng xã hội BƯỚC 2: Nhấp vào liên kết trên mạng xã hội của bạn Copy All Code Select All Code All codes were copied to your clipboard Không thể sao chép mã / văn bản, vui lòng nhấn [CTRL] + [C] (hoặc CMD + C với Mac) để sao chép Mục lục