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
- Đăng nhập Blogger
- Bố cục> Thêm tiện ích> HTML / Javascript
- Chọn 1 trong 2 code sau
- Dán code đã chọn vào và save
Style#1 Huy hiệu hình tròn
Style#2 Huy hiệu hình vuông
<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:1000;font-size:1.6em;line-height:9.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">Minh Trí - Star</a></h1></div>
Style#2 Huy hiệu hình vuông
<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:1000;font-size:1.6em;line-height:9.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">Minh Trí - Star</a></h1></div>
Minh Trí - Star Official
EmoticonEmoticon