Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Friday, April 15, 2016


Một trong các mục tiêu tăng lưu lượng truy cập và thăm dò ý kiến của độc giả trên các mạng cộng đồng là việc phải có một bộ like and Share button thật tuyệt vời và đẹp mắt, nó phải được thiết kế ở một nơi thật thuận lợi trong Blog/Web. Tham khảo qua một vài Web Blog của các anh chị, bậc thầy đi trước, mình phát hiện một bộ Source code nầy khá hay, xin chia sẽ cùng các bạn.

Các bước tiến hành như sau:
Thêm thư viện dưới đây vào dưới thẻ <b:skin>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Thêm Source Code CSS dưới đây vào trước thẻ ]]</b:skin>
#share-buttons{
width: 100%;
display: inline-block;
text-align: center;
margin: 20px auto;
}
.share-button{
background:#DCE0E0!important;
position:relative;
display:block;
float:left;
height:40px;
overflow:hidden;
width:150px;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0 7px;
}
.icon{
display:block;
float:left;
position:relative;
z-index:3;
height:100%;
vertical-align:top;
width:38px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:3px;
/*border-radius*/
-webkit-border-radius:3px 0 0 3px;
   -moz-border-radius:3px 0 0 3px;
        border-radius:3px 0 0 3px;
text-align:center;
}
.icon i{
color:#fff;
line-height:42px;
}
.pslide{
z-index:2;
display:block;
height:100%;
left:38px;
position:absolute;
width:112px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:0;
/*border-radius*/
-webkit-border-radius:0 3px 3px 0;
   -moz-border-radius:0 3px 3px 0;
        border-radius:0 3px 3px 0;
margin:0;
}
.pslide p{
font-family:Open Sans;
font-weight:400;
border-left:1px solid rgba(255,255,255,0.35);
color:#fff;
font-size:16px;
left:0;
position:absolute;
text-align:center;
top:8px;
width:100%;
margin:0;
}
.share-button .pslide{
/*transition*/
-webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
     -o-transition:all .2s ease-in-out;
        transition:all .2s ease-in-out;
}
.facebook1 iframe{
display:block;
position:absolute;
right:5px;
top:6px;
z-index:1;
}
.facebook2 iframe{
display:block;
position:absolute;
right:5px;
top:6px;
z-index:1;
}
.twitter iframe{
width:90px!important;
right:5px;
top:10px;
z-index:1;
display:block;
position:absolute;
}
.google #___plusone_0{
width:70px!important;
top:10px;
right:15px;
position:absolute;
display:block;
z-index:1;
}
.facebook1:hover .pslide{
left:-90px;
}
.facebook2:hover .pslide{
left:150px;
}
.twitter:hover .pslide{
left: -90px;
}
.google:hover .pslide{
left: 150px;
}
.facebook1 .icon,.facebook1 .pslide{
background:#305c99;
}
.facebook2 .icon,.facebook2 .pslide{
background:#305c99;
}
.twitter .icon,.twitter .pslide{
background:#00cdff;
}
.google .icon,.google .pslide{
background:#d24228;
}

- Về cơ bản chúng ta đã xong phần CSS định dạng cho đoạn code chia sẻ bài viết trong Blogspot này, giờ thì thêm đoạn Javascript này phía trên thẻ </body>:

<script type='text/javascript'>
/*<![CDATA[*/
(function () {
    var a = document.getElementById('SocialBar');
    var b = document.getElementById('social_share');
    b.innerHTML = a.innerHTML;
    a.parentNode.removeChild(a)
})();
/*]]>*/</script>

- Về cơ bản chúng ta đã xong phần CSS định dạng cho đoạn code chia sẻ bài viết trong Blogspot này, giờ thì thêm đoạn Javascript này phía trên thẻ </body>:
- Và cuối cùng, thêm đoạn HTML này ngay vị trí bạn muốn hiển thị nút chia sẻ
<script type='text/javascript'>
/*<![CDATA[*/
(function () {
    var a = document.getElementById('SocialBar');
    var b = document.getElementById('social_share');
    b.innerHTML = a.innerHTML;
    a.parentNode.removeChild(a)
})();
/*]]>*/</script>


Save lại và xem kết quả
Chúc các bạn thành công nhé.

0 comments:

Post a Comment

Popular Posts