Google+ Follower ẩn hiện bằng CSS3

Như đã hướng dẫn với các bạn Facebook Like Box ẩn hiện bằng CSS3, thì qua bài này mình hướng dẫn luôn thằng Google+ xài thêm vào cho đủ bộ. Mạng xã hội Google+ thì chắc ở Việt Nam ra thì đứng thứ hai sau Facebook, và đối với dân SEO thì chắc nó còn quan trọng hơn thằng Facebook nữa chứ chẳng đùa.

Google+ Follower ẩn hiện bằng CSS3

Google+ Follower thì trông nó khá tương tự với Facebook Like Box, nó cũng hiện avatar và số lượng của những theo dõi trông cũng khá là hoành tráng. Giao diện mình sẽ chia sẻ cho các bạn dưới đây cũng sẽ tương tự như của bạn faceook, tiết kiệm diện tích và hiệu quả bất ngờ. Link demo: http://jsfiddle.net/kieusonlam/nGJNS/show

Google+ Follower ẩn hiện bằng CSS3

Thêm đoạn css này vào trên thẻ ]]></b:skin> cho bạn, bạn có thể yên tâm nó không trùng với thằng css của thằng kia đâu, mình đã thay đổi vị trí của thằng G+ này để bạn có thể sử dụng song song cả hai
.gfbox{
    position:fixed;
    top:145px;
    right:-325px;
    height:230px;
    width:305px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gficon-box{
    width:30px;
    height:32px;
    position:absolute;
    top:-1px;
    left:-30px;
    background:#DD4B39;
    border-radius:3px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:20px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.gfbox:hover, .gfbox:active{
    right:0;
}
Cũng như bác Facebook, Google cũng có một đoạn mã giúp hỗ trợ để tạo ra G+ Follower. Cũng tương tự tìm đến <body> và thêm vào sau
<script type='text/javascript'>
 (function() {
  var po = document.createElement('script');        
  po.type = 'text/javascript';        
  po.async = true;        
  po.src = 'https://apis.google.com/js/plusone.js';        
  var s = document.getElementsByTagName('script')[0];  s.parentNode.insertBefore(po, s);
 })();
</script>
Tìm đến </body> và thêm vào bên trên
<div class="gfbox">
    <div class="gficon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+KslzoneNetVn" data-source="blogger:blog:followers" data-width="260"></div>
</div>
thay bằng địa chỉ G+ của trang cá nhân hoặc fanpage của bạn rồi lưu lại.

Lời kết

Sau khi thành công thì website của bạn đã có được hai box tổng hợp số lượng người theo dõi trên hai mạng xã hội phổ biến này. Việc blog của bạn có nhiều người theo dõi và hoạt động (không phải là trao đổi fan mua like các thứ nhé, fan thật ấy) trên mạng xã hội ngoài việc tăng lượng truy cập trở lại, nó còn tạo cho website của bạn độ uy tín cho tương lai.

8 bình luận

  1. avatar says

    lúc 13:26 4 tháng 11, 2014

    Cám ơn bạn.
    Nhưng mình làm cái facebook ẩn hiện thì nó chạy được
    Nhưng khi làm cái google+ này thì cái thì nó lại hiện ở dưới chân trang.
    không hiểu sao nữa

  2. avatar says

    lúc 13:29 4 tháng 11, 2014

    Bạn để lại địa chỉ blog cho mình để mình xem thử nha.

  3. avatar says

    lúc 14:19 4 tháng 11, 2014

    http://noithat-lisa.blogspot.com/
    lúc trước nó có hiện ở chân trang. xong mình táy máy chút h nó mất luôn. còn không hiện nữa.
    mặc dù xóa đi xong paste lại y nguyên

  4. avatar says

    lúc 14:21 4 tháng 11, 2014

    Bạn copy lại phần css dán lại nhé. Hình như nó mất phần ".gpicon-box" của mình đâu đó rồi.

  5. avatar says

    lúc 14:35 4 tháng 11, 2014

    Ak. Trong doan CSS của bạn .gficon-box{ của bạn ghi là fi. khong phai gp

    Nhưng nút G+ nó bị ẩn bé vào trong. Làm ntn để nó hiện giống như bản DEMO.

  6. avatar says

    lúc 14:46 4 tháng 11, 2014

    OH chết để mình edit lại :D Thanks nhé!

  7. avatar says

    lúc 14:49 4 tháng 11, 2014

    Bạn tìm bên trong .gfbox thay right -325px thành -306px nhé

  8. avatar says

    lúc 14:56 4 tháng 11, 2014

    mình làm đc rồi. Cám ơn bạn nhiều nhé

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.