Nút chia sẻ thanh lịch, tinh khiết cho Blogspot

Hôm nay, mình đã tạo 1 tiện ích chia sẻ khá đơn giản bên Blog Vũ Văn Phong và được nhiều bạn đón nhận đánh giá tốt. Đây có lẽ là nút chia sẻ qua mạng xã hội được chú ý tới bởi màu sắc tượng trưng và có chút gì đó hơi ẩn bí trong nó.

- Và bài viết này ITViet360 sẽ chia sẻ ngay với bạn thủ thuật để thêm được nút chia sẻ thanh lịch, tinh khiết cho blogger đó.

Ví dụ bạn xem DEMO tại 1 bài viết: Cài đặt Domain cho Blogspot

Hướng dẫn thêm nút chia sẻ thanh lịch, tinh khiết cho Blogger

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: (Ctr + F) Tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

@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;
}

Bước 3:
Tiếp theo mình tìm tới <data:post.body/> và dán đoạn code dưới đây ngay dưới nó.
Lưu ý: Nếu có nhiều <data:post.body/> thì bạn hãy lựa chọn đúng vị trí cần hiển thị nhé

<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>
Bước 4: Lưu lại mẫu và xem kết quả nhé !

Read more: http://www.itviet360.com/2014/07/nut-chia-se-thanh-lich-tinh-khiet-cho-blogspot.html#ixzz3zfZYT6N2

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..