Menu ngang hiện Icon khi rê chuột từ CSS3 cho blogger

(Viettin365.com) - Với xu hướng để đáp ứng cả về thẩm mĩ và tốc độ load trang rất nhiều nhà thiết kế sử dụng hình ảnh kết hợp với CSS3 trong tiến trình hoạt động của menu. Với kỹ thuật này họ phải tập trung để trang của bạn tải nhanh hơn và tính tương tác cao hơn. Trong hướng dẫn làm meuu này chúng ta sẽ thấy các icon ẩn hiện rất mượt mà khi di chuột trên thanh menu mà không cần sử dụng bất kỳ thư viện JavaScript, tất cả thuần túy chỉ là các biểu tượng và CSS3.

Ảnh minh họa :

Các bước thực hiện

1.Đăng nhập Blogger
2. Chọn bố cục

3. Thêm tiện ích HTML/Javascripts và dán code bên dưới vào       

<style>
#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;} 
</style>
<div id="btrix-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUuSHArSDsf0WAoGHOBOkp_wO7tG-ev7Qmb5_bQ-6Epd45jz7M3kqhtCbk4aquHC76GCv4VulbiWC8tgXiRMYz-_pIzh4g5V929pTCnmKxVvf2iOU4Xq7QXXpF-BQ5llvJLjqdVjc4vEw/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0PbAOMF9E8oGThgEHFW2MncxDXhys1WBsrzSmqi16QAgkwpvwhcY4Jx1bny90t_UtIdCDuiRvX36Y_Q772PKJhgHR_hfXsVWM3DzhBNYaNw9NUmPpB8Zprkr6RXtXu8cJeVF5Ag9C9M/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ic5xFcPVTONR39QqzQqxtk6sNykEuuo174jAaFKRzJ9vXNR640OWh4HHTca4ZS15ontm7Ku2topB-q3ZjPms3Y8IDpIwkMVxrvI9KpQPDoosTQ43CuMnvEjLnogkUCJQvftFaJA4fnE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhevJaWnzutlPNzXFakOWibUO53ltnqBUNSxgFTRgH5Ye9zv8ZaSJOrfj_qbuYz4y50vd_OIAD4z6Gr28g0K4uzpG6nqSRGK5P1BoxXb3fVG6rWvtgK59o3EU3gqT2kC6v0ocpqC4-gf1k/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA8I2Q_uNGFTISbRFC2Qd-PFZLelo4X36d1CZn6sie_4AucwJeRANAJLzXQ3TRNz_ZlhJ_b54CMNZSTYdyCsnaJsK1kOMmFkzDq12oDdqa7mRKgny6V_stfdfN8-QeDzCQ5OhVvwNNmjE/s1600/btrix-contact.png" /> </a> </li> </div>

Thay # thành địa chỉ liên kết hoặc địa chỉ nhãn muốn gắn

Màu xanh tùy chỉnh lại cho phù hợp với blog của bạn 
4. Lưu lại và xem kết quả

Chúc các bạn thành công !