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/

thiết bị phòng chụp | bán chân đèn flash | bán đèn chụp ngoại cảnh | bán đèn quay phim | bán đèn chụp sản phẩm | remote trigger godox | đèn flash canon speedlite | đèn led chụp hình sản phẩm | bóng đèn flash | túi đựng máy ảnh | phụ kiện máy ảnh | bàn chụp sản phẩm | thiết bị chống rung máy quay phim | máy ép PLASTIC | thang chụp hình | máy chụp hình sản phẩm | máy in ảnh hiti | chân máy ảnh chụp hình | pin sạc máy ảnh | máy đo sáng | tủ chống ẩm máy quay phim | bán đèn flash | đèn flash hylow | Đèn Flash studio | đèn flash Jinbei | đèn flash photon | bộ kít đèn flash Jinbei | bộ kít đèn flash | Chân máy ảnh | setup phòng chụp sản phẩm | softbox | tấm hắt sáng | bán chân đèn studio | dàn treo đèn | chóa đèn tổ ong | phông nền 3d | dù chụp hình | giá treo phông chụp hình | thanh trượt dolly | tay cầm máy quay phim | phông chụp hình 3d | phòng chụp đám cưới |

Leave a Comment