Cách tạo menu xổ xuống trong blogspot dễ dàng

Nếu bạn muốn tạo nhiều menu con  trên 1 menu chính. Thì bài viết Cách tạo menu xổ xuống trong blogspot dễ dàng này sẽ hướng dẫn bạn làm điều đó chỉ với vài bước đơn giản.

Cách tạo menu xổ xuống trong blogspot dễ dàng

Bước 1: Đăng nhập vào trang Blogger của bạn, bấm Chủ đề => Tùy Chỉnh => Chỉnh sửa HTML.

Bước 2: Hãy chọn thêm HTML/JavaScript và paste đoạn code sau:

<div id='drnavbar'>
    <ul id='drnav'>
        <li> <a href='#'>Trang chủ</a> </li>
        <li> <a href='#'>Tên mục</a> </li>
        <li> <a href='#'>Tên mục</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 đó:
+ 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 đỏ 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.

Bước 3: Bạn ấn tổ hợp phím Ctrl + F 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: 0 px;padding: 0;position: relative;border - top: 0 px 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: 1 px solid #333;         border-right:1px solid # 333;
        height: 35 px;
    }#
    drnav li a,
    #drnav li a: link,
    #drnav li a: visited {
        color: #FFF;display: block;font: normal 12 px Helvetica,
        sans - serif;margin: 0;padding: 9 px 12 px 10 px 12 px;text - decoration: none;
    }#
    drnav li a: hover,
    #drnav li a: active {
        background: #BF0100;color: #FFF;display: block;text - decoration: none;margin: 0;padding: 9 px 12 px 10 px 12 px;
    }#
    drnav li {
        float: left;padding: 0;
    }#
    drnav li ul {
        z - index: 9999;
        position: absolute;
        left: -999 em;
        height: auto;
        width: 160 px;
        margin: 0;
        padding: 0;
    }#
    drnav li ul a {
        width: 140 px;
    }#
    drnav li ul ul {
        margin: -25 px 0 0 161 px;
    }#
    drnav li: hover ul ul,
    #drnav li: hover ul ul ul,
    #drnav li.sfhover ul ul,
    #drnav li.sfhover ul ul ul {
        left: -999 em;
    }#
    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: 120 px;color: #FFF;display: block;font: normal 12 px Helvetica,
            sans - serif;margin: 0;padding: 9 px 12 px 10 px 12 px;text - decoration: none;z - index: 9999;border - bottom: 1 px dotted #333;    } # drnav li li a: hover,
            #drnavli li a: active {
                background: #060505;     color: # FFF;display: block;margin: 0;padding: 9 px 12 px 10 px 12 px;text - decoration: none;
            }

Cuối cùng lưu template lại, bấm F5 và tận hưởng thành quả.

Kết luận

Như vậy, chỉ với vài bước, bạn đã có thể tạo menu xổ xuống trong blogspot của mình, rất đơn giản. Thủ thuật này sẽ giúp bạn bố trí menu gọn gàng, đẹp mắt. Chúc các bạn thành công và có hệ thống menu xổ xuống trong blogspot đẹp nhé.