Simple Social Media Share Buttons 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é!

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.

Bạn cũng có thể xem thêm nhiều Simple Social Media Share Buttons Blogspot

Bài viết: Simple Social Media Share Buttons 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