"Tạo meu giống trang Số Hóa cho Blogspot"

(Traidatmui.com) - Chắc hẳn các bạn Blogger đã từng đọc và thực hiện theo thủ thuật tạo menu như trang sohoa.vnexpress.net mà Fandung đã giới thiệu. Có bạn thực hiện được, có bạn không do ở thủ thuật đó Fandung hướng dẫn bạn tự tạo ảnh cho phần menu chính nên nếu bạn không rành về phần tạo ảnh thì khó mà thực hiện được. Hơn nữa ở phần Submenu Fandung đã cho chúng vào một file JS nên việc chỉnh sửa các menu con này cũng khiến nhiều bạn phải từ bỏ việc tạo menu này. Để khắc phục những khó khăn đó, mình sẽ giúp các bạn tạo menu Số Hóa không cần phải tạo ảnh cho menu chính và việc chỉnh sửa các Submenu cũng đơn giản hơn. Thủ thuật rất phức tạp đòi hỏi bạn phải kiên trì và cẩn thận khi thực hiện các bước.

Hình ảnh minh họa
» 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://data-traidatmui.appspot.com/scripts/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(http://lh5.ggpht.com/_BTztXRwC9ik/TUADwhWm82I/AAAAAAAAG6s/iKXfBwgVpKM/BgMenu.gif);
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(http://lh4.ggpht.com/_BTztXRwC9ik/TUADqcWKDHI/AAAAAAAAG6Y/G668c9Ad7XQ/menu100.gif) repeat-x;
width: 2px;
height: 23px;
float:left;
}

.bgSubMenu {
background-image: url(http://lh4.ggpht.com/_BTztXRwC9ik/TUADwiShZXI/AAAAAAAAG6w/qHv0X0uqDH0/BgSubMenu.jpg);
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(http://lh3.ggpht.com/_BTztXRwC9ik/TUADwi5AFII/AAAAAAAAG6o/KnOfJz9RwBg/search-bg.gif) 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(http://lh6.ggpht.com/_BTztXRwC9ik/TUADqX0cAtI/AAAAAAAAG6g/EU-z1LTLzUs/MenuButtonSearch.jpg) no-repeat bottom;
}
.seach-button:hover {float:right;
width: 30px;
height:22px;
background:url(http://lh4.ggpht.com/_BTztXRwC9ik/TUADquUpb8I/AAAAAAAAG6k/lEnIMDWWYis/seach-botton-hv2.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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='http://lh6.ggpht.com/_BTztXRwC9ik/TUABC03e3_I/AAAAAAAAG6I/rowU3WfJ1HY/iconPhone.gif' align=absmiddle' style='margin'/><a href='#'> Liên hệ&nbsp;</a> <img src='http://lh4.ggpht.com/_BTztXRwC9ik/TUABCsxBysI/AAAAAAAAG6E/382WFMs9GKQ/rss-ico.gif' align='top' style='margin' style='margin-top:-2px' /> <a href='#'>RSS Posts &nbsp;</a> <img src='http://lh4.ggpht.com/_BTztXRwC9ik/TUABCsxBysI/AAAAAAAAG6E/382WFMs9GKQ/rss-ico.gif' 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
<div class="menuDefault102"></div>
<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(http://lh4.ggpht.com/_BTztXRwC9ik/TT_6KgIWYWI/AAAAAAAAG58/ZlqdlMu1wwE/home-hv1.gif) 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.

Chúc bạn thành công

Tham khảo Fandung Blog

Xem khác cùng chủ đề

15 nhận xét | Viết lời bình

1/26/2011 06:31:00 CH Trả lời

very hot

1/28/2011 12:33:00 SA Trả lời

Ra tet N xai.
Chuc mung nam moi!
Chuc Traidatmui nam moi vui ve va thanh cong.

1/29/2011 01:53:00 CH Trả lời

Thủ thuật này hay.
thanks for share.
Cung Chúc Tân Xuân

5/20/2011 06:18:00 SA Trả lời

Mình đã làm được theo hướng dẫn của bạn, nhưng mình muốn làm rộng thanh menu ra được không bạn, vì menu chiều dài không dài ra bằng trang blog nên nhìn không đẹp, bạn xem hộ mình nhé, blog mình đây
shopgaucon.blogspot.com

Admin
5/20/2011 07:20:00 SA Trả lời

Có thể làm dài ra được, tuy nhiên bạn phải thực hiện thêm bước đồ họa ghép ảnh lại thì hình nền menu của bạn mới có thể dài ra như bạn muốn được. Bạn có thể dùng Photoshop để làm việc này. lleu

5/20/2011 06:33:00 CH Trả lời

để mình làm thử, cám ơn bạn nhé các bài viết của bạn rất hay mà dễ làm nữa.

9/23/2011 07:28:00 SA Trả lời

anh ơi ! Của em đoạn search nó không tìm được. Giúp em với

Admin
9/24/2011 02:11:00 SA Trả lời

Em thay địa chỉ traidatmui.com thành địa chỉ blog em thì nó mới tìm được trên blog em

9/24/2011 04:12:00 SA Trả lời

em thay rồi ! :(.mà toàn là không tìm được

9/24/2011 05:31:00 SA Trả lời

E sửa rồi mà vẫn không được anh TDM ơi :(. híc

Admin
9/24/2011 05:39:00 SA Trả lời

Đôi khi những bài viết mới chưa được cập nhật vào công cụ tìm tiếm Google nên không tìm thấy

9/24/2011 07:05:00 SA Trả lời

trong trang em ! Hôm qua search từ avatar vẫn tìm thấy mà giờ thì không @@

9/24/2011 08:07:00 SA Trả lời

anh ơi ! Giúp em với ! Gấp lắm rồi, Em cảm ơn anh trước nhé

7/20/2012 03:27:00 SA Trả lời

Em gặp thông báo này anh ơi:

Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The content of elements must consist of well-formed character data or markup.

Error 500

Admin
7/20/2012 04:11:00 SA Trả lời

Code ở bước 7 em phải thêm vào tiện ích HTML/Javascript không thể thêm trực tiếp vào template được em.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang