BLOGSPOT BADGEBLOGSPOT BUTTONTHỦ THUẬTTHỦ THUẬT BLOGTHỦ THUẬT BLOGGER
[Tips] - Nút Huy hiệu / Badge Buttons tròn, hoa văn 7 sắc cầu vòng cho Blogspot Blogger
Hướng dẫn thủ thuật blog 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 cả nhà nhé!
Chia sẻ:
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!
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!
