Mạnh Tuấn Blog
  • Học Lập Trình
    • PHP - HTML
  • Đồ Hoạ
    • Ảnh Bìa Cover Đẹp
    • PSD Tổng Hợp
  • Thủ Thuật
    • Thủ Thuật Facebook
    • Blogger
    • Facebook
    • Tools DDOS Web
  • Follow me
    • Facebook
    • Google+
    • Youtube



Trang chủ / Code Hay Cho Blogger / Tổng Hợp Thủ Thuật Blog / Hướng Dẫn Làm Menu Drop Down Cho Blogger

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

Unknown   Saturday, May 21, 2016   Code Hay Cho Blogger , Tổng Hợp Thủ Thuật Blog   0  
Popular Posts
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!
Cách làm menu xổ xuống (Drop down) Blogspot
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)


Cách làm menu xổ xuống (Drop down) Blogspot

- 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!

Share Share Share
Code Hay Cho Blogger Tổng Hợp Thủ Thuật Blog
Administrator Administrator: Hoàng Mạnh Tuấn

Không điều gì là tồn tại mãi mãi cho đến lúc bạn ngừng cố gắng! Một cậu học sinh trung học luôn có ước mơ và hoài bão...Bạn hãy làm những việc bình thường bằng lòng say mê phi thường, thành công sẽ đến với bạn!!

CÓ THỂ BẠN SẼ THÍCH

Đang tải...

No comments



Liên Kết Bạn Bè

Bài Viết Mới

Thống Kê Truy Cập

ADS

Bài đăng phổ biến

  • Full Video Nguyễn Khánh Linh 12p & 1p
    Hot Full Video Nguyễn Khánh Linh 12p và 1p =))) Download & Xem: Tại Đây Nhé! Mục Đích: Câu View =))))) Coppy Xin Ghi Nguồn: AresT2k...
  • Share Video Nguyễn Khánh Linh Full 16p
    Nguyễn Khánh Linh  đang xôn xao trên cộng đồng mạng xã hội Facebook vì lộ clip *** =)) nãy đi ngang fanpage thấy có cái clip Nguyễn Khánh Li...
  • share curl comment facebook max 100k comment
    đây là curl comment theo kiểu R andom   English  Language   Demo:  Hướng dẫn sử dụng: Các bạn tải bộ code ở phía dưới.  Upload file ...
  • Share Template Phim Blogspot Đẹp LazaTv Và Tool Grab
    Template Phim này đã bỏ lâu không dùng trắc hơn 1 năm rồi giờ lục diver thấy nên share cho anh em nào cần dùng. Lục thấy luôn cái Grab link ...
  • TUT Rename Tích ✔ Sau Tên By AresT2k1
    DEMO:    https://www.facebook.com/AresT2k1.Dz.INFO Bước 1 : ta vào link Support :    https://www.facebook.com/help/contact/56162710063862...
  • Share Code BotLike Gọn Nhẹ Full All Chức Năng Hot Nhất Hiện Nay
    Xin chào các bạn, đầu tháng 10 Mạnh Tuấn Blog Share cho các bạn một bộ code bot like cực ngon :D Chức năng cũng gần full :p. Một Số Chức ...
  • PSD Ảnh Bìa Chất
    Download
  • Ảnh Bìa Hacker Chất
    Download
  • Share Tấm Ảnh Tự Sát Facebook
    Video Test By HMT ~~ Chúc Các Bạn Thành Công !!! Còn Đây là Link Bức Ảnh Cho Ai Cần :  Tại Đây
  • TUT Buff Sub x10 x20- Web Mới Chưa Fix
    B1:  Click Vào Link Này B2: Install Token HTC  ( Nếu chưa Install Thì Cài ) và Get Token  sau đó nhập token vào  B3: khi login vào ...

Chuyên Mục Hot

Tổng Hợp Thủ Thuật Facebook Ảnh Bìa Đẹp PHP-HTML Ảnh Bìa Cover Đẹp PSD Thủ Thuật Máy Tính Hacking - Security Ảnh Bìa Tâm Trạng Tổng Hợp Thủ Thuật Blog Ảnh Bìa 7 Màu Thủ Thuật Hay Tổng Hợp Code Web Hacker Tổng Hợp Code Web Tình Yêu Ebook Hacking Tools DDOS Mod Tổng hợp Tools LOL Tools DDOS Web Kiến Thức Về Mạng Template Blog Tổng Hợp Ảnh Bìa Và PSD đẹp Ảnh Bìa Hacker Code Web Hack Like Hack Like Code Auto Facebook Code Hay Cho Blogger Font Chữ Đẹp Cover Ảnh Phần Mềm Bổ Ích Cho Máy Tính Video-Hot Ảnh Đại Diện Chất Ứng Dụng Chỉnh Sửa Ảnh Code Facebook Marketing Mini Game Nguyen-Khanh-Linh Ảnh Đại Diện Hacker Đẹp Auto Follow Facebook Auto Follow Facebook Code Botnet Brush Chứng Minh Nhân Dân Code Curl Code Hay Cho Website Và Blog Curl Like FILE PSD 3D Facebook Garena Index-Deface Nguyễn-Khánh-Linh PSD -CMND Server Hack Like Share Code Thủ Thuật Bảo Mật Website Tool Spam Facebook Video Nguyen Khanh Linh Video Nguyen Khanh Linh 16p Full HD Blogger Bảo Mật Facebook Chia Sẻ Chuyện-Game-Thủ Chứng chỉ SSL Free 1 năm Chữ Gạch Ngang Code Tự Tạo Fanpage Code Web Lừa Đảo Code get video Youtube Code-Rip-Token Gắn Backlink Hack Game Hacking Kali Linux Hacking Điện Thoại Hosting Free Icon Facebook Làng-Game Marketing Miễn Phí Tên Miền PSD Cánh Đẹp Photoshop Online Phần Mềm Hack Proxy Live Share SSH Thủ Thuật Mobile Tin Tức CNTT Tool Troll Bạn Bè TroJan RAT Tạo Kí Tự Big Text Video 27p full Video 2k 27p Video Nguyễn Khánh Linh 16p Full HD Vẽ Chibi Online Xem Tivi Online full video 2k3 hot full video 2k3 xxx nữ sinh 2k3 video 27p video 2k3 full

Bài Đăng Ngẫu Nhiên

Thủ thuật Blogspot Chuyên mục đồ họa Ảnh bìa Facebook Thủ thuật Facebook
Trang chủ
Mạnh Tuấn Blog Chia Sẻ Thủ Thuật Wapmaster, Đồ Họa, Facebook, Góc Học Tập...
© 2016-2017 Mạnh Tuấn Blog. All rights reserved. ® Mọi Thông Tin Và Hình Ảnh Trên Blog Đều Được Sưu Tầm. Coppy Vui Lòng Để Nguồn! Email liên hệ: tuanhoangmanh201@gmail.com