Để 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.
Update 17/12/2011:
- Đây có thể nói là 1 trong các bài viết có lượng view lớn nhất trên Blog FD, và cũng là bài viết có nhiều comment phàn nàn nhất về việc bài viết khó hiểu, hoặc không làm được. Hôm nay mình sẽ fix lại bài hướng dẫn. Và nhân tiện mình cũng fix lại code của thủ thuật để cho tiện và cho đẹp hơn 1 chút.
- Ở thủ thuật cũ, phần chèn link của các menu phụ (menu con) chỉ góm gọn trong các link của các nhãn, trong bài fix này các link của menu con sẽ cơ động hơn, không còn phải theo khuôn mẫu link như thế này http://YOUR-BLOG-NAME.blogspot.com/search/label/LABEL-NAME, tức là có thể chèn các link khác như link của 1 bài viết nào đó chẳng hạn.
Xem DEMO
Hình ảnh minh họa :
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 trang nhãnhoặc 1 trang bài viết nào đó 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.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript">
</script>
- nếu chèn code ở bước 4 vào template mà submenu không hiển thị, thì các bạn chèn nó vào ngay trong widget HTML/javascript chưa code thủ thuật, tức là chèn chung với code ở bước 6 bên dưới, và chèn ngay trên cùng. (updated 18/12/2011)</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 widgetHTML/Javascript,sau đó dán đọan code bên dưới vào.
►CODE:
<style type="text/css">
.nav23{
height: 27px;
padding: 2px 0 0;
margin-right:5px;
background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif);
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
}
.nav23 a, .nav23 a:visited {
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #f17813;
}
.nav23 a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17XH7INPpdBT-gNF_SRhKAa2eV288heh6NV9rzWnxy3X7Lk6RqPyB0_SiKaY_NLL-hR5RLMF3d9jSfZA3g6zT7WpdzD0mDI8mCKx-irVHi8MlV8PYrkfnCdQcPSMtEHVm0D5eNJAp4KgT/s26/nav23-bg-hv.png);
color:#FFF;
}
.nav23sub{
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 #ffc185 solid;
cursor:pointer;
}
</style>
<script type="text/javascript">
var bg_submenu="#F57900"; // màu nền của submenu
var bg_hv_submenu="#24BDE2"; // màu nền của submenu khi rê chuột
function otab(){
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_link,submn_text){
document.write('<tr><td onmouseover="this.style.background=\''+bg_hv_submenu+'\'" onmouseout="this.style.background=\''+bg_submenu+'\'" class="nav23sub" onclick="window.location.href=\''+submn_link+'\'">'+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 class="nav23">
<a id="idmenu1" href="#" >Menu 1</a>
<a id="idmenu2" href="#">Menu 2</a>
<a id="idmenu3" href="#">Menu 3</a>
<a id="idmenu4" href="#">Menu 4</a>
<a id="idmenu5" href="#">Menu 5</a>
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
</div>
<script type="text/javascript">
otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 2.1');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
otab("idmenu2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("idmenu2", "idmenu2_child", "hover", "y", "pointer");
otab("idmenu3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("idmenu3", "idmenu3_child", "hover", "y", "pointer");
otab("idmenu4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("idmenu4", "idmenu4_child", "hover", "y", "pointer");
otab("idmenu5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("idmenu5", "idmenu5_child", "hover", "y", "pointer");
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");
</script>
.nav23{
height: 27px;
padding: 2px 0 0;
margin-right:5px;
background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif);
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
}
.nav23 a, .nav23 a:visited {
color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #f17813;
}
.nav23 a:hover {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj17XH7INPpdBT-gNF_SRhKAa2eV288heh6NV9rzWnxy3X7Lk6RqPyB0_SiKaY_NLL-hR5RLMF3d9jSfZA3g6zT7WpdzD0mDI8mCKx-irVHi8MlV8PYrkfnCdQcPSMtEHVm0D5eNJAp4KgT/s26/nav23-bg-hv.png);
color:#FFF;
}
.nav23sub{
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 #ffc185 solid;
cursor:pointer;
}
</style>
<script type="text/javascript">
var bg_submenu="#F57900"; // màu nền của submenu
var bg_hv_submenu="#24BDE2"; // màu nền của submenu khi rê chuột
function otab(){
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_link,submn_text){
document.write('<tr><td onmouseover="this.style.background=\''+bg_hv_submenu+'\'" onmouseout="this.style.background=\''+bg_submenu+'\'" class="nav23sub" onclick="window.location.href=\''+submn_link+'\'">'+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 class="nav23">
<a id="idmenu1" href="#" >Menu 1</a>
<a id="idmenu2" href="#">Menu 2</a>
<a id="idmenu3" href="#">Menu 3</a>
<a id="idmenu4" href="#">Menu 4</a>
<a id="idmenu5" href="#">Menu 5</a>
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
</div>
<script type="text/javascript">
otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 2.1');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
otab("idmenu2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("idmenu2", "idmenu2_child", "hover", "y", "pointer");
otab("idmenu3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("idmenu3", "idmenu3_child", "hover", "y", "pointer");
otab("idmenu4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("idmenu4", "idmenu4_child", "hover", "y", "pointer");
otab("idmenu5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("idmenu5", "idmenu5_child", "hover", "y", "pointer");
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");
</script>
- Chú ý :
+ Menu 1, Menu 2, ... Menu 7 là các menu chính (menu cha)
+ Submenu 1.1, Submenu 2.1, ... Submenu 7.1, ... là tên các menu phụ (menu con)
+ link_submenu1.1, link_submenu1.2, ... link_submenu7.1, ... là link liên kết của các menu phụ ví dụ như : http://www.fandung.com/search/label/B-basic hoặc http://www.fandung.com/p/contact.html
+ Nếu các menu chính có liên kết đến thì các bác bạn thay kí tự # trong code của nó thành link liên kết nào đó. Ví dụ như bên dưới :
+ Ví dụ 1 đoạn code :
+ Submenu 1.1, Submenu 2.1, ... Submenu 7.1, ... là tên các menu phụ (menu con)
+ link_submenu1.1, link_submenu1.2, ... link_submenu7.1, ... là link liên kết của các menu phụ ví dụ như : http://www.fandung.com/search/label/B-basic hoặc http://www.fandung.com/p/contact.html
+ Nếu các menu chính có liên kết đến thì các bác bạn thay kí tự # trong code của nó thành link liên kết nào đó. Ví dụ như bên dưới :
<a id="idmenu1" href="http://www.fandung.com" >Menu 1</a>
+ 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)+ Ví dụ 1 đoạn code :
otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
- Đây là code để hiển thị các menu con của Menu chính (cha) có tên làMenu 1, và code của menu cha là bên dưới :submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
<a id="idmenu1" href="#" >Menu 1</a>
- Bạn lưu ý dòng id="idmenu1" trong code trên, chữ idmenu1 này bắt buộc phải giống với chữ idmenu1 trong code của menu con, tức là đoạn code này :otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
- Nếu muốn tạo thêm nhiều menu con cho menu cha (ví dụ đối với menu chaHọc Tập như trong code mẫu), ta sẽ thêm code như bên dưới :submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
otab("idmenu1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
submn('link_submenu1.3','Submenu 1.3');
submn('link_submenu1.4','Submenu 1.4');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
- Còn nếu như các bạn muốn 1 menu chính nào đó không có submenu thì các bạn chỉ việc xóa code của submenu, lấy ví dụ ở Menu 6, thì ta sẽ xóa đoạn code như bên dưới :submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
submn('link_submenu1.3','Submenu 1.3');
submn('link_submenu1.4','Submenu 1.4');
ctab();
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");
...
...
...
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
...
...
...
- Nếu muốn thêm 1 menu nữa (ví dụ Menu 8) thì ta thêm code tương tự ở 2 phần như bên dưới :...
...
otab("idmenu6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("idmenu6", "idmenu6_child", "hover", "y", "pointer");
...
...
...
...
...
...
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
<a id="idmenu8" href="#">Menu 8</a>
</div>
...
...
...
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");
otab("idmenu8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
ctab();
at_attach("idmenu8", "idmenu8_child", "hover", "y", "pointer");
</script>
...
...
<a id="idmenu6" href="#">Menu 6</a>
<a id="idmenu7" href="#">Menu 7</a>
<a id="idmenu8" href="#">Menu 8</a>
</div>
...
...
...
otab("idmenu7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");
otab("idmenu8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
ctab();
at_attach("idmenu8", "idmenu8_child", "hover", "y", "pointer");
</script>
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.
-------------- BONUS --------------
- Trong demo mình có 4 mẫu menu, ở trên là code của mẫu 0, và đây là code của 3 mẫu còn lại, các bạn có thể download về tham khảo :
http://fandung.googlecode.com/svn/trunk/menu_type1.txt
http://fandung.googlecode.com/svn/trunk/menu_type2.txt
http://fandung.googlecode.com/svn/trunk/menu_type3.txt
- để có được 1 menu với màu sắc như ý muốn, các bạn thay đổi các giá trị mã màu như trong code highlight bên dưới là được :http://fandung.googlecode.com/svn/trunk/menu_type2.txt
http://fandung.googlecode.com/svn/trunk/menu_type3.txt
<style type="text/css">
.nav23 {
height: 27px;
padding: 2px 0 0;
margin-right:5px;
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
background-color:#88bb22;
}
.nav23 a, .nav23 a:visited {
color:#fff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #528500;
}
.nav23 a:hover {
background-color:#528500;
}
.nav23sub {
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;
cursor:pointer;
background:#97cf26;
border-top:1px #d7ff86 solid;
}
</style>
<script type="text/javascript">
var bg_submenu="#97cf26";
var bg_hv_submenu="#528500";
...
...
...
Chúc các bạn thành công..nav23 {
height: 27px;
padding: 2px 0 0;
margin-right:5px;
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
background-color:#88bb22;
}
.nav23 a, .nav23 a:visited {
color:#fff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:12px;
padding: 5px 10px;
display: block;
float:left;
border-right:1px solid #528500;
}
.nav23 a:hover {
background-color:#528500;
}
.nav23sub {
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;
cursor:pointer;
background:#97cf26;
border-top:1px #d7ff86 solid;
}
</style>
<script type="text/javascript">
var bg_submenu="#97cf26";
var bg_hv_submenu="#528500";
...
...
...
Nguồn: http://www.fandung.com
Ngày 13/12/2011
.jpg)
.jpg)
3 nhận xét
Apply 2 to 3 inches of mulch over the plants root system once all foliage is removed
and discarded. If you are working on a riding mower
or a mower with an electric starter, you will also want to disconnect the battery
as to prevent any accidental startups while servicing your machine.
The less competition, the better off your plants will be.
Feel free to surf to my blog - mulching
Whether you are searching for specialty styling products or specific
Loreal hair products, you are sure to
find what you need. Habits die hard and whatever your regime has been in the past, you do need to have a good look around at what is
on offer for different hair types and textures.
When one thinks of fungus, they don't generally associate it with the head or scalp, but the itching, burning scalp, rash or pimples on the scalp could very well be caused by a fungus, requiring antifungal shampoo to provide well needed relief to the symptoms.
And a key to the programs success will be the
development and implementation of an outreach and education campaign to encourage participation in the CLASS program.
Crowe, The Tony Rice Unit, Chesapeake and Aldridge, and
Bennett & Gaudreau) on mandolin and mandola, Tony Williamson (mandolin), Chris Brashear (fiddle),
and Tom Corbett (mandolin). Yeast Infection No More Book
By Linda Allen is a 150 page downloadable e-book, jam-packed with the
whole set of blueprint all-natural yeast infection treatment solutions,
distinctive highly effective methods as well as the step by step holistic yeast infection process.
The fourth chair of the Fine Group is a rotating chair filled by Jimmy Gaudreau (veteran
of The Country Gentlemen, J. These lenses are employed for the duration of get in touch with fittings and dispensed to the sufferers free of
charge of cost.
Feel free to visit my webpage ... momentary
Đăng nhận xét