{tocify} $title = {Mục lục bài viết}

[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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi23vXPrK8PT8J62VEkkylETwO55NfxyuWmNS-XzHRPy9menbogAK2Bq3JqpkM3p61aNfE5B-blF0q9oz1ns2hiRPAk7KlxesIyCvz7GSLPyO0lKJ9PRoYJPif8v5OZnZUw968NA0eUfQ/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2ICA8P0Ymd8HCVdjV1YAp_653h33aF1hGWM29NhYh12nYCBqBldR_3m2zh27ia5-6sILNHTFadsbE0wh5DVwbQkUqFAJ0GNl1re4DGK4R1oi8zYVyK0lO-VX_Ew3Yp6rKkc7igHqPw/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8t_Ns1F_Zh858Py2-0PmSdJP4FhO4Rd8t5nXB-qX40xjJEVBEBItzDn1ntPgH4jKqo7W9QQ_wm0_GZO3JaUR5q_XSucsFwqEyuJOg31iBxkga7cwP6Ko0fuacDTWFgmqqgHjlsIQwxA/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFn7_Pj3II9Il_E9Cc1ypgrQAcUCz7tOLvxWG8N8K-mgThw8Wg57XczUvDlZ3Q1DRQJRPyaqRIiieyOazvnw0cC_Pp4JT-eefukBRft8kYMUfUaDknj9_S2opFiAni-xVAqYZndow9AQ/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUxAA9ehK0eqvsWQNT1ukkOyDQrGmlkDjJ6q-cWOQWHIUG_MRB3eRXZ2G0yzUQNHW0-dIarhE6LqR6YllNTAi2nj1FGEsgDv0CEd3fLhG9uiuuSN4_EfBvZ13BT_G-x8kcS4dl0jWng/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]

Post a Comment

Cửa hàng template Thiết kế blogspot chuyên nghiệp

Để trải nghiệm dịch vụ thiết kế website chuyên nghiệp tại Cửa hàng template

Để trải nghiệm dịch vụ thiết kế website chuyên nghiệp

Chat Zalo
037.561.3351