[FD's BlOg] - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.
Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.
Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các nhãn trong nó sẽ là 1 menu phụ.
Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.
☼ Bây giờ ta bắt đầu vô chi tiết:
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
4. Chèn đọan code sau vào ngay bên dưới thẻ mở <head>
<script src="http://fandung.110mb.com/JS-files/dropdown2.js" type="text/javascript">
</script>
5. Save template lại.
6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.
►CODE:
<style type="text/css">
.nav23{ // CSS của menu chính
height: 30px;
padding: 2px 0 0;
margin-right:5px;
}
.nav23 a, .nav23 a:visited {
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
margin: 0 4px;
padding: 5px 4px;
display: block;
float:left;
}
.nav23 a:hover { // hiệu ứng của menu chính khi có chuột rê vào
background-color: #909090;
color:#FFF;
margin: 0 4px;
padding: 5px 4px;
}
.nav23sub
{ // CSS menu con (phụ)
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid;
cursor:pointer;
}
</style>
<script type="text/javascript">
function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}
function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
// end of define functions!
</script>
<div style="background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif); width: 670px" class="nav23">
<a id="hoctap" href="#" >Học Tập</a>
<a id="thuthuat" href="#">Thủ thuật</a>
<a id="khampha" href="#">Khám Phá</a>
<a id="giaitri" href="#">GiảiTrí</a>
<a id="hinhanh" href="#">Hình Ảnh</a>
<a id="truyen" href="#">Truyện</a>
<a id="cuocsong" href="#">Cuộc sống<a>
</div>
<script type="text/javascript">
otab("hoctap_child");
submn('Study','Study');
submn('Ebooks','Ebooks');
ctab();
at_attach("hoctap", "hoctap_child", "hover", "y", "pointer");
otab("thuthuat_child");
submn('Thu%20Thuat%20Blog','Blog');
ctab();
at_attach("thuthuat", "thuthuat_child", "hover", "y", "pointer");
otab("khampha_child");
submn('Khoa%20Hoc','Khoa Học');
ctab();
at_attach("khampha", "khampha_child", "hover", "y", "pointer");
otab("giaitri_child");
submn('Chuyen%20La','Chuyện lạ');
submn('Truyen%20Cuoi','Truyện cười');
submn('Relax','Thư Giãn');
submn('Xe','Xe độ');
submn('Artists','Nghệ sĩ');
submn('Scandal','Scandal');
ctab();
at_attach("giaitri", "giaitri_child", "hover", "y", "pointer");
otab("hinhanh_child");
submn('Picture','All Pic');
submn('My%20Photo','My Photo');
ctab();
at_attach("hinhanh", "hinhanh_child", "hover", "y", "pointer");
otab("truyen_child");
submn('Truyen%20Ngan','Truyện ngắn');
ctab();
at_attach("truyen", "truyen_child", "hover", "y", "pointer");
otab("cuocsong_child");
submn('Nghe%20Thuat%20Song','Nghệ thuật sống');
submn('Loi%20Khuyen','Lời Khuyên');
submn('Love','Tình Yêu');
ctab();
at_attach("cuocsong", "cuocsong_child", "hover", "y", "pointer");
</script>
-Chú ý :
+ Các code cùng màu (đỏ, xanh dương, xanh, cam, đen, tím, xanh xám)sẽ liên kết với nhau (kiểu : cha - con)
+ Các code màu nâu chính là các nhãn(Label) trong blog của bạn(những nhãn có kí tự khỏang trắng sẽ thay bằng %20), và tên theo sau dòng code màu nâu chính là Tên hiển thị của menu con. Các bạn xem hình minh họa bên dưới sẽ rõ.
+ Thay đổi các nhãn và tên các menu theo như blog của bạn.
Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích" vào phần header thì có thể xem ở đây.
Nguồn từ internet.
Thứ Bảy, 7 tháng 5, 2011
//
Nhãn:
blog
//
0
nhận xét
//
0 nhận xét to "Tạo thanh menu ngang xổ dọc xuống"
Nhãn
- blog (2)
- c (1)
- dotnet (19)
- Đồ họa (1)
- excel (1)
- games (6)
- hedieuhanh (5)
- joomla (4)
- lamoffer (1)
- paidtoclick (1)
- phanmemkhac (1)
- php (31)
- thuthuat (1)
- trochoi (1)
- truyennguoilon (407)
- word (24)
Blog Archive
-
▼
2011
(507)
-
▼
tháng 5
(453)
- Delta Force: Black Hawk Down
- Download Microsoft Windows XP
- Download Windows Server full
- Hướng dẫn sử dụng các HĐH window
- Download Windows 7 Ultimate full
- Hướng dẫn cài đặt Windows 7 bằng hình ảnh
- Sử dụng auto click aurora kiếm tiền
- Sử dụng jQuery và PHP để phát hiện ảnh lỗi trên we...
- Kiểm tra Tinh Trạng Server với đoạn code đơn giản.
- Một số hàm thao tác với files trong PHP
- Chèn CSS fexternal của module Joomla vào template ...
- Tăng tốc Joomla bằng cách tạo cache cho module
- Hướng dẫn cách tạo module trượt 2 bên trong Joomla...
- Hướng dẫn cài đặt Joomla 1.6
- Cách kiếm tiền với site offer Việt Nam
- Làm chủ những tính năng lập dàn của Excel (Outlining)
- Các tạo và chỉnh sửa bảng trong word
- Đánh dấu chỉ mục cho văn bản
- Đặt tab cho văn bản
- Khắc phục sự cố trong Word
- Đọc các tập tin Word, Excel mà không cần có chương...
- Lỗi giãn dòng trong word
- Cách tạo mục lục tự động
- Y tá yêu nghề
- Xem phim
- Xa lộ cuồng
- Vụ án đêm Giáng Sinh - Phần một
- Vụ án đêm Giáng Sinh - Phần hai
- Vú em - Phần một
- Vú em - Phần hai
- Vú em - Phần ba
- Vòng tay ma nữ - Phần một
- Vòng tay ma nữ - Phần hai
- Vòng tay ma nữ - Phần ba
- Vòng tay ma nữ - Phần bốn
- Vòng luân cấm - Phần một
- Vòng luân cấm - Phần hai
- Vòng luân cấm - Phần ba
- Vòng luân cấm - Phần bốn
- Vợ tôi
- Võ Tắc Thiên - Phần một
- Võ Tắc Thiên - Phần hai
- Tuổi thơ - Phần 1
- Tuổi thơ - Phần 2
- Tuổi thơ - Phần 3
- Trường Thiếu Niên Khuyết Tật
- Tuần trăng mật
- Thằng Bờm
- Trôi theo dòng đời - Phần 1
- Trôi theo dòng đời - Phần 2
- Trôi theo dòng đời - Phần 3
- Trôi theo dòng đời - Phần 4
- Trôi theo dòng đời - Phần 5
- Trôi theo dòng đời - Phần 6
- Trôi theo dòng đời - Phần 7
- Trong trắng
- Trò chơi dại
- Triệu phú bất đắc dĩ - Phần 1
- Triệu phú bất đắc dĩ - Phần 2
- Trên đường biên giới
- Trắng tay
- Trang nhật ký buồn
- Tình cấm
- Tiểu Long Nữ
- Tiếng chuông định mệnh
- Thu Hương
- Thời sinh viên - Phần một
- Thời sinh viên - Phần hai
- Thầy Sơn
- Thầy Bảy
- Số đào hoa
- Sơ Agatha
- Sao băng - Phần một
- Sao băng - Phần hai
- Rối loạn cực khoái và chứng lãnh cảm
- Quỳnh Hoa
- Phòng trọ
- Phận má hồng - Phần một
- Phận má hồng - Phần hai
- Phận má hồng - Phần ba
- Phận má hồng - Phần bốn
- Ông bà Năm - Phần một
- Ông bà Năm - Phần hai
- Ở trọ
- Oan nghiệt
- Nửa vòng kỷ niệm - Phần một
- Nửa vòng kỷ niệm - Phần hai Hắn nhìn tôi một lần ...
- Nửa vòng kỷ niệm - Phần ba
- Nửa vòng kỷ niệm - Phần bốn
- Nửa đời hạnh phúc
- Nữ y tá
- Nữ sinh phòng trọ - Phần một
- Nữ sinh phòng trọ - Phần hai
- Nông trại
- Nó
- Những ngày xanh
- Những ngày khó quên
- Những ngày hè
- Những chuyến về quê
- Nhớ bác sĩ Tự
-
▼
tháng 5
(453)
Đăng nhận xét