Menu ngang xổ cột kiểu mới cho blogspot

 humghn.com 

Nếu theo dõi các bài viết trên  " themeblogspot247 " thì các bạn sẽ nhận ra rằng tất cả các code trong bài viết đều được tối ưu hóa rất nhiều, hạn chế tối đa sử dụng Script ( vì loại file này gây chậm cho tốc độ load trang ) . Không những vậy , những thao tác thực hiện cũng hết sức dễ dàng , không cần phải động chạm gì đến chỉnh sửa HTML trong code mẫu của trang , rất thuận tiện cho người thiết kế . 

Vẫn theo xu hướng và cách đi đó , hôm nay , chuyên mục sẽ tiếp tục giới thiệu tới các bạn cách tạo một mẫu menu ngang xổ dọc kiểu mới . 

DEMO

• Home
• 1 Column
  • FreelanceSwitch
  • Creattica
  • WorkAwesome
  • Mac Apps
  • Web Apps
  • NetTuts
  • Design
  • Logo
  • Flash
  • Illustration
  • More...
• 2 columns

  Some Links

  • ThemeForest
  • GraphicRiver
  • ActiveDen

  Useful Links

  • NetTuts
  • VectorTuts
  • PsdTuts

  Other Stuff

  • FreelanceSwitch
  • Creattica
  • WorkAwesome

  Misc

  • Design
  • Logo
  • Flash

Cách thực hiện
Mẫu này viết code cũng không khó khăn và thực hiện code lại cũng rất thuận tiện cho các bạn . Các bạn chỉ cần đăng nhập blogspot , chọn " bố cục " và tạo thẻ HTML/JavaScript rồi dán đoạn code dưới đây vào là được .

<link href='https://googledrive.com/host/0B_dL7bz8SOIxTF9sWk1SM2lucnc/' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul> 
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul> 
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul> 
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul> 
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul> 
</div></div></li></ul>

Với đoạn code phái trên , các bạn cần thay tên của các thư mục và đường dẫn ( được bôi xanh ) . Ngoài ra , các bạn cũng có thể chỉnh sửa lại màu sắc cho phù hợp hơn với blog/site của bạn .
Xin chúc các bạn thành công !