» » Thanh menu có ô search ở đầu trang cho blog

Thanh menu có ô search ở đầu trang cho blog

Người đăng: nhung dieu hay on Thứ Năm, 22 tháng 8, 2013

Để 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 :


Menu đầu trang có ô search

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}

Các bạn điều chỉnh các Width cho phù hợp với Blog của bạn 
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='&quot;loading&quot; + 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 == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' 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 .
vào lúc 20:55
Nhãn: ,

{ 0 nhận xét... read them below or add one }


Đăng nhận xét