Hướng dẫn tạo nút chia sẻ bài viết Blogspot hiệu ứng trượt đẹp mắt

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>