Hướng dẫn các bạn tạo bộ Social Media Share Buttons chia sẻ bài viết blogspot đơn giản và đẹp mắt, các nút chia sử như facebook, twitter, linkedin, email...

Các bước thực hiện để thêm nút chia sẻ của Social Media Share Buttons chia sẻ bài viết blogspot như sau:

Bước 1: Thêm 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

.share{text-align:center;margin-left:0;margin-right:0;float:left;clear:both;width:100%}

.share ul{margin:40px 0 0 0;padding:0;display:flex}

.share ul li{list-style:none;transition:1s}

.share ul li a{display:block;width:40px;height:40px;line-heigth:60px;text-align:center;background:#262626;color:#fff;border-radius:50%;font-size:20px;margin:0 4px;cursor:pointer}

.share ul li a:hover{box-shadow:0 1px 7px 1px #888383;transition:0s cubic-bezier(0.67,-0.02,0.58,1)}

.facebook,.twitter,.email,.linkedin,.pinterest,.whatsapp{margin-top:10px}

.share ul li:nth-child(1) a{background:#3b5999}

.share ul li:nth-child(2) a{background:#55acee}

.share ul li:nth-child(3) a{background:#0077b5}

.share ul li:nth-child(4) a{background:#e4405f}

.share ul li:nth-child(5) a{background:#25d366}

.share ul li:nth-child(6) a{background:#dd4b39}

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="share">

<ul>

<li><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url.canonical' target='_blank'><i class="fa fa-facebook facebook"></i></a></li>

<li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' target='_blank'><i class="fa fa-twitter twitter"></i></a></li>

<li><a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url.canonical' target='_blank'><i class="fa fa-linkedin linkedin"></i></a></li>

<li><a expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url.canonical + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' target='_blank'><i class="fa fa-pinterest pinterest"></i></a></li>

<li><a expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' target='_blank'><i class="fa fa-whatsapp whatsapp"></i></a></li>

<li><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url.canonical' target='_blank'><i class="fa fa-envelope-o email"></i></a></li>

</ul>

</div>

Như vậy là bạn đã có bộ chia sẻ bài viết cho blogspot đẹp mắt, đơn giản và chuyên nghiệp.