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&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&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.
Chúc các bạn thành công !!!
Nhận xét
Hi a,
Trả lờiXóaA cho e hỏi code này có chạy dc trên local ko ạ.Mà sao e test thử trên local lại có mỗi cái image. Thanks a
Áp dụng với tất cả các web trên nền tảng blogspot em ak.
Xóanó chỉ có mỗi cái hình Fb thôi @Nam Tạ!!!
Trả lờiXóaMình đã vào blog nguoiduyxuyen của bạn. Bạn hãy áp dụng để được hỗ trợ nha.
XóaNam ơi, mình làm y chang mà nó lại chỉ hiển thị mỗi cái hình, chẳng có động đậy gì cả là sao ta :((
Trả lờiXóahttp://yeutienganh123.blogspot.com/
Mình chú ý bạn áp dụng nhiều thủ thuật không được nhưng khi kiểm tra thì bạn không hề áp dụng. Phải chắng bạn đang spam link.
Xóako dc roi
Trả lờiXóaBlog của bạn đã có file jquery rồi nên bỏ qua bước 4 nha.
Xóaxin cảm ơn những hướng dẫn của bạn, chúc sức khỏe
Trả lờiXóaRất vui vì những hướng dẫn đó có ích vơi bạn,
XóaThanks ! Bác Namka em chèn đoạn : script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/
Trả lờiXóatrước thẻ
và đoạn code trên trong widget html .Nhưng nó ko ổn lắm. bác ngó qua hộ đúng không
http://huenq.abtland.com/
mình vào thấy nó hoạt động rất oke mà bạn. ý bạn là nó không ổn ở diểm nào thế hả bạn.
Xóachắc xung đột java .trang chủ ấn chuột vào nó không đẩy ra.vào các tin bài cụ thể thì rất ok
Trả lờiXóaBạn chỉ cần để lại một file duy nhất http://............/jquery/1.8.2/jquery.min.js trước thẻ < /head > thôi bạn ak.
Xóathank ông anh.
Trả lờiXóaSoi mãi cũng chỉ có 1 file
:D
để em soi kỷ hơn xem sao.Bác ngó qua cái site của em ổn không.đóng góp cho em chút ý kiến nhé
Một số trình duyệt không hiển thị fanpage đâu bạn à. Liệt kê: Opera. Firefox, Maxthon, Safari
Trả lờiXóaBạn làm chưa đúng thôi bạn ak. Bạn có thể kiểm tran bằng cách vào link demo của mình trên các trình duyệt dó tất cả đều chạy oke.
Xóamình tạo 1 tiện ích html tên: FACEBOOK với code như chỉ dẫn của bạn, đã hiện ra như demo nhưng bị một lỗi nhỏ là lại hiện luôn cái thanh bar bên cạnh với cái tên FACEBOOK làm mất cả đẹp. có cách nào xóa cái widget Facebook đi không cho nó hiện nữa không cậu ? cậu vào xem hộ mình nhé http://baodailoan.com . cám ơn Nam.
Trả lờiXóaCảm ơn bạn, mình đã làm được và đã click mấy quảng cáo ủng hộ :)
Trả lờiXóaThêm Facebook Popup Vào Bloggger Với Thời Gian Hẹn Và Số Lần Lập Lại
Trả lờiXóahttp://vnminhtriet.blogspot.com/2015/03/them-facebook-popup-vao-bloggger-voi.html
thanks nhé mình làm được rồi
Trả lờiXóahttp://meovatcs.blogspot.com/
sao em làm nó ko hiện lên đc nhỉ
Trả lờiXóa