Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

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

Trần Bá Đạt bởi Trần Bá Đạt
27/04/2018
trong Blogspot, Thủ thuật Blogspot
4
CHIA SẺ
1.4k
LƯỢT XEM
Chia sẻTweetPinChia sẻ

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

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

#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='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>
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é ^_^
5/5 - (1 bình chọn)
Chia sẻ4TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

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.com 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, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 12

  1. Kenmaxim says:
    7 năm trước

    Đạt có thể cho mình xin cái KK Rating bạn đang xài được không? nó giống của WP mà mình tìm hoài không thấy. Những cái khác xài tệ quá!

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Bạn chỉ cần lên tìm từ kk star rating là có ngay mà laugh

      Trả lời
  2. Cuong says:
    7 năm trước

    Đạt làm bài hướng dẫn tạo nút chia sẽ và comment Zalo vào blogspot đi Đạt, mình đã đăng ký official account, có mã rồi mà không biết cách nào chèn vào hết.

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Có trang nào làm ví dụ không bạn? Chia sẻ Zalo thì có chứ comment Zalo thì mình chưa thấy

      Trả lời
  3. thuc nguyen says:
    8 năm trước

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

    Trả lời
  4. vinhchiase says:
    9 năm trước

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

    Trả lời
  5. For News says:
    9 năm trước

    Đạ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..

    Trả lời
  6. Anh Plus says:
    9 năm trước

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

    Trả lời
  7. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    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 laugh

    Trả lời
  8. Đàm Kiên says:
    9 năm trước

    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

    Trả lời
  9. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    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

    Trả lời
  10. Đàm Kiên says:
    9 năm trước

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

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    62 chia sẻ
    Chia sẻ 60 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Cách bỏ gạch đỏ trong Word/Excel/PowerPoint

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • SEOer những lúc mệt mỏi nên làm gì?

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • Template MagNews bản quyền – Chia sẻ hoàn toàn miễn phí

    14 chia sẻ
    Chia sẻ 11 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.