Ads 468x60px

Cách tạo menu

» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" language="javascript" src="http://traidatmui-tips.googlecode.com/files/menu_sohoa.js"></script>
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
#linksubMenu{ font-family:tahoma;}
#linksubMenu a{ font-family:tahoma;text-decoration:none;color:#000;}
#linksubMenu a:hover{color:#0000ff;}
#Menu a{ text-decoration:none;color:#fff;}
.Menu{
font-size:12px;
width:962px;
float:left;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj32MVN3FQzZ2b8jR7eSyTmo1CQeX7M01twx3e6EEnJ3g8SFPJY40yHIIoBJJmrAsNj8Yzf5tsSrU2t2pBZyGY5pZNuUL_BS1PvAAwR7YNzrpLfmNThyphenhypheneDCp-0KSGcRUJ4A9YLUi_PlUVy7/);
height:35px;
background-repeat:no-repeat;
position:relative;
}
.MarrginTop{
width:100%;
height:10px;
overflow:hidden;
}
.PaddingLeft{
width:63px;
float:left;
height:5px
}
.menuDefault102 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfOHWwHCQ9mHHgg83ZGlRPz6CeSHhIBQzjYC_S_sKqItuzOVb1R2CJ8w7NxRdGiWW8DPwAgSmTHB2dhWfjo7qHrY1615yW_nJZ70shRzAFfq9qoMxeIr-vR8npQvmgxEoYRySxCUfk7hwz/) repeat-x;
width: 2px;
height: 23px;
float:left;
}

.bgSubMenu {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifTvU55UlaSHyb5iPZEKvASzw9kWUjj_RNjuQWv31uXCTB5A-UxXOwSebBK3jQokyJx14ZjiIbyCVk3ZmdtBosAwAKar8Na3Zais2SfCYyv-SoFv2akHMfmP16Bw7wzLRvk0Xgh22muPXl/);
height:23px;
background-repeat:no-repeat;
float:left;
width:962px;
overflow:hidden;
}
.MenuTime{
width:270px;
height:23px;
color:#848484;
font-family:Arial;
font-size:11px;
font-weight:bold;
float:left;
line-height:23px;
text-align:left;
margin-left:10px
}
.subMenu{
float:left;
font-family:tahoma;
font-size:11px;
height:16px;
margin-top:6px
}
.TextSearch{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6DOqHIhyphenhyphenECOEiyQg4NA5-tUlfEgkMlJ6WLhNeEFtq6YARWHyGKvp9bl8qt050oagQY5wguKVqmigvlPrw9qmELNGbLGwsn3Yvj_5zyL9p202wCFEwdUIReJhoGdyA8SouDJ7HIMFvFhs/) no-repeat left;
width:166px;
height:23px;
float:right;
padding-left:7px;
margin-right:10px;
}
.seach-button {float:right;
width: 30px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZcIWGlYdvf5THfraCrSfQc8qxmAgwcYbzjgINS3NCXiGYAJEGaCD0CU0SXPpPMzZ6QHcENbubgOENWyCu4P4Frfl7pzA9hKxU35l0QFw2ffb3N014Qu3LKPEzdjxQXFEQLyBCHyT-wuMa/) no-repeat bottom;
}
.seach-button:hover {float:right;
width: 30px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUD2QBgH8cmr48cEVtjUli7tCuDC9VA2Tk6BfmYTHBcXniTurSkx9fvSbXM5EH1W2XuoBgqX0eefLRo76H_-6mV83lhqApyrFTI9XDbmbOWKXCO9O5iJjftHxAZLK-tfwP62ZiSW9DV-l/) no-repeat bottom;
}
/*Home*/
.menuDefault1 {
cursor: Pointer;
width: 76px;
height: 23px;
padding-top:4px;
text-align:center;
float:left;
margin-left:0px;
}
.menuActive1_1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
cursor: Pointer;
padding-top:4px;
text-align:center;
color:#000;
font-weight:bold;
width: 76px;
height: 23px;
float:left;
}
/*End Home*/

/*Menu 1*/
.menuDefault2 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;
margin-left:40px;
}
.menuActive2_2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
margin-left:40px;
}
/*End menu 1*//*Menu 2*/
.menuDefault3 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;
}
.menuActive3_3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
}
/*End menu 2*//*Menu 3*/
.menuDefault4 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;}
.menuActive4_4 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
}
/*End menu 3*//*Menu 4*/
.menuDefault5 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;
}
.menuActive5_5 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
}
/*END Menu 4*/
/*Menu 5*/
.menuDefault6 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;
}
.menuActive6_6 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
}
/*END Menu 5*/

6. Save template lại và trở về phần tử trang
7. Thêm 1 HTML/Javascript và dán vào nó code bên dưới
<div class="linksubMenu" id="linksubMenu">
<div class="Menu" id="Menu">
<div class="MarrginTop"></div>
<div class="PaddingLeft"></div>

<a href="http://www.traidatmui.com"><div id="1" class="menuActive1_1" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Home</div></a>
<div class="menu1"></div>

<a href="#"><div id="2" class="menuDefault2" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 1</div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="3" class="menuDefault3" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 2</div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="4" class="menuDefault4" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 3</div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="5" class="menuDefault5" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 4</div></a>
<div class="menuDefault102"></div>

<a href="#"><div id="6" class="menuDefault6" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 5</div></a>

<div class="TextSearch"><form action="http://www.google.com/search" target="_blank" method="get"><input maxlength="255" style="font-size:11px; width: 130px; border:1px solid #fff; height:10px;float:left; margin-top:1px; padding: 4px 0px 4px 2px; background:#e6e6e6;align:middle;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="Nhập từ khóa" name="q" type="text" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/><input checked="checked" value="traidatmui.com" name="sitesearch" type="hidden"/>
<input class="seach-button" value="" type="submit"/>

</form>
</div>
</div>
<div class="bgSubMenu" onmouseover="clearTimeout(t);clearTimeout(t1);" onmouseout="reChangeStyle(DelayId);">
<div class="MenuTime" id="MN1">TRAIDATMUI.com | Hôm nay: <script language="" type="text/javascript">
var monthNames = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
var dayNames = new Array("Chủ nhật,","Thứ Hai,","Thứ Ba,","Thứ tư,","Thứ Năm,","Thứ Sáu,","Thứ Bảy,")
var now = new Date();

thisYear = now.getYear();

thisDay = dayNames[now.getDay()];

if(thisYear < 1900) {thisYear += 1900};
document.write("" + thisDay +" "+" "+" "+ now.getDate() + "/" + monthNames[now.getMonth()] + "/" + thisYear);
</script></div>
<div style="margin-left: 360px;" class="subMenu" id="subMenu"></div>

<script type="text/javascript" language="javascript">

// Phần thiết lập các Submenu
function setFolderDefault() {
if (FolderId == 10000) {
FolderId = 1;
flagOtherFolder = false;

} else if (FolderId != 2 && FolderId != 3 && FolderId != 4 && FolderId != 5 && FolderId != 6) {
FolderId = 1;
flagOtherFolder = false;
}
document.getElementById(FolderId).className = 'menuActive' + FolderId + '_' + FolderId;
writeSubmenu(FolderId);
}
function writeSubmenu(id) {
//alert(id);
if (id == 1) {
//home
document.getElementById("subMenu").innerHTML = "<div style='font-style:Arial;margin-top:-1px;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksmA-n_CDvmqGxWNhASunD7qW6F6RnLsd7cVeoMps-YyAbrwRgoRoQ3uQ5gGZBy6hAzxPtoWPv0rr0mwfOQjWxpA1OeveiYqJVs7QlaEcdr_RBLv3TaQ6Z9pWBEP67EtQUFfxDk5k3N7G/' align=absmiddle' style='margin'/><a href='#'> Liên hệ&nbsp;</a> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEjbuUdweUdXutjzHrlmT_TKU0QCrIEZYrploKfH5KNzL2FgAxbTJ1vflNLdxdmnszdA7TmrMpSbYujZiyu8s8ZAY3hJcqQRldIrtmUc68u8NcYgfMzXAiSdKDhgDuGrr7o4xsuafhhmH/' align='top' style='margin' style='margin-top:-2px' /> <a href='#'>RSS Posts &nbsp;</a> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCEjbuUdweUdXutjzHrlmT_TKU0QCrIEZYrploKfH5KNzL2FgAxbTJ1vflNLdxdmnszdA7TmrMpSbYujZiyu8s8ZAY3hJcqQRldIrtmUc68u8NcYgfMzXAiSdKDhgDuGrr7o4xsuafhhmH/' align='top' style='margin' style='margin-top:-2px' /> <a href='#'> RSS Comments</a></div>";

document.getElementById("subMenu").style.marginLeft = "0px";
DelayId = id;
}

else if (id == 2) {
//menu1
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 1.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp;<a class='aSubMenu' href='#'> SubMenu 1.2 </a>&nbsp; <img src='" + strLinkImg + "' /> &nbsp;<a class='aSubMenu' href='#'> SubMenu 1.3 </a>";
document.getElementById("subMenu").style.marginLeft = "-5px";
DelayId = id;
}

else if (id == 3) {
// menu2
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 2.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> SubMenu 2.2 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> SubMenu 2.3 </a>";
document.getElementById("subMenu").style.marginLeft = "20px";
DelayId = id;
}

else if (id == 4) {
//menu3
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> SubMenu 3.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> SubMenu 3.2 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> SubMenu 3.3 </a>";
document.getElementById("subMenu").style.marginLeft = "22px";
DelayId = id;
}
else if (id == 5) {
//menu4
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 4.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> Submenu 4.2 </a>";
document.getElementById("subMenu").style.marginLeft = "130px";
DelayId = id;
}
else if (id == 6) {
//menu5
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 5.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> Submenu 5.2 </a>";
document.getElementById("subMenu").style.marginLeft = "190px";
DelayId = id;
}

else {
setFolderDefault();
}}
</script>
</div></div>

» Chỉnh code:
- Bạn hãy thay phần (traidatmui.com) thành địa chỉ blog của bạn
- Các phần màu tím ở trên là tên hiển thị trong các menu chính, bạn chỉnh sửa lại cho phù hợp
- Bạn hãy chỉnh sửa tên các menu con (dòng màu xanh) và các link tương ứng (#) cho phù hợp với blog của bạn.

8. Sau khi chỉnh sửa xong bạn save tiện ích lại

☼ Cách thêm menu

Ở trên mình chỉ có 5 menu chính, nếu bạn muốn tạo thêm các menu chính thì chỉ việc thêm code bên dưới vào sau dòng dòng code của phần menuDefault6
<a href="#"><div id="7" class="menuDefault7" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);">Menu 6</div></a>

Đồng thời thêm phần CSS bên dưới vào template của bạn (sau dòng /*END Menu 6*/), đồng thời chỉnh sửa số (7)lại cho phù hợp.

/*Menu 6*/
.menuDefault7 {
height: 25px;
padding:5px 3px 0px 3px;
text-align:center;
float:left;
}
.menuActive7_7 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-053XsBdFDufSjRCXKqqdP_W_wnLEdXz30SOiSUF9mQxo_tpXYY-hBVGAZTgFqYpKD2OUE0iwZ9vyD64P2mZ1uSG_457KZIrM3J7Tm6JF2XwdR0hZmP5bxT6bQUJjoWDqb5KSOAvmQWd/) repeat-x;
padding:5px 3px 0px 3px;
height: 25px;
cursor: Pointer;
text-align:center;
color:#000;
float:left;
}
/*END Menu 6*/

Để thêm menu con cho phần menu mới trên bạn thêm code bên dưới vào sau //menu5 trong phần Submenu và chỉnh sửa các số lại cho phù hợp (7).
else if (id == 7) {
//menu6
document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='#'> Submenu 7.1 </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='#'> Submenu 7.2 </a>";
document.getElementById("subMenu").style.marginLeft = "190px";
DelayId = id;
}
Việc cuối cùng là thêm && FolderId != 7 trong phần màu xanh trong code Submenu ở trên.
Nhãn: , ,

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)