Tạo facebook like box chuyên nghiệp ẩn hiện bên thanh trượt cho blogger

By Unknown

Thứ Ba, 5 tháng 8, 2014

Cách tạo Facebook like box chuyên nghiệp cho blogspot, facebook like box ẩn hiện bên thanh trượt chuyên nghiệp và đẹp cho blogger sử dụng CSS.
Facebook like box là chủ đề khá quen thuộc cho các website chuyên hay không chuyên kể cả WorPress, Blogspot, Drupal...Thường thì Facebook like box được các bạn chèn dưới bài viết hoặc bên widget nhưng ở bài viết này mình sẻ hướng dẫn các bạn cách  tạo facebook like box rất chuyên nghiệp nó ẩn hiện khi bạn nhấp chuột vào biểu tượng bên thanh trượt. Đồng thời nó không chiếm chổ trên blog của bạn.

DEMO

Tạo  facebook like box chuyên nghiệp ẩn hiện bên thanh trượt cho blogger

Muốn tạo được facebook like box đẹp không thể không có sự can thiệp của CSS

Đoạn CSS facebook like box cho blogger

.socialbox{
    position:fixed;
    top:10%;
    right:-286px;
    height:250px;
    width:285px;
    background:#BEF709;
    border:3px solid #000;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
}
.fbicon-box{
    width:40px;
    height:50px;
    position:absolute;
    top:-2px;
    left:-40px;
    background:#405D9B;
    border-radius:9px 0 0 3px;
    color:#fff;
    font-family:Arial;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:2px;
}
.socialbox:hover{
    right:0;
}

Cách chèn đoạn CSS vào template

Như như thường lệ các bạn đăng nhập vào blogger.com >> Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> sau đó chèn đoạn CSS trên trước thẻ ]]></b:skin>
Sau khi chèn CSS xong, bạn cần có cần có plugins code từ App Facebook để like box xuất hiện bên thanh trượt nhé.

Plugins facebook like box HTML5

<div id='fb-root'/>
<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.async=true;
  js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<div class="socialbox">
    <div class="fbicon-box">f</div>
    <div class="fb-like-box" data-href="https://www.facebook.com/tuanphanblog" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>

Các bạn chèn plugins code trên trước thẻ </body> và lưu lại kết quả .
Lứu ý :

• https://www.facebook.com/tuanphanblog thay tuanphanblog thành tên fan page của bạn
• Nếu blog của bạn chưa có đoạn <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script> thì nhớ thêm nó vào trước thẻ </head> nhé

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

Tag : Chia sẻ, CSS