Tạo DropDown Menu Blogspot đơn giản có thêm ô Search

Tạo DropDown Menu Blogspot đơn giản có thêm ô Search

iwin
Tin vui hiện nay iWin Online đã ra mắt phiên bản iWin đổi thưởng thẻ cào điện thoại. Tai iWin mới nhất để chơi game bài đổi ngay tiền thật: van-ban Tải iWin về máy.
Tạo Drop Menu đơn giản có thêm ô Search
DropDown Menu giúp cho bạn trình bày các chương mục trong blogspot được gọn gàng và khoa học hơn. Lần trước mình đã từng giới thiệu css menu blogspot cho các bạn một mẫu Menu DropDown. Hôm nay mình tiếp tục giới thiệu cho các bạn thêm một mẫu Menu Drop đẹp có ô search cực thân thiện khác.


Cách thực hiện:
  1. Đăng nhập Blogger
  2. Vào Thiết Kế (Design)
  3. Chọn tab Chỉnh Sửa HTML (Edit HTML). Không cần chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
  4. Thêm đoạn code sau 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}
- 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:850px là chiều rộng của menu thường ứng với chiều rộng của blogspot.
  • width:200px là chiều rộng của ô tìm kiếm
  • width:650px là chiều rộng phần chứa các Sub menu thường bằng width:850px - width:200px
    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='&quot;loading&quot; + 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 == &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://thuthuat12h.blogspot.com/'/>
</form></div>
<div style='clear:both'/>
</div>
Trong đó:
  • Bạn có thể thay chữ Tìm kiếm bài viết ... bằng chữ bạn muốn. Lưu ý thay cả 3 chữ thì khi click chuột vào mới có hiệu ứng rolover.
  • Thay địa chỉ (URL) blog http://thuthuat12h.blogspot.com/ thành địa chỉ (URL) blog của bạn.
    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 HTML92. 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="
http://thuthuat12h.blogspot.com/">Home</a></li>
<li class="drop0"><a href="
http://thuthuat12h.blogspot.com/">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>
Trong đó:
  • Thay dấu # là liên kết tới bài viết, nhãn hoặc trang của bạn.
  • Thay các phàn màu xãnh là các nhãn, bài viết trên menu chính.
  • Thay phần màu cam là các tiêu đề trong phần Sub menu xổ xuống.
  • Bạn có thể thêm các Sub menu drop bằng cách thêm các phần màu xanh da trơi và xanh la mạ vào ngay trước thẻ </ul>
Chúc thành công!
CHIA SẺ BÀI VIẾT

[Hướng dẫn cài đặt Game]
Tạo DropDown Menu Blogspot đơn giản có thêm ô Search Tạo DropDown Menu Blogspot đơn giản có thêm ô Search
910

Bài viết Tạo DropDown Menu Blogspot đơn giản có thêm ô Search

tai game bigkool
Vì sao game đánh bài BigKool HOT nhất 2017
BigKool đang là một xu thế game danh bai hay nhat hot nhất trong giới trẻ, bất cứ ai yêu quý game đánh bài đều không thể bỏ qua tải game BigKool. Được đánh giá là game cài đặt nhẹ nhất, có thể chơi không cần mạng. Click xem GAME BIGKOOL 2017
tai game ionline (taitrochoi mobi), tai bigkool, tai game danh bai, dich vu seo, hack pvtk online, tai game bigkool online, tai iwin, tai ionline 2017
Google + Facebook