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

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 !