Hướng dẫn tạo Drop Menu cho blog.

Hướng dẫn tạo Drop Menu cho blog.

Post By: Võ Quốc An On: 09-02-2012 24 comments

Trong bài viết share template 01 (white template) mình viết hôm trước Dlai có nhờ mình hướng dẫn tạo dropdown menu như trên template đó nên hôm nay mình viết bài viết này để thực hiện thủ thuật trên.

Xem Demo

1. Vào Thiết kế → chỉnh sửa HTML chèn đoạn code sau vào trước thẻ ]]></b:skin>

/* Dropdown Menu */
ul.menu{list-style-type:none; margin:0 0 20px 0; padding:0;  float:left}
ul.menu li{display:block; height:30px; float:left; position:relative; margin-right:15px; padding:0}
ul.menu li a{display:block; float:left; text-decoration:none; font-size:16px;  font-style:normal;  font-weight:bold;  padding:5px 0;  line-height:18px}
ul.menu li a span{font-weight:normal;padding-left:0}
ul.menu li.drop a{padding-right:7px}
ul.menu li a:hover{background:none}
ul.menu li.drop:hover li{border:none}
ul.menu li.drop span.toggle{display:block; float:left; width:18px; height:26px; background:transparent url(http://4.bp.blogspot.com/-yOyH_jQK5HE/Tv_FO5Re7hI/AAAAAAAAD6I/fjomol4twl8/s000/toggle_bg.png) no-repeat 0 -18px; padding:0; margin:0}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle{background-position:0px 5px}
ul.menu li.drop:hover ul{ display:block; z-index:1; padding:6px 0}
ul.menu li ul{ min-width:150px; display:none; position:absolute; top:30px; left:0;  list-style-type:none; margin:0; padding:0; background:#e4e4e1;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px}
ul.menu li ul li{ float:none; height:auto; margin:0; padding:0; border:none}
ul.menu li ul li a{ background:#fff; float:none; display:block; font-size:13px; height:auto; margin:0 5px 1px 5px; padding:5px 7px;  font-weight:bold; text-transform:none}
ul.menu li:hover ul{ border:none}
ul.menu li:hover ul *{ color:#444}
ul.menu li ul li:hover *{ color:#2b74a9}
ul.menu li ul li a:hover { background:#fff}

2.Tiếp tục chèn đoạn code sau vào sau thẻ </header>

<div class='dropmenu'>
<b:section class='dropmenu' id='dropmenu' showaddelement='no'>
<b:widget id='HTML18' locked='false' title='dropmenu' type='HTML'/>
</b:section>
</div>

Save template lại và về trang chủ sẽ thấy xuất hiện thêm 1 tiện ích HTML phía dưới header.
3.Chép đoạn code sau vào nội dung HTML rồi lưu lại là xong.

   <ul class='menu'>
      <li class='drop'>
         <a href='/p/sitemap.html'>Chủ Đề</a>
              <span class='toggle'/>
              <ul>
                 <li><a href='/search/label/Blogger?max-results=5'>Blogger</a></li>
                 <li><a href='/search/label/Bookmark?max-results=5'>Bookmark</a></li>
                 <li><a href='/search/label/Button?max-results=5'>Button</a></li>
                 <li><a href='/search/label/Code?max-results=5'>Code</a></li>
                 <li><a href='/search/label/Comments?max-results=5'>Comments</a></li>
                 <li><a href='/search/label/Contact?max-results=5'>Contact Form</a></li>
                 <li><a href='/search/label/Giao diện?max-results=5'>Giao diện</a></li>
              </ul>
      </li>
      <li class='drop'>
         <a href='/p/sitemap.html'>Bài Viết Xem Nhiều</a>
              <span class='toggle'/>
              <ul style='width:400px'>
                 <li><a href='/2011/12/chia-header-footer-thanh-2-hoac-3-phan.html'>Chia header, footer thành 2 hoặc 3 phần</a></li>
                 <li><a href='/2012/01/bo-khung-hinh-cho-anh-trong-bai-viet.html'>Bo khung hình cho ảnh</a></li>
                 <li><a href='/2012/01/mot-giao-dien-khac-cho-threaded.html'>Giao diện mới cho Threaded Comments</a></li>
                 <li><a href='/2011/12/tao-khung-quick-comments-cho-blog-cbox.html'>Tạo khung quicks comments</a></li>

              </ul>
      </li>
      <li>
         <a href='/2011/01/ask.html'>Hỏi - Đáp</a>
      </li>
   </ul>

Chú ý:
1. Thay đổi những phần màu đỏ thành liên kết đến bài viết hoặc label bạn muốn  hiển thị.
2. Trong đoạn code ở bước 3 có 1 đoạn  style='width:400px' là chiều rộng của cái menu bạn có thể tăng giảm giá trị cho phù hợp với blog của mình.
3. Bạn có thể bỏ qua bước 2 chèn trực tiếp đoạn code ở bước 3 vào sau thẻ </header> cũng được. Nhưng như zậy sau này mỗi lần sửa liên kết bạn phải vào chỉnh sửa HTML của template mới sửa được.