Terocket đang muốn mang niềm vui và sự bất ngờ đến cho các thành viên của Terocket đây, một thủ thuật rất hay và cực kỳ đẹp mắt dành cho việc tạo một nút huy hiệu badge, và thủ thuật đó có tên là [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger. Hay còn gọi là huy hiệu 7 sắc cầu vòng!

Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
Khi đặt Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng vào Blog của bạn, sẽ tạo nên nét ấn tượng và trẻ trung lạ thường đó.

Ấn tượng đầu tiên khi nhìn thấy cái tiện ích này đó là nó lớn, và khá nổi bật, nhưng điều thực sự làm điểm nhấn nhất của tiện ích này đó là khi rê chuột vào, các hình hoa văn xen lẫn nhau hiện ra, phối và kết hợp bởi bảy sắc cầu vồng, hiệu ứng xoắn ốc từ ngoài vào trong rồi từ trong ra ngoài, thực sự quá ấn tượng và phấn khích. Hãy thử xem demo đi, bạn sẽ muốn tạo ngay thủ thuật [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger này cho các bài viết hay các điểm nhấn chuyên mục lớn của website mình đó. Hãy đặt nó một bên sitebar nhé, rất phù hợp đó.
Giờ thì hãy cùng Terocket thực hiện thủ thuật blog [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger này nha cả nhà.

Để thực hiện thủ thuật blog này, chỉ cần vài thao tác nhỏ sau đây mà Terocket sẽ hướng dẫn thì các bạn sẽ làm được.

Bước 1 - Thêm mã CSS sau vào HTML tổng thể của website bạn

Đầu tiên bạn hãy vào Blogger.com -> Blogger của bạn muốn thực hiện thủ thuật -> Mẫu -> Chính sửa HTML -> Nhấn tổ hợp phím Ctrl + F và tìm kiếm </b:skin>. Sau đó đặt đoạn CSS sau vào dưới </b:skin> nhé. Và Lưu lại.

<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>

Bước 2 - Hãy đặt đoạn HTML sau vào nơi nào bạn muốn tiện ích huy hiệu xuất hiện

Các bạn có thể đặt tiện ích này ở trong bài viết hoặc ở một widget HTML/Javascript nào đó. Và ở thủ thuật này Terocket sẽ hướng dẫn các bạn cách đặt ở trong một widget nha.

Đầu tiên các bạn vào Bloger.com → 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="circle">
<h1><a href="http://www.terocket.com">Your Blog Title</a></h1>
</div>

 Ghi chú: Hãy thay thế http://www.terocket.com thành địa chỉ của bạn & Your Blog Title thành chữ mà bạn muốn hiện nha.

Ok, vậy là đã xong thủ thuật blog với tiện ích [Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger tại Terocket rồi. Chúc các bạn thành công nha!

Nếu bạn nào muốn tham khảo thêm nhiều thủ thuật về các nút Buttons cho blogspot nữa thì tham khảo các bài viết dưới đây nha.

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