Để trang trí đẹp hơn cho blog Menu giúp các bạn trình bày các danh mục một cách khoa học và chuyên nghiệp . Menu đẹp và hợp lý cho người xem theo dõi Blog của bạn tiện lợi,tìm kiếm thông tin cần tìm một cách nhanh nhất ! Hôm nay mình giới thiệu đến các bạn thủ thuật tạo menu có kèm ô search,dịch trang rất đẹp mắt
Ảnh minh họa :
Demo : Xem ngay
Các bước thực hiện :
1. Đăng nhập Blogger
2. Chọn mẫu -> Chỉnh sửa HTML
3. Dán code bên dưới vào trước thẻ : ]]></b:skin>
#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;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}
Width :850px : Chiều rộng của menu
Width : 652px : Chiều rộng phần chứa các Sub
Width : 200px : Chiều rộng ô tìm kiếm
4. Chèn đoạn code bên dưới 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ựnhư vậy
- 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='http://viettin24h.com/'/>
</form></div>
<div style='clear:both'/>
</div>
Thay màu đỏ (Tìm kiếm bài viết...) và màu xanh (http://viettin24h.com)5. Lưu lại
6. Vào bố cục trang bây giờ xuất hiện thêm tiện ích HTML92 =>Click vào vào thêm đoạn code bên dưới vào
<ul class="menu">
<li class="drop0"><a href="http://viettin24h.com/">Home</a></li>
<li class="drop0"><a href="http://www.viettin24h.com/p/so-o-trang.html">Site map</a></li>
<li class="drop0"><a href="#">About Me</a></li>
<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>
<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">
<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>
<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>
<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>
<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>
</div></div></li></ul>
Các bạn điều chỉnh : # : link tới bài viết, nhãn...drop...: Tên hiển thị
Các bạn có thể thêm các Sub bằng cách thêm các phần màu 1 và màu 2 vào trước thẻ </ul>
Chúc các bạn thành công .
.jpg)
