Hướng dẫn tạo bộ Social Media Share Buttons cho blogspot

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.

Hướng dẫn tạo bộ Social Media Share Buttons cho blogspot
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>

Xem thêm

Nhận xét