Home » Thủ thuật blog
CSS menu liDock - Một dạng menu Dock
Thứ Năm, 21 tháng 5, 2009
[FD's BlOg] - Lại một bài viết về thủ thuật tạo các thanh menu cho blog, lần này mình giới thiệu một menu nằm ngang, không có sổ dọc. Với hiệu ứng tương tự menu Dock, nhưng ko có dùng ảnh. Thủ thuật sử dụng sử dụng trực tiếp hiệu ứng vào thẻ <li> nên có tên là liDock.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/dock-menu.htmHình minh họa:

Do việc sử dụng hiệu ứng lên các thẻ <li> nên các menu đều đồng nhất với nhau, tức là có kích thước bằng nhau. Vì vậy muốn hiển thị cho đẹp, các bạn nên cân chỉnh kích thước của các menu cho phù hợp.
☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}
ul#navlist li {
float: left;
width: 60px;
height:24px;
}
ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}
ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
- Lưu ý :
+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào
5. Save template.
6. Tạo một widget HTML/Javascript, rồi chèn code HTML bên dưới vào.
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
7. Save widget.
Chúc các bạn thành công.

- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Tạo thumb cho bài đăng phổ biến
- Tạo lại header cho chuẩn Seo
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- ANCData - Plugin load feed Blogger version 1
- Đưa Radio vào Blog của bạn (Yêu cầu)
Comments[ 0 ]
Đăng nhận xét