Hướng dẫn tạo bộ Social Media Share Buttons cho 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 tạo bộ Social Media Share Buttons cho blogspot với hiệu ứng đẹp, bộ Social Media Share Buttons giúp cho độc giả có thể tương tác share bài khi xem bài viết ngay trên blog của bạn.

Các bước thực hiện như sau:

Bước 1: Thêm Font icon Awesome

<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

.social-container{width:100%;margin:40vh auto;text-align:center} .social-icons{padding:0;list-style:none;margin:1em;width:100%} .social-icons li{display:inline-block;margin:0.15em;position:relative;font-size:1.2em;float:left} .social-icons i{color:#fff;position:absolute;top:21px;left:21px;transition:all 265ms ease-out} .social-icons a{display:inline-block} .social-icons a:before{transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);content:" ";width:60px;height:60px;border-radius:100%;display:block;background:linear-gradient(45deg,#00B5F5,#002A8F);transition:all 265ms ease-out} .social-icons a:hover:before{transform:scale(0);transition:all 265ms ease-in} .social-icons a:hover i{transform:scale(2.2);-ms-transform:scale(2.2);-webkit-transform:scale(2.2);color:#00B5F5;background:-webkit-linear-gradient(45deg,#00B5F5,#002A8F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 265ms ease-in}

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 bên dưới nó, hoặc thêm vào vị trí khác phần xem bài viết.

<div class="social-container">

  <ul class="social-icons">

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

    <li><a expr:href='&quot;https://www.instagram.com/?url=&quot; + data:post.url.canonical' target="_blank"><i class="fa fa-instagram"></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"></i></a></li>

    <li><a expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url.canonical + &quot;&amp;text=&quot; + data:post.title' target="_blank"><i class="fa fa-telegram"></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"></i></a></li>

  </ul>

</div>

Bài viết: Hướng dẫn tạo bộ Social Media Share Buttons cho 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