Tạo hộp G+ Followers đẹp ẩn hiện bên thanh trượt cho blogger

By Unknown

Thứ Tư, 6 tháng 8, 2014

Củng như bài viết tạo facebook like box chuyên nghiệp, tiếp tục cùng chủ đề hôm nay mình hướng dẫn cách tạo hộp G+ Followers đẹp cho blogger nó vẫn ẩn hiện khi nhấp chuột vào biểu tượng.

Dù sinh sau đẻ muộn các tính năng như tạo fan hâm mộ G+ Followers, chat, nhắn tin, gọi điện qua Hangouts và sự phát triển lớn mạnh của ông trùm google dành dành nó củng thay thế facebook vì hiện nay số người sử dụng gmail không phải là số nhỏ.

Tạo hộp G+ Followers đẹp ẩn hiện bên thanh trượt cho blogger

DEMO

Chúng ta cùng tiến thành làm nào như thường lệ muốn tạo hộp G+ Followers đẹp cần có sự can thiệp của CSS.

Đoạn CSSG+ Followers đẹp cho blogger

/* Googleplus Followers */
.socialbox2{
    position:fixed;
    top:145px;
    right:-279px;
    height:230px;
    width:258px;
    background:#efefef;
    border:1px solid #bbb;
    border-right:0;
    transition:all 400ms ease-in-out;
    border-radius:0 0 0 3px;
    padding:10px;
}
.gpicon-box{
    width:40px;
    height:50px;
    position:absolute;
    top:-1px;
    left:-40px;
    background:#DD4B39;
    border-radius:9px 0 0 3px;
    color:#fff;
    font-family:Georgia;
    font-size:30px;
    font-weight:700;
    text-align:center;
    padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
    right:0;
}

Cách chèn CSS G+ Followers vào template

Đầu tiên các bạn đăng nhập vào tài khoản bllogger của bạn >> Vào Mẫu >>Chỉnh sửa HTML >> Ctrl+F và 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 các bạn có mã nhúng từ google App cụ thể đoạn mã nhúng như sau

Mã nhúng G+ Followers cho blogger

<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>
<div class="socialbox2">
    <div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+TuanphanInfo" data-source="blogger:blog:followers" data-width="260"></div>
</div>

Các bạn chèn mã nhúng này trước thẻ </body> nó thay chử màu đỏ +TuanphanInfo thành tên  của bạn nhé

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

Tag : Chia sẻ, CSS