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

Lâu lâu trở lại với Blogspot, nay _CTPG_ xin hướng dẫn các bạn thủ thuật tạo nút chia sẻ (share) bài viết có hiệu ứng trượt mở rất độc đáo và đẹp mắt.

Các bạn có thể xem demo nút share đó tại đây nhé. Về cơ bản, nút share này sẽ được bao phủ lên bởi các một lớp, sau khi rê chuột vào thì lớp này trượt sang 1 bên để lộ nút chia sẻ, rất độc đáo và đẹp mắt. Phải nói là rất cuốn hút.

Nói dông dài làm gì, vào luôn chủ đề thôi:

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

– Đầu tiên, luôn phải backup code trước khi chỉnh sửa bất kỳ điều gì nha ^_^

– Tiếp theo, chúng ta cần thêm thư viện css cho nút chia sẻ bài viết này đã, bạn hãy thêm thư viện dưới đây phía trên <b:skin>:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

– Sau đó thêm đoạn css này vào phía trên 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;
}

<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>

<div id='social_share'>
<div id='share-buttons'>
<div class='facebook2 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> facebook </p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='fa fa-twitter'>
</i>
</i>
<div class='pslide'>
<p> twitter </p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'></a>
<script async='async' src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='fa fa-google-plus'>
</i>
</i>
<div class='pslide'>
<p> google+ </p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
window.___gcfg = {lang: &#39;id&#39;};
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class='facebook1 share-button'>
<i class='icon'>
<i class='fa fa-facebook'/></i><div class='pslide'><p> fb share </p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
</div>
</div>