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 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 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ú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
lúc 13:29 4 tháng 11, 2014
Bạn để lại địa chỉ blog cho mình để mình xem thử nha.
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
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.
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.
lúc 14:46 4 tháng 11, 2014
OH chết để mình edit lại :D Thanks nhé!
lúc 14:49 4 tháng 11, 2014
Bạn tìm bên trong .gfbox thay right -325px thành -306px nhé
lúc 14:56 4 tháng 11, 2014
mình làm đc rồi. Cám ơn bạn nhiều nhé