Menu ngang với icon ẩn hiện từ CSS3 cho blogger

[tintuc]
Thiết kế blogger xin giới thiệu một các tạo Menu ngang với icon ẩn hiện từ CSS3 cho blogger

XEM DEMO


Cách tạo menu ngang với các icon ẩn hiện khi dê chuột cho blogspot:

1. Đăng nhập vào blog
2. Chọn Bố cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo một tiện ích HTML/Javarscipts và dán đoạn code bên dưới và dán vào phần nội dung của tiện ích bạn vừa tạo (Tất nhiên nếu muốn bạn có thể thêm nó trực tiếp vào trong Template của bạn).
<style>
#cuahangtemplate-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#cuahangtemplate-nav li {float: left;}
#cuahangtemplate-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;}
#cuahangtemplate-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);}
#cuahangtemplate-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#cuahangtemplate-nav li a:hover {cursor: pointer;}
#cuahangtemplate-nav li a:hover img {top: -85px;}
#cuahangtemplate-nav li a:hover .aname {top: 85px;}
#cuahangtemplate-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#cuahangtemplate-nav li:nth-child(2) a {background: #9bc704;}
#cuahangtemplate-nav li:nth-child(3) a {background: #0dc3ff;}
#cuahangtemplate-nav li:nth-child(4) a {background: #51a2ec;}
#cuahangtemplate-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 
</style>
<div id="cuahangtemplate-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>
» Tùy chỉnh: 
  • margin: 100px auto; Bạn có thể chỉnh lại đoạn này để định dạng lại vị trí của menu so với lề trên, lề dưới, lề phải và lề trái của tiện ích chứa menu.
  • Thay các dấu thăng (#) thành các liên kết tới các bài viết hoặc các nhãn mà bạn muốn.
  • Thay các chữ màu cam thành tiêu đề tương ứng với các liên kết (#) mà bạn đã thêm trước đó.
  • Cuối cùng quan trọng nhất là sửa những hình ảnh màu xanh đại diện cho tiêu đề và liên kết đó của bạn.
  • Bạn có thể thay đổi màu nền của  từng ô trên menu bằng cách thay đổi những đoạn được namkna tô màu cam. Tất nhiên nếu không biết mã màu nào thích hợp bạn có thể xem chúng Tại đây.
  • width: 632px; Là chiều rộng của menu.
  • height: 87px; Là chiều cao của menu.
  • color: white;width: 120px;height: 61px; Lần lượt là Màu chữ trên menu, Chiều rộng của mỗi một ô tiêu đề nhỏ trên menu, chiều cao của một ô chứa tiêu đề nhỏ trên menu.
  • font: bold 17px/61px "Arial" Trong đó 17px là cỡ chữ của tiêu đề, Arial là kiểu chữ mà bạn muốn.
  • top: -85px; Là vị trí của hình ảnh xuất hiện khi dê chuột vào. Nếu bạn muốn hình ảnh hiện nhiều hay ít thì chỉnh ở đoạn này nha.
4- Lưu tiện ích lại và kiểm tra thành quả nha.

chúc các bạn thành công!
[/tintuc]

Không có nhận xét nào:

Đăng nhận xét

cảm ơn bạn đã đọc bài viết!
-hãy viết nội dung dễ đọc,tránh lời lẽ thô tục
-vui lòng không spam comment hoặc comment nặc danh
-mọi thắc mắc nếu chưa được giải đáp kịp thời xin liên lạc qua số 0167 561 3351
Thanks You!

MUA HÀNG: YAHOO: cuahangtemplate -
BACK TO TOP