Simple Social Media Share Buttons adds an advanced set of social media sharing buttons to your Blogspot sites, such as: Facebook, WhatsApp, Viber, Twitter, Reddit, LinkedIn and Pinterest...

Các nút chia sẻ bài viết mạng xã hội đơn giản cho Blogspot. Các bước cài đặt như sau:

Bước 1: Thêm thư viện font awesome nếu blog của bạn có rồi thì bỏ qua bước này.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>

Bước 2: Thêm CSS

a{text-decoration:none}

.social-share-btns-container{overflow:hidden;position:relative;left:0;font-size:0;top:50%;margin:1px 0;text-align:center;width:100%;z-index:111}

.social-share-btns{display:inline-block;overflow:hidden}

.social-share-btns .share-btn{float:left;margin:0 5px;padding:8px 16px;border-radius:3px;color:#fff;font-size:14px;line-height:18px;vertical-align:middle;-moz-transition:background 0.2s ease-in-out;-o-transition:background 0.2s ease-in-out;-webkit-transition:background 0.2s ease-in-out;transition:background 0.2s ease-in-out}

.social-share-btns .share-btn i{margin-right:5px;display:inline-block;font-size:18px;vertical-align:middle}

.share-btn{background-color:#95a5a6}

.share-btn:hover{background-color:#798d8f}

.share-btn-twitter{background-color:#00aced}

.share-btn-twitter:hover{background-color:#0087ba}

.share-btn-facebook{background-color:#3b5998}

.share-btn-facebook:hover{background-color:#2d4373}

.share-btn-linkedin{background-color:#007bb6}

.share-btn-linkedin:hover{background-color:#005983}

.share-btn-reddit{background-color:#ed001c}

.share-btn-reddit:hover{background-color:#ba0016}

.share-btn-mail{background-color:#f1c40f}

.share-btn-mail:hover{background-color:#dab10d}

.credits{font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;position:fixed;left:0;bottom:0;background-color:rgba(0,0,0,0.7);width:100%;z-index:1111;letter-spacing:0.04em;font-size:10px;text-transform:uppercase}

.credits a{color:rgba(255,255,255,0.5);display:inline-block;padding:4px 4px;text-decoration:none}

.credits a:hover{color:#fff}

Bước 3: Thêm HTML các bạn tìm thẻ <div class='post-footer'> và dán đoạn HTML này dưới nó.

<div class='social-share-btns-container'>

  <div class='social-share-btns'>

    <a class='share-btn share-btn-twitter' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' rel='nofollow' target='_blank'>

      <i class="fa fa-twitter" aria-hidden="true"></i> Tweet </a>

    <a class='share-btn share-btn-facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' rel='nofollow' target='_blank'>

      <i class="fa fa-facebook" aria-hidden="true"></i> Facebook </a>

    <a class='share-btn share-btn-linkedin' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url.canonical' rel='nofollow' target='_blank'>

      <i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin </a>

    <a class='share-btn share-btn-reddit' expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url.canonical + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>

      <i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit </a>

    <a class='share-btn share-btn-mail' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' rel='nofollow' target='_blank' title='via email'>

      <i class="fa fa-envelope-o" aria-hidden="true"></i> Email </a>

  </div>

</div>

Như vậy là bạn đã tạo xong một bộ nút chia sẻ bài viết cho blogspot lên các mạng xã hội đơn giản và đẹp mắt.