Trước đây thì Terocket đã giới thiệu rất nhiều thủ thuật blog liên quan đến nút social buttons rồi, những thủ thuật blog đó đều rất ấn tượng, đẹp mắt và phù hợp với mọi website. Hôm nay, tiếp tục với chủ đề về Social Buttons, Terocket giới thiệu đến các bạn một bộ nút khác, đơn giản hơn, ấn tượng hơn, hiện đại hơn và trẻ trung hơn có tên là [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger.

[Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger
Thủ thuật blog Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này thực sự sẽ làm thay đổi bộ mặt website của bạn đấy!

Với thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mới này, sẽ có 4 nút Facebook, Twitter, Google+ và Feed RSS cả nhà nhé. Nó liên kết trực tiếp đến URL các fanpage và cộng đồng của các bạn. Mang màu sắc cổ điển, đơn giản và chủ đạo là đen trắng, nhưng có điểm nhấn ấn tượng hơn đó chính là khi rê chuột vào, nó sẽ ra các biểu tượng sinh động, màu sắc rất tươi mới, cảm giác thay đổi như thấy vườn địa đàng vậy. Chắc chắn bạn sẽ rất thích.
Và để thực hiện thủ thuật blog [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này, chỉ cần vài thao tác rất đơn giản. Nào cùng Terocket thiết kế nó nhé.

Để thực hiện tiện ích này, chỉ cần Add đoạn mã code sau vào HTML/Javascript và Lưu lại

Đầu tiên bạn vào Blog Title → Layout → Add Widget → Chọn HTML/JavaScript và chép đoạn mã code sau vào trong HTML của Widget và Lưu lại nhé.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="http://facebook.com/Terocket" target="_blank">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/Terocket" target="_blank">Twitter</a></li>
<li><a class="google-p" href="http://plus.google.com/Terocket" target="_blank">Google plus</a></li>
<li><a class="rss" href="/feeds/posts/default?orderby=UPDATED" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXODG-NWV4TWm9vJxWQM-gbBnAO9A9EnD5I1-i-4a4sr-EJQ8u4aJLMEhbwscy_yp_mdXQVMe3FCEfEemLnBXjZXHjk59MKc20G6qwW4Z-clOdRKssy2d8AOg4zJjl-ruWM0d0K5mrw/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXODG-NWV4TWm9vJxWQM-gbBnAO9A9EnD5I1-i-4a4sr-EJQ8u4aJLMEhbwscy_yp_mdXQVMe3FCEfEemLnBXjZXHjk59MKc20G6qwW4Z-clOdRKssy2d8AOg4zJjl-ruWM0d0K5mrw/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qT4HyMwlVmUJ-mMfZckB8MkqkT-ftIAryMte5ItW33L8g4LCR4oj1epRJlQe8Blug7wZ2J1SQX2CERAO-gCXOIxnLqdGqtrbC1lWlFpctaddK0EFGeUJ0NiXo_Rrq98kAjyc9uVkyg/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6qT4HyMwlVmUJ-mMfZckB8MkqkT-ftIAryMte5ItW33L8g4LCR4oj1epRJlQe8Blug7wZ2J1SQX2CERAO-gCXOIxnLqdGqtrbC1lWlFpctaddK0EFGeUJ0NiXo_Rrq98kAjyc9uVkyg/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZxgQMnnrL53XGdl6yC68QJQj-1Ae9CUH5glns_RzHWgjHAkkUMwC-sKH8ai3yiECFGMSxqJOMzlJwln71avuEu80AAPqqrcV0Tnpvf3NVcSGzjkYv3ffZHh9JCD3E1jceN9xJ9Vvwg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZxgQMnnrL53XGdl6yC68QJQj-1Ae9CUH5glns_RzHWgjHAkkUMwC-sKH8ai3yiECFGMSxqJOMzlJwln71avuEu80AAPqqrcV0Tnpvf3NVcSGzjkYv3ffZHh9JCD3E1jceN9xJ9Vvwg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIA_kJkha0tdo4jnr1Qqzret0Ye1VPW0UMpTE7AI1m1qm9vvMyRWfjrYpYSi20X8ioOSGHcilmOzboPEHHCzDLNddBeL7AXgCUVXDNiT247mmylkmhUJgiGweRYLB_FN-LWz6fyAlHA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIA_kJkha0tdo4jnr1Qqzret0Ye1VPW0UMpTE7AI1m1qm9vvMyRWfjrYpYSi20X8ioOSGHcilmOzboPEHHCzDLNddBeL7AXgCUVXDNiT247mmylkmhUJgiGweRYLB_FN-LWz6fyAlHA/s1600/twitter.png) no-repeat 0 0}
</style>

Ghi chú: Bạn cần thay chữ Terocket thành địa chỉ các trang cộng đồng của bạn nha. Thế là xong!

Ok, vậy là thủ thuật [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger mà Terocket vừa hướng dẫn trên đây đã xong rồi, chúc các bạn thành công và có được những blog thật đẹp nha. 

Ai đã làm được rồi, hãy share nội dung [Tips] - Tạo nút Social Buttons cổ điển trượt màu khi rê chuột vào cho Blogspot Blogger này đến bạn bè, ai chưa hiểu chổ nào thì gửi ý kiện bình luận, Terocket sẽ giải đáp cho các bạn nha!

Ở dưới đây còn một số thủ thuật liên quan đến Social Buttons nữa cho bạn, tham khảo nó nhé

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