1. Đăng nhập Blogger
2. Vào Thiết Kế (Design)
3. Chọn tab Chỉnh Sửa HTML (Edit HTML).
4. Thêm đoạn code sau trước thẻ ]]></b:skin>
#topmenu{background:#545454; color:#fff;width:940px;margin:auto;padding:5px;height:20px;z-index:30; margin-bottom:110px}
#topmenu1{width:690px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu { list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center; position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto; position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px; }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px; line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0; float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
Bạn điều chỉnh lại các Width cho phù hợp với blog của bạn. với:
•width:940px là chiều rộng của menu .
•width:200px là chiều rộng của ô tìm kiếm
•width:690px là khoảng cách từ menu đến ô tìm kiếm
5. Chèn đoạn code sau trước thẻ <body> . Với các mẫu Simple của blogspot thì là thẻ: <body expr:class='"loading" + data:blog.mobileClass'> hoặc tương tự.
- Chèn đoạn code bên dưới vào sau đoạn code vừa tìm được
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == "") {this.value = "Tìm kiếm bài viết ...";}' onfocus='if (this.value == "Tìm kiếm bài viết ...") {this.value = ""}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='Địa chỉ blog của bạn'/>
</form></div>
<div style='clear:both'/>
</div>
6. Lưu mẫu (Save template) Lại.
7. Vào Thiết Kế (Design) - Phần tử trang bạn sẽ thấy xuất hiện 1 HTML (Ở phía trên cùng). bạn bấm vào chỉnh sửa và Pate đoạn code bên dưới vào.
<ul class="menu">
<li class="drop0"><a href="#/">Trang chủ</a></li>
<li><a href="#" class="drop">Menu 1</a>
<div class="drop1">
<ul>
<li><a href="#"> Menu 1.1</a></li>
<li><a href="#"> Menu 1.2</a></li>
<li><a href="#"> Menu 1.3</a></li>
<li><a href="#"> Menu 1.4</a></li>
</ul>
</div></li>
<li><a href="#" class="drop">Menu 2</a>
<div class="drop2">
<ul>
<li><a href="#"> Menu 2.1</a></li>
<li><a href="#"> Menu 2.2</a></li>
<li><a href="#"> Menu 2.3</a></li>
</ul>
</div></li>
<li class="drop3"><a href="#">Menu 3</a></li>
<li class="drop4"><a href="#"> Menu 4</a></li>
<li class="drop5"><a href="#"> Menu 5</a></li>
</ul>
Trong đó # là liên kết đến bài viết,nhãn hoặc trang của bạn
