2 Kiểu Blog Badge đẹp cho blog

Hôm nay mình sẽ giới thiệu với các bạn 2 mẫu huy hiệu cho blog của bạn. Nó có hiệu ứng hover cực kì bắt mắt và đặc biệt hơn là tiện ích này hoàn toàn là CSS nên bạn không cần quá lo lắng về việc nó sẽ làm chậm blog của bạn đi.

#Thêm HTML/Javascript

1. Đăng nhập Blogger

2. > Bố cục > Thêm Tiện Ích > HTML/Javascript

3. > Chọn code tương ứng với 1 trong 2 style dưới

4. > Dán code đã chọn vào và save

Style#1 Huy hiệu hình vuông

Khanh Blog

<style>
.square{background:#fff;border-radius:4px;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.square 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}
.square h1 a{color:rgba(189,185,199,0);text-decoration:none}
.square:before,.square:after{border-radius:4px;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}
.square:after{transform:rotate(45deg)}
.square:hover:before,.square: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)}
.square:hover > h1 a,.square:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="square">
  <h1><a href="Your Link Here">Khanh Blog</a></h1>
</div>

Style#1 Huy hiệu hình tròn

Khanh Blog

<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>
<div class="circle">
  <h1><a href="Your Link Here">Khanh Blog</a></h1>
</div>

blogolect