Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot
Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot cực kỳ đẹp mắt đấy nhé!
Tiếp tục với chuỗi bài viết về thủ thuật blog mà Terocket đã giới thiệu, hôm nay chúng ta sẽ đến với thủ thuật blogspot cũ mà mới về Nút share buttons facebook, google, twitter...có tên gọi là Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot.

Live Demo

Với bộ nút share buttons này khá là đơn giản, hiện đại và tốc độ tải nhanh....không ảnh hưởng đến tốc độ chung và trải nghiệm của người dùng. Áp dụng giao diện metro phẳng, cực kỳ đẹp mắt. Và giờ hãy cùng Terocket thực hiện Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot này nhé.

Đầu tiên bạn cần thêm CSS vào HTML của Blog

Bạn đi đến Blog Title → Template → Edit HTML. Tìm kiếm ]]></b:skin> và chèn đoạn mã code sau vào trước ]]></b:skin> nhé.

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font: 2.5em/2em 'zocial', sans-serif;
  color: white;
  line-height: 2.2;
}
.post-social .facebook {
  background: #3B5998;
}
.post-social .twitter {
  background: #4099FF;
}
.post-social .googleplus {
  background: #db5a3c;
}
.post-social .social {
  float: left;
}
.post-social .zocial-facebook {
  margin: 0 15px;
}
.post-social .zocial-twitter {
  margin: 0 25px;
}
.post-social .zocial-googleplus {
  margin: 0 25px;
}
.post-social li {
  min-width: 180px;
  width: 210px;
  height: 80px;
  cursor: pointer;
  list-style: none;
  text-align: left;
  float: left;
}
.post-social li:hover [class*="zocial-"]:before {
  opacity: 0.5;
  text-align: right;
}
.post-social li:hover iframe {
  opacity: 1;
}
.post-social li iframe {
  margin-top: 30px !important;
  opacity: 0;
  transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
  margin: 30px 20px !important;
}

Tiếp theo bạn cần thêm HTML & Javascript vào HTML Blog của bạn

Đầu tiên bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm <data:post.body/> và dán đoạn mã code sau vào sau <data:post.body/>.  Và lưu lại thôi.

Ghi chú: Bạn cần biết là <data:post.body/> có khoảng 3 đoạn như vậy, bạn cần tìm đúng đoạn trong templates của mình, nếu đoạn này không được, hãy thử lại đoạn khác. Hãy nhớ sao lưu templates trước khi thực hiện bất cứ hành động nào nha.

<ul class="post-social">
  <li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>
  </li>
  <li class="twitter">
      <span class="social zocial-twitter"></span>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>
  </li>
  <li class="googleplus">
        <span class="social zocial-googleplus"></span>
    <g:plusone size="medium"></g:plusone>
  </li>
</ul>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Vậy là đã xong thủ thuật Bộ nút Share Buttons CSS mờ trong suốt cho Blogger/Blogspot cực kỳ đẹp mắt rồi đúng không nào. Nếu bạn nào làm được rồi hãy share đến bạn bè nội dung này nhé, nếu chưa được, hãy gửi một bình luận ở dưới đây, Terocket và các bạn sẽ hướng dẫn chi tiết hơn nha.
Tìm hiểu thêm các thủ thuật về nút Share Buttons khác
  1. [Tips] - Bộ nút Share Buttons hiệu ứng tự động hiện ở dưới lên cho Blogspot Blogger
  2. [Tips] - Nút buttons động bằng CSS3 cho Blogger V1
  3. [Tips] - Nút Facebook share trượt hai bên cho Blogger
  4. Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng
  5. Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)
  6. Tạo nút Back to Top cho blogger với JQuery
  7. Tạo social button với hiệu ứng xoay tròn trên header
  8. Nút like với hiệu ứng ẩn hiện trên sidebar cho blogspot
  9. Mã iframe nút Google +1 cho mọi blog
  10. Nút like ẩn hiện khi xem bài viết blogger
  11. Thêm nút Social bookmark cho blogger
  12. Floating Social Bookmark trượt đẹp cho blogspot
  13. Hộp like và đăng ký ở cuối bài viết cho blogger
  14. Nút Share trượt hình quả trứng cho blogspot
  15. Nút Google+1,Tweet,Like, Pin It buttons theo chiều ngang
  16. Nút Share hặc Menu quay vòng bằng CSS3 cho Blogger
  17. Tiện ích các nút Share trượt dọc cho Blogspot (sticky sidebar)
  18. Chèn nút nhúng Linkhay và Tagvn vào Blogger
  19. Facebook like button cho Blogspot
Trứng Vịt - Terocket