Tạo hộp Facebook popup likebox dạng trượt với JQuery cho blog

Đăng bởi Admin | 12/8/13 | 0 nhận xét

Trước đây namkna đã giới thiệu đến các bạn  tiện facebook likebox dạng popup tự động hiển thị fanpage facebook ra trước blog (xem lại Tại đây), tuy nhiên nó không chuyên nghiệp và rất bất tiện khi khách thăm blog bạn không muốn "click". Chính vì vậy, sử dụng hộp tiện ích với hiệu ứng trượt sẽ giúp blog/web bạn nhìn chuyên nghiệp và mượt hơn.

Các bạn có thể xem Demo. Demo View
Ảnh minh họa: 

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu

3- Chọn Chỉnh sử HTML (Edit HTML)

4- Thêm đoạn code dưới đây sau thẻ </head>  trong template của bạn rồi "lưu lại":

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

-Nếu template của bạn có file Jquery này rồi thì cso thể bỏ qua bước này.

5- Chọn Phần Tử Trang => Thêm Tiện Ích => HTML/Javascript.

6- Copy và Paste toàn bộ code bên dưới vào:

<!-- 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/AVvXsEh41jtg3TZhyh4rV7w9H7oyOLPz4zeLnhtYWCp7mR6DukXwL-9FQ6dT3xFI4IukF5RMGXdhjlzP5O8iqpoLq_L5cpiEfZA4hV3n_IsGttMfKgPhzibhOZ4HHmbLu6DMYGmadQ_OU0GvSdw/s1600/button-facebook-namkna-1.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:20%;}
.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=http://www.facebook.com/namkna&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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2pE8VS3ifbuPH6AmmlnQgUCdUSZUeCHzYD9-iC6o_kcWZb3QSsSHJbxs473teB5JhKuiPoWZLilratUoVvgCefCY7kmlB0K-aKQBm39mFP3LzycpzQFuBblsfCEFPGiq4JoMDOM9NAxQ/s1600/1-namkna-blogspot.png'/></a></div>
<!-- http://namkna.blogspot.com/ -->
<!-- Facebook Widget End -->

Trong đó:

- Thay http://www.facebook.com/namkna thành URL trang face book cá nhân của bạn

- Thay link ảnh mầu đỏ thành link ảnh khác nếu bạn muốn. Thêm cho các bạn một số ảnh khác để lựa chọn. Nếu thích hình nào hãy bấm chuột vào hình đó để tải về và Uploaf lên blog để lấy link nha.

7- Lưu lại và xem thành quả.
Chúc các bạn thành công !!!
Xem thêm:

Tạo hộp Facebook PopUp like box tự đóng theo thời gian

                                                                                                         Nguồn: Namkna
                                                                                                         Thu thuat vi tinh