Cách tạo trang Fanpage ẩn hiện bên góc phải màn hình cho Blogspot

Lâu lâu không post bài chia sẻ về thủ thuật web. Hôm nay mình xin phép chia sẻ cho các bạn một đoạn code để tạo trang Fanpage Facebook ẩn hiện bên góc phải màn hình hay còn gọi là Box Fanpage nhìn cho đẹp mắt, tiết kiệm diện tích nhằm trang trí cho blogspot hoặc website của mình đẹp và nổi bật hơn như hình này:

A. ĐỐI VỚI BLOGSPOT.

I> Trước tiên các bạn thực hiện như hình mình hướng dẫn sau:

1>  Vào phần bố cục Blog:

2> Chọn thêm tiện ích:

3> Một cửa sổ hiện ra: Chọn phần HTML/Javascrip

Sau đó paste code sau vào phần khung trắng:

<!-- Facebook Widget Start -->
<script type="text/javascript">
/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".noopslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/
</script>
<style type="text/css">
.noopslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJCsnfnJ5rHzE-e-WzL9vhfPKT0Nc9hhqFNljjFVzh5xYgSSbIyw2mTJ7SVE6z0k9829Y-oOOaLVxTrctOYQqd40xjs6GbKOQckjRZn8BBckEwrqg1pr7x48R-nfGGN6pe4XVwrHskzA/w42-h200-no/Facebook-duongdoi8x01.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:16.7%;}
.noopslikebox div{border:none;position:relative;display:block;}
.noopslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}
.noopslikebox span a{color: gray;text-decoration:none;}
.noopslikebox span a:hover{text-decoration:underline;}</style>
<div class="noopslikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=www.facebook.com/haybietchodi&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe>
</div>
<a href='https://lh5.googleusercontent.com/-St-Knm9bPwY/UsaQuDv7cYI/AAAAAAAABd8/Vvns8iAFGoY/w42-h200-no/facebookbadge-duongdoi8x.png'/></a></div>
<!-- Facebook Widget End -->

 Hình vẽ như sau: 

Lưu ý: Các bạn thay đoạn mình bôi vàng trong đoạn code trên thành link fanpage của mình nhé

4> Sau đó chọn lưu lại.

II> Cuối cùng là chọn lưu lại bố cục như hình sau là OK:

Chiêm ngưỡng kết quả thôi! he he

B. ĐỐI VỚI WEB HAY BLOG DẠNG KHÁC: Các bạn làm tương tự nhé. Chỉ cần lấy code đó dàn vào phần nào đó cần chèn là được. 

Have Fun!

Tác giả: Phạm Duy Khánh