• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

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

admin by admin
Tháng Chín 11, 2022
Home Blogspot

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.

Nội dung

  • Cách tạo menu xổ xuống trong blogspot dễ dàng
  • Kết luận
    • Bài viết liên quan:

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.

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

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ả.

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

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é.

Đánh giá bài viết
[Total: 1 Average: 5]

Bài viết liên quan:

  1. How to Create a Blogger Account?
  2. 5 Best Custom Blogger Contact Form Widgets
  3. Customizable Related Posts Widget for Blogger
  4. Thêm tải thêm bài đăng hoặc cuộn vô hạn vào Blogger
  5. How to Add Font Awesome Social Icons in Blogger
Tags: blogspotmenu xổ xuốngtạo menu xổ xuống trong blogspot
admin

admin

Next Post
Hình thức này tương tự Google Adsense

10 cách kiếm tiền với wordpress hiệu quả nhất

Phần mềm tải video Youtube, Facebook 4K mới nhất

Phần mềm tải video Youtube, Facebook 4K mới nhất

Chuyển đổi PDF/Hình ảnh sang Excel, Word miễn phí

Chuyển đổi PDF/Hình ảnh sang Excel, Word miễn phí

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply