Social Media Share Buttons chia sẻ bài viết blogspot

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

Bài viết: Social Media Share Buttons chia sẻ bài viết blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Social