Tạo nút chia sẻ bài viết lên các trang mạng xã hội giống news.zing.vn

Tài liệu
Tạo nút chia sẻ bài viết lên các trang mạng xã hội giống news.zing.vn
Chuyên mục
Người đăng
Đăng vào
Chào các mừng bạn đã trở lại Tôi Share Blog, cũng đã lâu rồi mình cũng chưa chia sẻ gì về blogspot rồi. Nên chính vì thế hôm nay mình sẽ đem đến cho các bạn một code nút chia sẻ bài viết lên các trang mạng xã hội giống news.zing.vn, Code và Hướng dẫn ở bên dưới.

HƯỚNG DẪN CÁCH LÀM:

Bước 1 : Thêm thư viện icon Font Awesome lên trên </head>
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Bước 2 : Tìm thẻ <data:post.body/> và thêm code bên dưới xuống dưới nó, bạn nên thử từng thẻ
<style>
  .the-article-tools{width:40px;position:fixed;top:40%;left:0;list-style:none;z-index:999;background:#f7f7f7;border:1px solid #e4e4e4;border-left:0;border-top-right-radius:5px;border-bottom-right-radius:5px;padding:0!important;margin:0!important}
  .the-article-tools li{width:40px;height:40px;line-height:42px;float:left;display:block;cursor:pointer;font-size:16px;text-align:center;position:relative;margin-right:5px}
  .the-article-tools li a{color:#888;display:block;width:100%;height:100%}
  .the-article-tools li a span{color:#888}
  .the-article-tools li span.label{display:none;height:30px;line-height:30px;border-top-right-radius:15px;border-bottom-right-radius:15px;position:absolute;left:60px;top:7px;white-space:nowrap;padding:0 15px 0 6px;background:#444;color:#FFF;font-size:12px}
  .the-article-tools li span.label:before{content:&quot;&quot;;top:0;left:-14px;position:absolute;display:block;width:0;height:0;border-top:15px solid transparent;border-right:15px solid #444;border-bottom:15px solid transparent}
  .the-article-tools li.btnFacebook span.label{background:#306199;color:#FFF}
  .the-article-tools li.btnFacebook span.label:before{border-right-color:#306199}
  .the-article-tools li.btnFacebook span.counter{display:block;width:100%;height:100%;position:absolute;top:-25px;height:24px;background:#1F73D2;font-size:12px;font-weight:700;color:#fff;line-height:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  .the-article-tools li.btnFacebook span.counter a{color:#fff}
  .the-article-tools li.btnTw span.label{background:#1da1f2;color:#FFF}
  .the-article-tools li.btnTw span.label:before{border-right-color:#1da1f2}
  .the-article-tools li.btnGp span.label{background:#db4437;color:#FFF}
  .the-article-tools li.btnGp span.label:before{border-right-color:#db4437}
  .the-article-tools li.btnEmail{background:#fcb400}
  .the-article-tools li.btnEmail span.label{background:#00AEE8;color:#FFF}
  .the-article-tools li.btnFontStyle{font-size:10px;display:none}
  .the-article-tools li.btnFontSize{display:none}
  .the-article-tools li.btnComment{height:auto}
  .the-article-tools li.btnComment a{display:inline-block}
  .the-article-tools li.btnComment span.label{background:#1eaf8b;color:#FFF}
  .the-article-tools li.btnComment span.label:before{border-right-color:#1eaf8b}
  .the-article-tools li.btnComment span.counter{display:none}
  .the-article-tools li.btnError span.label{background:#dc0000;color:#FFF}
  .the-article-tools li.btnError span.label:before{border-right-color:#dc0000}
  .the-article-tools li:hover{font-size:20px;line-height:44px}
  .the-article-tools li:hover span.label{display:block}
  .the-article-tools li:hover.btnFacebook a{font-size:20px}
  .the-article-tools li:hover.btnFacebook a i{color:#4368D2}
  .the-article-tools li:hover.btnTw a i{color:#1da1f2}
  .the-article-tools li:hover.btnError a i{color:#c10000}
  .the-article-tools li:hover.btnGp a i{color:#db4437}
  .the-article-tools li:hover.btnComment a i{color:#000}
</style>
<ul class='the-article-tools'>
  <li class='btnFacebook'>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
      <i class='fa fa-facebook'/>
    </a>
    <span class='label'>
      Chia sẻ lên FB
    </span>
  </li>
  <li class='btnTw'>
    <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
      <i class='fa fa-twitter'/>
    </a>
    <span class='label'>
      Chia sẻ qua Twitter
    </span>
  </li>
  <li class='btnGp'>
    <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
      <i class='fa fa-google-plus'/>
    </a>
    <span class='label'>
      Chia sẻ qua Google Plus
    </span>
  </li>
  <li class='btnError'>
    <a href='https://www.facebook.com/messages/t/100022427022311' rel='nofollow' target='_blank' title='Góp ý báo lỗi'>
      <i class='fa fa-pencil'/>
    </a>
    <span class='label'>
      Góp ý &amp;amp; Báo lỗi
    </span>
  </li>
  <li class='btnComment'>
    <a href='#facebook-cmt' title='Bình luận'>
      <i class='fa fa-comments-o'/>
    </a>
    <span class='label'>
      Bình luận
    </span>
  </li>
</ul>
Chúc bạn thành công !

Hiện có bình luận

Thông báo
Dịch vụ tăng tương tác bán hàng trên Instagram, tăng auto like bài viết, hình ảnh video, tăng lượt theo dõi (follower) nick Instagram. Xem ngay »
Xong