Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

By Unknown Posted at 8:55 AM HTML 0 comments

Một dạng Code sử dụng làm menu cho Blog, Website khá đẹp và sinh động đang được người dùng Blog, Web hướng tới đó là kiểu mẫu hiệu ứng động khi rê chuột vào. Chỉ với việc sử dụng code CSS + HTML nên sẽ không ảnh hưởng tới tốc độ Load của Web, blog của bạn.

Code Css Icon thay đổi khi rê chuột vào trên Blogspot, Website

DEMO

Để dễ dàng hơn Thế Giới Blog chia sẻ code và hướng dẫn cách làm trên Blogger

1. Code

CSS


/* The CSS Code for the menu starts here bloggertrix.com */
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

HTML


<div id="btrix-nav">
<li>
<a href="http://www.itviet360.com/"><span class="aname">Homes</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia38aiCbS-3hb2n1PPbmzDAkI3-7guph2qVR8vuoPvy6tfKokmgE6Klx2BRAjFYgKQwgkP82AvAntjzY8Ha4nNvKKMkwSTSU4MT1Gek_RQqzR4lbQQn15zXxBML_XOsQxdrBWEk3_Z5PM/s1600/btrix-home.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/Download">
<span class="aname">Download</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZzi4PmV-K_3tsFQjW7lXIdgnaw5i8m4gOB6Vn2RpFKm9PYIiPUvCg8MIJqB6UFd7rZvpE8yO9Twfzzhokoz6U-FNy3DbuI_dMy3sNTeZ4exhCMTyzuv9HfRCVW-oEUOI5l2D9EmAG2U/s1600/btrix-download.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/dich-vu-seo-web-gia-re-giai-phap-tot.html">
<span class="aname"> dvSEO</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdN7XB38fQkj_WX6F2lPTRmUsOwj3s-RixjyaSOYPe3KpmiZkeOvsRnzqlA5YGJ73yIoL8dr5lZhdV-GwiK48a6FUW3RvYumA7LYMNLbny8Nt8cLvkcDsPKf8CdUyftzoblFryqhAC96M/s1600/btrix-mysql.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/search/label/html-css">
<span class="aname"> Html</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjck2t5Vj89PL9TS_8MDtBicRt63gwZ-I6UySexea1OSVlAQKJZmGI1IDWC-DSJoU0kLi8smnIp3oB8lQ1dssIPvpiBbqCw2QIGbTft9Cnz8E3utly0AW_TX5SabImwMjF-BE-IzKVhCnM/s1600/Btrix-html.png" />
</a>
</li>

<li>
<a href="http://www.itviet360.com/p/phong-vu-seo.html">
<span class="aname">Contact</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzdmLUPGrJR8nFw7miDFere6LIbxdTr_lU-1xMBc9-m4xz9WqgGP1Oce-pleIymUk-3TyzYteGch1-q0A-PHjulajfR04XUDKo21VcK5UZstZDXY9r0pwRqZCDWLD31g1jW6UgoWQiA3I/s1600/btrix-contact.png" />
</a>
</li>
</div>

- Những giá trị mình bôi các bạn thay bằng của riêng mình nhé

2. Hướng dẫn trên Blogspot

- Vào bảng điều khiển blogger -> Mẫu (Template) -> chỉnh sửa HTML (Edit HTML)
- Tìm tới đoạn code ]]></b:skin> và dán Code CSS lên trước nó và lưu mẫu lại
- Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code HTML vào tiện ích vừa thêm và lưu lại