[Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger
[Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger ấn tượng từ cái nhìn đầu tiên!

Thêm một thủ thuật blog liên quan đến Social Buttons cho blogspot blogger nhé cả nhà, thủ thuật blog lần này có tên là [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger. Ở thủ thuật này, các nút buttons sẽ trông rất lớn, giao diện metro phẳng, làm người dùng ấn tượng ngay từ giây phút đầu tiên nhìn vào...thủ thuật mới đây liên quan đến social buttons mà Terocket đã giới thiệu có tên là [Tips] - Tạo nút Social Buttons hiệu ứng bong bóng mờ cho Blogspot Blogger và nếu các bạn thấy hay, hãy áp dụng thủ thuật đó nữa nhé!

Live Demo

Giờ chúng ta sẽ đi vào thực hiện thủ thuật [Tips] - Tạo nút Social Buttons lớn kiểu Metro bóng mờ cho Blogspot Blogger này nha, thủ thuật này rất đơn giản, chỉ cần vài thao tác nhỏ là có thể hoàn thành rồi. Ưu điểm của thủ thuật này đó là hoàn toàn không dùng Javascript trong mã code, chỉ sử dụng HTML5 chuẩn SEO mà thôi. Nên bạn đọc hãy yên tâm nha! Giờ thì bắt đầu tạo thủ thuật nào.

Đầu tiên cần tạo 1 widget HTML/Javascript và copy đoạn mã code dưới đây vào và lưu lại

Trước hết, hãy vào Blog Title → Layout → Add Widget → HTML/JavaScript và copy đoạn mã sau đây vào nhé. Sau đó hãy Lưu lại.

<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/Terocket" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFNjE9lqRxIdluKeatrtQGel9WbwSJ11nArTGYcsjX2R00SmG5eQecc1Squ1iXhS2rAT_U_QsVwU_-tz3Sb6opb3oej7CmKrL59qMNwHHzfizZ1iTKQzF4r7wQad1szdhelTOHqSG6D6w/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/Terocket" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Z_yhSNnqWz9P6ZHVSgW1R09oDU44h-tpToevf7MlVwkzi-RqI7YPMMoIbH5w4mTFDCozYmFndg1x2GPDChh4KTWLY6mpBZLWuncPcXiT62UevgpE7eMv7nociNNwmjm4dmDxKpSZRzk/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/Terocket" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-o2CjdhQD8JMdBkdIIq8zXWIg2XDuraXxxnacJrM60BtwRvgjCSbGNwuuFtl-iqBaqsE8Zgqj7Clat02Y9afLMptcUihkm9Rre3pFKa6r5HrbgdloTiNPJ9Eu1KMjafqvuLlv2Fp-LVI/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/Terocket" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUPkY4xz9k0oSx1neg1-Kvq6AZGIr_PuATIiRY9geDFDC_cRK5hBqYrnXpn5BeiH4qmc1mLjJZ0A9yXMhGv60fAZq-ErPqqdJ2hIMLjHhu5VaGTX4KR84YqGApTxcUxPC8804MXmQ6PE/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}
#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}
#abt-social-icons li a span {
 display: none !important;
}
</style>

Ghi chú: Hãy thay đổi Terocket thành địa chỉ của Facebook, Twitter, Google Plus... của bạn nha! Chúc thành công!

Cuối cùng cũng đã xong thủ thuật blog này rồi, bạn thấy thế nào? Ok chứ ^^. Nếu thấy hay hãy share đến bạn bè của mình nha, và nếu chưa hiểu đoạn nào, hãy gửi một comment ở dưới đây, Terocket sẽ giải đáp mọi thắc mắc của bạn! Chúc vui vẻ!

Thủ thuật blogspot liên quan đến nút Buttons Social tại Terocket

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