Chèn họp tìm kiếm vào menu vnexpress

Bạn có thể xem demo tại đây.
Bước 1: Vào Blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html) >> click vào Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head>.

<style type="text/css">
.parent-menu, .sub-menu {width:800px;}
#topmenu {height:46px; margin-bottom:10px;z-index:-10px;}
.fl {float:left;}
#topmenu {float:left;}
.fr {float:right;}
.parent-menu {height:25px; font:11px tahoma; color:#ffffff; text-align:center; 

background:#f5f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') 

repeat-x 0px -46px;}
.pmenu-sep {width:25px;}
.pmenu-normal{height:15px; padding:7px; cursor:pointer;}
.pmenu-normal, .pmenu-active, .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, 

.pmenu-activeright {cursor:pointer;}
.pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft,

.pmenu-activeright {width:3px; height:25px;font-size:1px;}
.pmenu-active {height:15px; padding:7px; color:#004f8b; 

background:#f5f5f6 url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') 

repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 

url('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') 

no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 

url('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') 

no-repeat 0px -27px;}
.sub-menu {height:21px; background:#f5f5f6 

url('http://i342.photobucket.com/albums/o433/bkprobk/bg-fd.gif') 

repeat-x 0px -100px;}
.smenu-content {width:678px; height:17px;padding:2px 7px;}
.smenu-content2 {width:892px; height:17px;padding:2px 7px;}
.smenu-content3 {width:534px; height:17px;padding:2px 7px;}
.smenu-content ul {width:50%;height:17px;margin:0px;padding:0px;list-style-type:none;}
.smenu-content li{float:right;padding:0px 5px;}
.smenu-content li img{border:0px; vertical-align:middle}
.sub-menu {position:relative; font: 12px arial; }
.parent-menu, .sub-menu, .sub-menucontent {overflow:hidden;}
.link-submenu {font:11px arial; color:#004f8b; text-decoration:none;}
.link-submenu:hover {text-decoration:underline;}
.sep-fmenu{width:2px; height:26px; background:#f4f5f6 

url('http://i342.photobucket.com/albums/o433/bkprobk/bg_corner.gif') 

no-repeat -5px -138px;}
</style>

<script type="text/javascript">
var menu_fid = new Array(
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
);
var menu_pid = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

2, // sub 1.1
2, // sub 1.2
2, // sub 1.3

3, // sub 2.1
3, // sub 2.2
3, // sub 2.3

4, // sub 3.1
4, // sub 3.2
4, // sub 3.3

5, // sub 4.1
5, // sub 4.2
5, // sub 4.3

6, // sub 5.1
6, // sub 5.2
6 // sub 5.3
);

var menu_name = new Array(
'Home',
'Menu 1',
'Menu 2',
'Menu 3',
'Menu 4',
'Menu 5',

'Submenu 1.1',
'Submenu 1.2',
'Submenu 1.3',

'Submenu 2.1',
'Submenu 2.2',
'Submenu 2.3',

'Submenu 3.1',
'Submenu 3.2',
'Submenu 3.3',

'Submenu 4.1',
'Submenu 4.2',
'Submenu 4.3',

'Submenu 5.1',
'Submenu 5.2',
'Submenu 5.3'
);

var menu_path = new Array(
'http://fandung.blogspot.com/',
'/Menu1/',
'/Menu2/',
'/Menu3/',
'/Menu4/',
'/Menu5/',

'/menu1/submenu1.1/',
'/menu1/submenu1.2/',
'/menu1/submenu1.3/',

'/menu2/submenu2.1/',
'/menu2/submenu2.2/',
'/menu2/submenu2.3/',

'/menu3/submenu3.1/',
'/menu3/submenu3.2/',
'/menu3/submenu3.3/',

'/menu4/submenu4.1/',
'/menu4/submenu4.2/',
'/menu4/submenu4.3/',

'/menu5/submenu5.1/',
'/menu5/submenu5.2/',
'/menu5/submenu5.3/'
);

var menu_show = new Array(
0, // home
0, // Menu1
0, // Menu2
0, // Menu3
0, // Menu4
0, // Menu5

0, // sub 1.1
0, // sub 1.2
0, // sub 1.3

0, // sub 2.1
0, // sub 2.2
0, // sub 2.3

0, // sub 3.1
0, // sub 3.2
0, // sub 3.3

0, // sub 4.1
0, // sub 4.2
0, // sub 4.3

0, // sub 5.1
0, // sub 5.2
0 // sub 5.3
);
</script>

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

src="http://data.fandung.com/blog/demo/vne-menu/Menu1.js"></script>

- Thay thế các đoạn /menu1/submenu1.1/ , /menu1/submenu1.2/ , ... thành các link tương ứng với menu đó.

- lưu ý là vị trí các phần tử trong mảng này và mảng menu_name phải khớp nhau, khi đó đường dẫn tới các menu mới chính xác.

e. Mảng menu_show :

- các phần tử ở mảng này được biểu diễn bằng những con số 0. Lưu ý là tổng số các con số 0 phải bằng tổng các menu chính và phụ.

Một vài lưu ý sau cùng : khi tùy chỉnh lại các phần tử trong mảng, phải đảm bảosố lượng các phần tử trong 5 mảng bằng nhau, và phải khớp với nhau theo đúng thứ tự của nó, và điều quan trọng nữa là chỉ có phần tử cuối cùng trong mảng mới ko có dấu phẩy (,) theo sau, nếu sai xót thì code sẽ bị lỗi.

Bước 2: Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào (đoạn code co chen họp tiềm kiếm): 

<div id="topmenu">
<div class="parent-menu" id="parent-menu"></div>
<div class="sub-menu">
<div class="fl"><a href="http://feeds.feedburner.com/kynangso_adsend" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Kakm_vQK-M4pIPmPBLcJdur6oQdh4QVBWKk1uUiP-u7yx6slykhlgXySIuWOrhZ8M0jOe4VN4q7oeb3A_MTMryr0aQUOEqr-VqlddPeRfpJzjZB5fPLRjbl-8H-oZ_S5h0HzhVZKSCI/" alt="" height="21" /></a>

<--! Bạn có thể thêm liên kết hoặc hình ảnh khác vào đây -->

</div>
<div class="smenu-content fl" id="submenu" onmouseover="clear_delayhide();activeMenuParent();" onmouseout="resetit();">
</div>

<!-- Chèn họp tìm kiến vào đây, ví dụ như họp tìm kiếm google -->

</div>
</div>
<script type="text/javascript" language="javascript">
menuobj=document.getElementById? document.getElementById("submenu") 

: document.all? document.all.submenu : document.layers? 

document.dep1.document.dep2 : ""
Active(); writeParentMenu(); reWriteMenu();
</script>

Bạn có thể xem bài viết về menu nầy tại đây.
Chút bạn thành công!

Nguồn http://www.kynangso.com