Hướng Dẫn Làm Menu Drop Down Cho Blogger

Bạn có thích 1 thanh menu đẹp để áp dụng cho thanh menu cố định khi cuộn trang lung thị linh hơn? ^_^ Ở đây mình sẽ chia sẻ cách làm menu xổ xuống (drop down) cơ bản nhất cho Blogspot. Sau khi hoàn thành bạn sẽ có 1 thanh menu ấn tượng!

Chú ý là tất cả hướng dẫn ở đây chỉ áp dụng cho những mẫu có sẵn khu vực navigation ở top, còn những mẫu template khác thì các bạn phải tùy biến nhiều hơn mới có kết quả!

Làm thế nào để làm menu xổ xuống (Drop down)?

- Truy cập vào trang quản trị Blogger > Design (Thiết kế)  > Page Elements (Bố cục)

- Hãy chọn thêm HTML/JavaScript như ảnh trên, và paste đoạn code này vào:

<div id='drnavbar'> 

      <ul id='drnav'> 

        <li> 

          <a href='#'>Trang chủ</a> 

        </li> 

        <li> 

          <a href='#'>Chém gió</a> 

        </li> 

        <li> 

          <a href='#'>Liên hệ</a> 

        </li> 

        <li> 

           <a href='#'>Menu</a>

            <ul> 

                <li><a href='#'>Menu 1</a></li> 

                <li><a href='#'>Menu 2</a></li> 

                <li><a href='#'>Menu 3</a></li> 

              </ul> 

        </li>

      </ul> 

    </div>

Trong đó:

+ Những dấu # sẽ được thay bằng các đường dẫn đến các chủ đề mà các bạn muốn nó xuất hiện

+ Chữ màu xanh là nội dung hiển thị của các chủ đề

+ Thẻ <ul>...</ul> là thẻ dùng để mở rộng tạo menu xổ xuống (drop down). Như đoạn code trên thì khi  trỏ chuột vào Menu, sẽ xổ xuống các Menu 1,2,3

Sau đó lưu lại đi!

- Giờ thì đến Design (Mẫu)> Edit HTML (Chỉnh sửa HTML)

- Giờ thì nên backup toàn bộ code trước khi chỉnh sửa nhé, để khi cần còn có thể phục hồi lại như cũ

- Tìm kiếm đến thẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:

/*----- Drop Down Menu ----*/

#drnavbar { 

    background: #060505; 

    width: 960px; 

    color: #FFF; 

        margin: 0px; 

        padding: 0; 

        position: relative; 

        border-top:0px solid #960100; 

        height:35px;

}

#drnav { 

    margin: 0; 

    padding: 0; 

} 

#drnav ul { 

    float: left; 

    list-style: none; 

    margin: 0; 

    padding: 0; 

} 

#drnav li { 

    list-style: none; 

    margin: 0; 

    padding: 0; 

        border-left:1px solid #333; 

        border-right:1px solid #333; 

        height:35px; 

} 

#drnav li a, #drnav li a:link, #drnav li a:visited { 

    color: #FFF; 

    display: block; 

   font:normal 12px Helvetica, sans-serif;    margin: 0; 

    padding: 9px 12px 10px 12px; 

        text-decoration: none; 

        

} 

#drnav li a:hover, #drnav li a:active { 

    background: #BF0100; 

    color: #FFF; 

    display: block; 

    text-decoration: none; 

        margin: 0; 

    padding: 9px 12px 10px 12px; 

        

    

        

}

#drnav li { 

    float: left; 

    padding: 0; 

} 

#drnav li ul { 

    z-index: 9999; 

    position: absolute; 

    left: -999em; 

    height: auto; 

    width: 160px; 

    margin: 0; 

    padding: 0; 

} 

#drnav li ul a { 

    width: 140px; 

} 

#drnav li ul ul { 

    margin: -25px 0 0 161px; 

} 

#drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul { 

    left: -999em; 

} 

#drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul { 

    left: auto; 

} 

#drnav li:hover, #drnav li.sfhover { 

    position: static; 

}

#drnav li li a, #drnav li li a:link, #drnav li li a:visited { 

    background: #BF0100; 

    width: 120px; 

    color: #FFF; 

    display: block; 

    font:normal 12px Helvetica, sans-serif; 

    margin: 0; 

    padding: 9px 12px 10px 12px; 

        text-decoration: none; 

z-index:9999; 

border-bottom:1px dotted #333;

    

} 

#drnav li li a:hover, #drnavli li a:active { 

    background: #060505; 

    color: #FFF; 

    display: block;     margin: 0; 

    padding: 9px 12px 10px 12px; 

        text-decoration: none; 

}

Các đoạn CSS có #... là màu của các thành phần trong thanh menu nhé, màu thế nào là tùy các bạn. Bạn có thể thay đổi font chữ tại đoạn code màu xanh

Cuối cùng là lưu template lại và tận hưởng thành quả :D Nhưng nhớ là có không vừa ý thì cũng tự hiểu rằng đây chỉ là đoạn code cơ bản để làm menu xổ xuống (Drop down) cho Blogspot thôi ^_^ Bạn phải tùy chỉnh một vài nội dung nữa nó mới hợp với trang web của bạn!