Thủ thuật tạo trang Fanpage ẩn hiện khi rê chuột cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Traidatmui.com – Bài viết này mình chia sẻ cho các bạn một đoạn code có thể giúp trang Fanpage Facebook của bạn hiển thị dưới dạng ẩn hiện ở góc phải của Blogspot của bạn. Với kiểu hiển thị này sẽ giúp bạn tiết kiệm rất nhiều diện tích blog của bạn, trang Fanpage chỉ hiển thị ra khi bạn rê chuột vào biểu tượng Facebook ở góc dưới bên phải, bình thường thì nó sẽ được ẩn đi. Bạn xem chi tiết hướng dẫn bên dưới.


Hình ảnh minh họa
Thủ thuật tạo trang Fanpage ẩn hiện khi rê chuột cho Blogspot

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
img,a{border:0;}
#on{visibility:visible;}
#off{visibility:hidden;
}
#facebook_div{width:280px;height:270px;overflow:hidden;}
#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:280px;height:270px;position:fixed;right:-285px;}
#facebook_right img{position:absolute;top:-2px;left:-35px;}
#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:270px;left:-2px;top:-3px;}
5. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">/* <![CDATA[ */
jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -285}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });/* ]]> */</script>

6. Save template lại và trở về phần bố cục (Layout)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="on"><div id="facebook_right" style="bottom: 0;"><div id="facebook_div"><img src="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/s1600/helperblogger.com-facebook-icon.png" alt="" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/vnbloggertheme"
data-width="300" data-show-faces="true" data-stream="fasle" data-header="true"></div></div></div></div>

Bạn thay https://www.facebook.com/vnbloggertheme thành link của trang Fanpage của bạn là xong.

8. Cuối cùng bạn save tiện ích lại.

Chúc bạn thành công!

3 nhận xét

  1. hehehe

    Liên kết với em nhé anh , đã add blog TDM
    Blog: http://www.cunconblog.com
    Mô tả: Cún con blog - Chú chó thông minh!

    Cám ơn anh

    Trả lờiXóa
    Trả lời
    1. Đã add cho bạn tại http://www.vnbloggertheme.com

      Xóa
  2. Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
    Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
    Các bạn có thể truy cập link sau để xem thông tin công nghệ
    Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
    cám ơn bạn đã đọc
    đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
    xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
    xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
    xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

    giải trí thư giã relax giải trí thư giãn relax
    khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
    kho video giải trí khổng lồ video đời sống xã hội, video giải trí
    khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
    tin tức internet
    Tin tức itc , tin tức technogoy tin tức ict

    Khám phá công nghệ
    khám phá

    Thủ thuật công nghê thủ thuật công nghệ, tips





    Trả lờiXóa