Tạo menu xổ xuống trong blogspot đơn giản nhất - Hướng dẫn chi tiết

[tintuc]
Blogspot của bạn có quá nhiều thứ cần chèn vào menu? Nhưng bạn không muốn menu quá dàn trải và chiếm nhiều diện tích trang? Hãy nhớ đến việc tạo menu xổ xuống trong blogspot. Menu xổ xuống là một trong những thành phần cơ bản nhất cho một trang web có nhiều điều hướng.

Hôm nay, cuahangtemplate sẽ hướng dẫn các bạn chi tiết cách làm nhé.
Xem video hướng dẫn chi tiết: 

Bước 1: Đăng nhập vào blog, bấm "Thiết kế" - "Trang tổng quan", bấm vào "Mẫu", bấm tiếp "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 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. 

Bước 3: Đến Design (Mẫu)> Edit HTML (Chỉnh sửa HTML). 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;
            }

Các đoạn CSS có #… là màu của các thành phần trong thanh menu nhé, các bạn có thể tùy chỉnh màu theo ý thích. Bạn có thể thay đổi font chữ tại đoạn code màu xanh. 
Cuối cùng lưu template lại, bấm F5 và tận hưởng thành quả. 

Lưu ý: Nên backup toàn bộ code trước khi chỉnh sửa nhé, khi cần có thể phục hồi lại như ban đầu
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

[/tintuc]

source https://www.cuahangtemplate.com/2018/11/tao-menu-xo-xuong-trong-blogspot-on.html