Làm menu ngang như thế nào?

Khá nhiều bạn đọc yêu cầu được hướng dẫn làm menu ngang như menu có trên Thủ Thuật Blog. Thật ra tạo menu kiểu này không khó, quan trọng bạn phải nắm được một số kiến thức về CSS nhất định. Để bạn dễ hiểu tôi sử dụng hướng dẫn thiết kế menu ngang được giới thiệu trên WordPress.org và sau đó chúng ta ứng dụng chúng cho trường hợp của Blogger.

TÌM HIỂU CÁCH TẠO MENU NGANG:

Giả sử chúng ta có đoạn code sau đây:

<div id="navmenu">
<ul>
 <li><a href="http://www.thuthuatblog.com">Trang chủ</a></li>
 <li><a href="http://www.thuthuatblog.com/2009/05/phan-loai-noi-dung-tren-thu-thuat-blog.html">Phân loại</a></li>
 <li><a href="http://www.thuthuatblog.com/2007/09/danh-sch-blog.html">Danh sách blog</a></li>
 <li><a href="http://www.thuthuatblog.com/rss.xml">RSS</a></li>
</ul>
</div>

Nếu nhúng đoạn code này vào template Blogger hoặc qua tiện ích HTML/JavaScript, mặc định, đoạn code trên sẽ hiển thị như sau:

• Trang chủ
• Phân loại
• Danh sách blog
• RSS

Bây giờ chúng ta áp dụng CSS để đoạn navmenu trên tạo thành hàng ngang:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
        list-style-image: none; 
}

#navmenu li {
       display: inline; 
}

Nhưng các chữ lại dính kế nhau nhìn chưa được đẹp đúng không? Chúng ta bổ sung khoảng trắng vào chúng và thêm màu cho link, cũng như đổi màu khi rê chuột vào đối tượng:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
        list-style-image: none; 
}

#navmenu li {
       display: inline; 
       padding: 5px 20px 5px 20px;
}

#navmenu a {  /* Màu link */
       text-decoration:none; 
       color: blue; 
}

#navmenu a:hover {  /* Màu link khi rê chuột vào */
       color: purple; 
}

Thuộc tính a và a:hover định dạng các link nhưng nằm giữa <li> và </li> nên ta gom lại cho dễ nhìn (***):

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
}

#navmenu li {
       display: inline; 
       list-style-image: none; 
}

#navmenu ul li a { 
       text-decoration:none; 
       color: blue; 
       padding: 5px 20px 5px 20px; 
}

#navmenu ul li a:hover { 
       color: purple; 
}

Tuỳ thuộc vào template, khi sử dụng chúng ta có thể kết hợp màu nền, hình nền, kiểu border, font chữ, màu chữ, kích thước chữ, chiều ngang của menu (width)... vào các thành phần trên.

Ví dụ mẫu:

#navmenu ul {
        margin: 0; 
        padding: 0; 
 list-style-type: none; 
}

#navmenu li {
       display: inline; 
       list-style-image: none; 
}

#navmenu ul li a {  
       text-decoration:none; 
       color: #ffffff;      
       background: #ff0000; 
       border-right: 2px solid #000000; 
       padding: 5px 20px 5px 20px; 
}

#navmenu ul li a:hover {  
       color: #f8f400;    
       font-size: 14px;   
       background: #0000ff; 
       text-decoration:underline; 
}

ỨNG DỤNG VÀO BLOGGER:

Như vậy bạn đã hiểu nguyên tắc làm menu ngang:

1. Cần có một đoạn CSS như trên được dán vào giữa <b:skin><![CDATA[/* và ]]></b:skin> trong Template. (đã đề cập ở trên)
2. Cần một đoạn mã chứa các link của menu ngang

Tất nhiên bạn vẫn có thể sử dụng đoạn mã chứa link menu ngang chèn thẳng vào Template của blog. Nhưng ở đây tôi hướng dẫn cách làm thông qua tiện ích Linklist của Blogger.

Đăng nhập vào Blogger, từ layout thêm vào tiện ích Linklist, bạn cần bổ sung các link và tên menu ngang của mình như hình sau đó lưu lại.

Nếu quan sát kỹ bạn thấy tôi không đặt tên cho tiện ích, không thêm Trang chủ và RSS vào dữ liệu của Linklist, do chúng ta thêm vào bằng cách khác.

LinkList mà bạn vừa tạo có được điều khiển bằng đoạn mã như thế này:

<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>

Hãy để ý ID của nó là duy nhất, có dạng LinkList#, với ký tự # là số duy nhất. Nếu bạn sử dụng nhiều LinkList, ký tự # sẽ lần lượt là: 1, 2, 3, ...

Tiếp tục tôi gợi ý bạn cắt đoạn mã vừa nêu cho vào notepad (khoan hãy lưu lại Template nhé), tạo divcó tên navmenu, bổ sung một số thành phần thiết yếu và chúng ta sẽ được như thế này:

<div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
      </div>

Và bây giờ hãy copy hết chúng đặt vào template. Tuỳ thuộc vào template và vị trí đặt menu mong muốn mà chúng ta có cách xử lý khác nhau. Cách xử lý này đòi hỏi bạn phải có kiến thức thiết kế, CSS cũng như những hiểu biết nhất định về mã nguồn template của Blogger.

Đây là template mẫu Minima (mặc định), nếu bạn dùng template khác, tất nhiên sẽ không giống!:

<body>
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
<!-- Chèn vào đây nếu muốn đặt menu ngang phía trên header của blog -->
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thủ Thuật Blog.com(Header)' type='Header'/>
</b:section>
    </div>

<!-- Chèn vào đây nếu muốn đặt menu ngang phía dưới header của blog -->

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </div>

      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>
      </div>

BỔ SUNG "TRANG CHỦ" VÀ "RSS":

Nếu bạn đưa hẳn link Trang chủ (http://yourblog.blogspot.com) vào dữ liệu của LinkList, khi đó chúng ta khó sắp xếp làm sao cho Trang chủ nằm đầu tiên. Do đó cách đơn giản nhất là chúng ta làm bằng ... tay!

Hãy đánh dấu Expand Widget Templates (Mở rộng tiện ích mẫu):


Dùng từ khoá LinkList để tìm tiện ích của chúng ta và bạn sẽ tìm thấy như sau:

<div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
      <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Và tôi đã bổ sung phần chữ màu đỏ:

<div id='navmenu'>
        <b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
       <li><a expr:href='data:blog.homepageUrl' title='Trang chủ'>Trang chủ</a></li>
       <li><a expr:href='data:blog.homepageUrl + "2009/05/phan-loai-noi-dung-tren-thu-thuat-blog.html"' title='Phân loại nội dung'>Phân loại</a></li>
       <li><a expr:href='data:blog.homepageUrl + "2008/01/i-nt-v-blog-v-tc-gi.html"' title='Về tác giả'>Tác giả</a></li>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
             <li><a expr:href='data:blog.homepageUrl + "2007/12/quy-nh-s-dng-cc-ni-dung-trn-th-thut.html"' title='Quy định'>Quy định</a></li>
       <li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Nhận xét'>Nhận xét</a></li>
       <li class='last'><a expr:href='data:blog.homepageUrl + "rss.xml"' title='RSS'>RSS</a></li>
   </ul>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Bạn đã biết tôi thêm bằng cách nào rồi chứ?

Đến đây coi như chúng ta đã làm xong! Nếu có gặp khó khăn hãy comment dưới bài viết này để được giúp đỡ. Chúc thành công!