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.

Hướng dẫn tạo nút chia sẻ bài viết Blogspot hiệu ứng trượt đẹ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;
}

- 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à 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ẻ:
<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='http://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>
Xong, lưu lại và tận hưởng thành quả thôi. Nút chia sẻ bài viết này khá lớn, nổi bật nên càng tạo thuận lợi cho người đọc chia sẻ bài viết. Chúc các bạn thành công. Có gì thắc mắc thì cmt bên dưới _CTPG_ trả lời nhé ^_^
_CTPG_

Trần Bá Đạt (_CTPG_)

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.info là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, BlogspotWindows

Post a Comment

chèn vào mà không thấy hiển thị gì cả bạn

Vì bạn chèn không đúng vị trí hiển thị thôi. Bạn nên thử ở các vị trí khác nhau để xem nó hiển thị chổ nào nha :p

bạn cho hỏi, mình chèn bộ nút khác, nhưng khi like thì nó bắt phải xác nhận hành động, mình thấy nó hơi khó chịu, không biết làm sao để nhấn 1 lần là được, trang của mình là http://bogiaktvn.blogspot.com, bạn xem thử giúp

Cái này là do template mới chèn vào đó, bạn cứ sử dụng 1 thời gian tự nó sẽ hết thôi :D

http://www.quotesplus.tk/
ghé thăm dùm e cái anh ơi sao nó k hiện lên ạ

Đạt ơi, làm sao để chèn nút share mạng XH giống như của bạn vậy! Hình ảnh như ở cuối bài đăng của bạn đó, gồm 5 cái hình tròn fb, twitter, g+,pinterest, linkdin, 5 cái hình tròn trông rất gọn và đẹp..

Mình không thấy nút share của Facebook đâu cả

có mail ko bạn? mình cần bạn giúp mình chút đỉnh :-d

[blogger]

Contact Form

Name

Email *

Message *

Javascript DisablePlease Enable Javascript To See All Widget