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.5cm/2cm '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, mình 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

Nguồn: http://www.terocket.com/