Facebook popup likebox dạng trượt với JQuery cho blogger

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 thêm tiện ích Facebook fanpage likebox dạng trượt bên sidebar từ JQuery cho blogger

1- Đăng nhập vào Blog

2- Vào Mẫu => Chọn Chỉnh sử HTML (Edit HTML)

3- 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.

4-Lưu mẫu lại và tiến hành bước tiếp theo nha.

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

6- Copy và dán toàn bộ code bên dưới vào phần nội dung của tiện ích vừa tạ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/AVvXsEjshk02SMmtjNGiCMJrF2L_cTHKE3x3ZRXr4GFbxJ-nSGvbesn-eeUVJVrgUhdZI3FcYo5FMbQpV5oDzKV-Vd1KnTPcIqF2iQYJHUybZPb_FQx8sOAyj1uqw5HPluHZAo3O3z9fHrFUyGg/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.blogspot&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/AVvXsEgdaJ3UJEUzjzWPcJUQA9eaNN8074AYpHT2N9FabUYilim0jCCSCU5jVQnRQb-EXVE7xx6sewRIYTYA5WY6xATRhL1By9_IuH4DiS4TNIbrdyJIuIxqWQoYiezvKAqLsDdLSLglHDh5S88/s1600/1-namkna-blogspot.png'/></a></div>
<!-- http://namkna.blogspot.com/ -->
<!-- Facebook Widget End -->

» Tùy chỉnh code:

Thay http://www.facebook.com/namkna.blogspot thành URL trang fanpage trên facebook 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.