Thư viện

Sự kiện

Thứ Năm, tháng 2 14, 2013

Menu sổ nhiều cấp giống facebook cho blogger/blogspot

Cách tạo mẫu menu sổ dọc nhiều cấp với phong cách của faceebook. menu con sẽ sổ 2 cấp đến 3 cấp. Thích hợp cho các blog có nhiều chuyên mục

Chia sẻ:
Menu sổ nhiều cấp giống  facebook cho blogger/blogspot
Hôm nay namkna giới thiệu thêm cho các bạn mẫu menu sổ dọc nhiều cấp với phong cách của faceebook. Với mẫu này menu con sẽ sổ 2 cấp hoặc 3 cấp. Thích hợp cho các blog có nhiều chuyên mục

» Đặc điểm của menu này:

¤ hoàn toàn từ CSS (không sử dụng Javascripts nhằm tăng tốc độ lòa blog của bạn.
¤ Hoạt dộng tốt trên các trình duyệt phổ biến như: moliza firefox, google chroome, sarafi, opera,...
¤ Có nhiều cấp để các bạn lựa chọn. Bài viết này namkna sẽ hướng dẫn 2 dạng một dạng xổ dọc 2 cấp, và một dạng xổ dọc 3 cấp cho các bạn lựa chọn.
¤ Giao diện bắt mắt, dế tùy biến

¤ Các bạn có thể xem Demo

XEM DEMO

Ảnh minh hoạ:
Menu sổ nhiều cấp giống  facebook cho blogger/blogspot

» Cách tiến hành:

1. Đăng nhập vào blog
2. Chọn Bố cục
3. Chọn Thêm Tiện ích => Tạo HTML/Javarscip và chọn một trong 2 đoạn code bên dưới và dán vào.
¤  Style 1: Menu Facebook dropdown 2 cấp!
<style>
 #namkna-navbar{
 background: #3B5998;
 width: 100%;

 color: #FFF;
 margin: 10px 0;
 padding: 0;
 position: relative;
 border-top:0px solid #960100;
 height:35px;
 }

 #Namkna-nav{
 margin: 0;
 padding: 0;
 }
 #Namkna-nav ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #Namkna-nav li {
 list-style: none;
 margin: 0;
 padding: 0;

 }
 #Namkna-nav li a, #Namkna-nav li a:link, #Namkna-nav li a:visited {
 color: #FFF;
 display: block;
 font:bold 12px Helvetica, sans-serif;
 margin: 0;
 padding: 9px 12px 11px 12px;
 text-decoration: none;
 border-right:0px solid #627AAD;
 }
 #Namkna-nav li a:hover, #Namkna-nav li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;
 text-decoration: none;
 margin: 0;
 padding: 9px 12px 11px 12px;



 }
 #Namkna-nav li {
 float: left;
 padding: 0;
 }
 #Namkna-nav li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 160px;
 margin: 0;
 padding: 0;
 }
 #Namkna-nav li ul a {
 width: 140px;
 }
 #Namkna-nav li ul ul {
 margin: -35px 0 0 161px;
 }
 #Namkna-nav li:hover ul ul, #Namkna-nav li:hover ul ul ul, #Namkna-nav li.sfhover ul ul, #Namkna-nav li.sfhover ul ul ul {
 left: -999em;
 }
 #Namkna-nav li:hover ul, #Namkna-nav li li:hover ul, #Namkna-nav li li li:hover ul, #Namkna-nav li.sfhover ul, #Namkna-nav li li.sfhover ul, #Namkna-nav li li li.sfhover ul {
 left: auto;
 }
 #Namkna-nav li:hover, #Namkna-nav li.sfhover {
 position: static;
 }
 #Namkna-nav li li a, #Namkna-nav li li a:link, #Namkna-nav li li a:visited {
 background: #EDEFF4;
 width: 120px;
 color: #3B5998;
 display: block;
 font:normal 12px Helvetica, sans-serif;
 margin: 1px 0 0 0;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
 z-index:9999;
 border:1px solid #ddd;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;

 }
 #Namkna-nav li li a:hover, #Namkna-nav li li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;

 }

 #Namkna-nav li li li a, #Namkna-nav li li li a:link, #Namkna-nav li li li a:visited {
 background: #EDEFF4;
 width: 120px;
 color: #3B5998;
 display: block;
 font:normal 12px Helvetica, sans-serif;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
 z-index:9999;
 border:1px solid #ddd;
 margin: 1px 0 0 -14px;


 }
 #Namkna-nav li li li a:hover, #Namkna-nav li li li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;
 }
 </style>
 <div id='namkna-navbar'>
 <ul id='Namkna-nav'>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 <li><a href='#'>Sitemap ▼</a>
  <ul>
   <li><a href='#'>Sub Page #1</a></li>
   <li><a href='#'>Sub Page #2</a></li>
   <li><a href='#'>Sub Page #3</a>
    <ul>
     <li><a href='#'>Sub Sub Page #1</a></li>
     <li><a href='#'>Sub Sub Page #2</a></li>
     <li><a href='#'>Sub Sub Page #3</a></li>
    </ul>
   </li>
  </ul></li>
 </ul>
 </div> 
¤  Style 2: Menu Facebook dropdown 3 cấp!
<style>
 #namkna-navbar{
 background: #3B5998;
 width: 100%;

 color: #FFF;
 margin: 10px 0;
 padding: 0;
 position: relative;
 border-top:0px solid #960100;
 height:35px;
 }

 #Namkna-nav{
 margin: 0;
 padding: 0;
 }
 #Namkna-nav ul {
 float: left;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #Namkna-nav li {
 list-style: none;
 margin: 0;
 padding: 0;

 }
 #Namkna-nav li a, #Namkna-nav li a:link, #Namkna-nav li a:visited {
 color: #FFF;
 display: block;
 font:bold 12px Helvetica, sans-serif;
 margin: 0;
 padding: 9px 12px 11px 12px;
 text-decoration: none;
 border-right:0px solid #627AAD;
 }
 #Namkna-nav li a:hover, #Namkna-nav li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;
 text-decoration: none;
 margin: 0;
 padding: 9px 12px 11px 12px;



 }
 #Namkna-nav li {
 float: left;
 padding: 0;
 }
 #Namkna-nav li ul {
 z-index: 9999;
 position: absolute;
 left: -999em;
 height: auto;
 width: 160px;
 margin: 0;
 padding: 0;
 }
 #Namkna-nav li ul a {
 width: 140px;
 }
 #Namkna-nav li ul ul {
 margin: -35px 0 0 161px;
 }
 #Namkna-nav li ul ul ul {
 margin:  -35px 0 0 147px;
 }
 #Namkna-nav li:hover ul ul, #Namkna-nav li:hover ul ul ul, #Namkna-nav li.sfhover ul ul, #Namkna-nav li.sfhover ul ul ul {
 left: -999em;
 }
 #Namkna-nav li:hover ul, #Namkna-nav li li:hover ul, #Namkna-nav li li li:hover ul, #Namkna-nav li.sfhover ul, #Namkna-nav li li.sfhover ul, #Namkna-nav li li li.sfhover ul {
 left: auto;
 }
 #Namkna-nav li:hover, #Namkna-nav li.sfhover {
 position: static;
 }
 #Namkna-nav li li a, #Namkna-nav li li a:link, #Namkna-nav li li a:visited {
 background: #EDEFF4;
 width: 120px;
 color: #3B5998;
 display: block;
 font:normal 12px Helvetica, sans-serif;
 margin: 1px 0 0 0;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
 z-index:9999;
 border:1px solid #ddd;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;

 }
 #Namkna-nav li li a:hover, #Namkna-nav li li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;

 }

 #Namkna-nav li li li a, #Namkna-nav li li li a:link, #Namkna-nav li li li a:visited {
 background: #EDEFF4;
 width: 120px;
 color: #3B5998;
 display: block;
 font:normal 12px Helvetica, sans-serif;
 padding: 9px 12px 10px 12px;
 text-decoration: none;
 z-index:9999;
 border:1px solid #ddd;
 margin: 1px 0 0 -14px;


 }
 #Namkna-nav li li li a:hover, #Namkna-nav li li li a:active {
 background: #627AAD;
 color: #FFF;
 display: block;
 }
 </style>
 <div id='namkna-navbar'>
 <ul id='Namkna-nav'>
 <li><a href='#'>Home</a></li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 <li><a href='#'>Sitemap ▼</a>
  <ul>
   <li><a href='#'>Sub Page #1</a></li>
   <li><a href='#'>Sub Page #2</a></li>
   <li><a href='#'>Sub Page #3</a>
    <ul>
     <li><a href='#'>Sub Sub Page #1</a></li>
     <li><a href='#'>Sub Sub Page #2</a></li>
     <li><a href='#'>Sub Sub Page #3</a>
      <ul>
        <li><a href='#'>Sub Sub Sub Page #1</a></li>
        <li><a href='#'>Sub Sub Sub Page #2</a></li>
        <li><a href='#'>Sub Sub Sub Page #3</a></li>
      </ul>
    </li>
    </ul>
   </li>
  </ul></li>
 </ul>
 </div> 

Trong đó:
  • Thay dấu thăng màu đỏ (#) thành liên kết tới bài viết.
  • Thay các phàn màu xanh thành tiêu đề của trang ứng với mỗi link màu đỏ.

77 nhận xét:

  1. bạn oy sao mình làm dc menu 2 cấp thui nhưng nó hk hiện lên 3 cấp dc bạn kiểm tra dùm mình nhé
    http://thegioingansao.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Cái menu facebook bạn đang áp dụng thừa thẻ </ul> bạn xóa phần </ul> trước thẻ <li><a href='#'>Sitemap </a>

      Xóa
    2. anh xem hộ cái menu http://doannguyenit.blogspot.com/ nó bị lỗi
      em copy nguyên cái code trên roài mà hk dc, em làm mẫu blog khác thì dc, hk bjt cái mẫu này nó không hỗ trợ cho menu face không anh nếu em thử mẫu Menu ngang xổ dọc xuống nhiều cấp (kiểu 1) - Update 15/03/2012 cũng bị lỗi tương tự như thế. hjc

      Xóa
    3. Em thay:

      #mbtnav ul {
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      }
      #mbtnav li {
      list-style: none;
      margin: 0;
      padding: 0;

      }

      Thành:

      #mbtnav ul {
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      z-index:4000;
      }
      #mbtnav li {
      z-index:4000;
      list-style: none;
      margin: 0;
      padding: 0;

      }

      Xóa
    4. hjx đã sửa nhưng vẫn hk dc anh ak. thui anh cho em cái yahoo em gửi pass blogger em,để vào anh vào chỉnh dùm em vs dc hk?

      Xóa
    5. Lâu lắm rồi a không dùng Yahoo.
      Em gửi vào mail: tavannam01@gmail.com anh sẽ chỉnh giúp.

      Xóa
    6. em gửi rồi đó nhờ anh sửa dùm cho em nha. thank

      Xóa
    7. Anh sủa rùi đó do thuộc tính overflow: hidden; ở đoạn code dưới,

      .tabs-outer {
      overflow: hidden;
      position: relative;
      background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
      }

      Xóa
  2. a nam ơi e muốn thêm các menu chính và menu con thì phải làm như thế nào hả a

    Trả lờiXóa
    Trả lời
    1. Thêm đoạn mã dạng:
      <li><a href='#'>Sitemap ▼</a>
      <ul>
      <li><a href='#'>Sub Page #1</a></li>
      <li><a href='#'>Sub Page #2</a></li>
      <li><a href='#'>Sub Page #3</a>
      <ul>
      <li><a href='#'>Sub Sub Page #1</a></li>
      <li><a href='#'>Sub Sub Page #2</a></li>
      <li><a href='#'>Sub Sub Page #3</a></li>
      </ul>
      </li>
      </ul></li>

      vào trước:

      </ul>
      </div>

      Xóa
    2. mình đã thêm đoạn này vào nhưng chỉ được thêm 2 mục, bạn có thể sửa hộ mình được không

      Xóa
  3. anh oy sao anh chjnh menu của chỉ dc 2 cấp z, em thấy nó có 3 cấp mà, anh có thể sửa giúp e dc hk ?

    Trả lờiXóa
  4. anh Nam ơi của em cũng bị menu chỉ hiện ra đến cấp 2 thôi còn cấp 3 không hiện được em đã thử các cách trên rồi. còn nếu sử dụng menu dùng transition: visible trong css thì nó chỉ hiện bên trong khung một khoản nhỏ xíu à phải sửa làm sao vây anh hic.
    Thank for great blog!

    Trả lờiXóa
    Trả lời
    1. Của em hiện 2 cấp đó chứ em.
      Để thu nhỏ khảng trống em tìm đoạn:

      #mbtnav ul {
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      }

      Và chỉnh sửa thành

      #mbtnav ul {
      float: left;
      list-style: none;
      margin: 5px;
      padding: 10px;

      }

      - chỉnh lại phần in đậm cho thích hợp nha. có thẻ dùng số âm, ví dụ

      margin: -5px;
      padding: 10px;

      Xóa
  5. Chào bạn,
    Menu bên blog của mình cũng không hiện được cấp thứ 3. Mình đã thử nhiều cách như bạn hướng dẫn phía trên nhưng vẫn không được. Mình có gời thông tin của blog vào mail của bạn (tavannam01@gmail.com), rất mong bạn giúp cho.

    Trả lờiXóa
    Trả lời
    1. Oke mình sẽ chek mail và giúp bạn.

      Xóa
  6. Trả lời
    1. Bạn xem lại gùm mình nha. Mình check cả hộp thư Spam cyngx không thấy.

      Bạn gửi lại vào

      tavannam01@gmail.com

      nha.

      Xóa
    2. Mình vừa gởi mail lại cho bạn, bạn kiểm tra hộp thư giúp mình nha

      Cám ơn bạn rất nhiều.

      Xóa
    3. Oke mình sẽ check ngay :))

      Xóa
    4. Bạn đã vào được blog mình chưa?

      Xóa
    5. Xin lỗi bạn do mail của mình đang bị tấn công nên google tạm chặn nên không gửi trả lời cho bạn được./

      Hiện tại mình đã cập nhật mẫu xổ dọc đến cấp 3 trong bài viết này cho bạn.

      Cuối cùng: Thành thật xin lỗi vì đã để bạn phải chờ lâu. Hy vọng bạn không càm thấy phiền vì mình đã lỡ hẹn,

      Xóa
    6. Mình cám ơn bạn không hết, lấy gì mà thấy phiền :-)

      Mình sẽ làm lại với menu cấp 3. Xem thế nào, nếu không ổn sẽ lại í ới nhờ bạn giúp nha.

      Cám ơn bạn nhiều lắm.

      Xóa
    7. Mình đã thử nhưng vẫn không được. Ngay cả khi mình thử copy nguyên xi của bạn đưa vào cũng không hiện ra được cấp 3 luôn !!?? :-(

      Xóa
    8. Bạn có thể gửi use và pass vào mail: tavannam01@gmail.com không mình sẽ check coi sao.

      Xóa
    9. Hiện mình đã chỉnh lại cho bạn rùi. Hiển thị 3 cấp luôn ở mục thông tin đó.
      - Lỗi bạn gặp phải là do bạn chưa chuyển menu xuống ngay dưới header,

      Xóa
    10. Bạn thật là giỏi. Cám ơn bạn rất nhiều :-) :-) :-)

      Xóa
    11. Không có gì :)))))))

      Xóa
  7. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  8. Menu 3 cấp bị lỗi:
    - Chữ menu mất trắng
    - Rê chuột vào mới hiện chữ ra
    - Chỉ sổ được 2 cấp Khi kéo tiện ích HTML/Scrip xuống phần body thì hoàn hảo ko mắc lỗi gì.
    Bạn chỉ mình cách khắc phục với. Thanks nhìu

    Trả lờiXóa
    Trả lời
    1. Bạn nên tạo một tiện ích HTML/Javarscip dưới phần tiêu đề như bài này: XEM NGAY

      - Sau đó dán code của menu vào sẽ khắc phục được lỗi trên, (đây là demo mình làm tới cấp 3 XEM NGAY)

      Xóa
    2. Mình thử làm như bạn nói thì rất ổn mà có điều cái tiện ích HTML/Script phải đặt trên header mới được. Thường mình thấy người ta vẫn đặt ở dưới header. mình xem cái ví dụ demo 3 cấp của bạn vẫn làm dưới header được mà. ^^! giúp mình nhé

      Xóa
  9. Mình sửa đc rồi. Bạn vào blog mình xem thử có cách nào chỉnh cho nó đều lại ko? ^^!

    Trả lờiXóa
    Trả lời
    1. Có thể đặt dưới header mà bạn. Nhưng bạn phải tạo một khung thêm tiện ích cho phàn header thì khi đặt dưới header mới được nha.

      - Mình vào thấy ổn rồi đó bạn. Nó bị uống dòng ở cấp 3 là do tiêu đề bạn quá dài.

      Để menu căn đều ra đường viền 2 bên bạn sửa:

      #namkna-navbar{
      background: #3B5998;
      width: 100%;

      color: #FFF;
      margin: 10px 0;
      padding: 0;
      position: relative;
      border-top:0px solid #960100;
      height:35px;
      }

      Thành:

      #namkna-navbar{
      background: #3B5998;
      width: 900px;
      margin-left: -15px;
      color: #FFF;
      margin: 10px 0;
      padding: 0;
      position: relative;
      border-top:0px solid #960100;
      height:35px;
      }

      width: 900px; độ rộng menu
      margin-left: -15px; căn lề trái. Hãy chỉnh lại sao cho lề menu nằm trên lề phần body blog.

      Xóa
    2. bạn cũng cho mình hỏi thêm - tại các mục mình muốn để như trang của bạnTên
      có các ảnh và tóm tắt bài viết, chứ của mình nó cứ đăng cả mấy chục bài ra

      Xóa
    3. Bạn chọn một kiểu hiển thị bạn muốn tại đây và áp dụng nha.

      Xóa
    4. bạn ơi làm như thế xong khi lưu mẫu nó báo "More than one widget was found with id: HTML5. Widget IDs should be unique" bạn giúp mình với

      Xóa
    5. Lỗi này xuất hiện khi blog của bạn có 2 ID trùng nhau.
      Trong trường hợp này là có 2 tiện ích HTML5. Hãy xóa 1 đoạn đi nha.

      Xóa
    6. Mà bạn đang nói về thủ thuật nào thế tất cae thủ thuạt mình giới thiệu không có thủ thuật nào sử dụng đến HTML5. Lỗi này chắc do bạn copy nhầm rồi đó. bạn hãy xem lại đi nha :????

      Xóa
  10. mình đã làm tất cả những gì bạn nói thật chính xác nhưng mà vẫn không ăn thua gì bạn ơi. >.<
    - margin-left: -15px; (mình thay -15 thành -30, -60, 30, 60 thì lề trái vẫn không thay đổi, không hiểu tại sao nữa).
    - width: 900px; ( thay 900 thành số lớn hơn thì lề bên phải dài ra, nhỏ hơn thì lề bên phải ngắn lại, lề trái vẫn vậy).
    - Còn 1 đường màu đó nằm giữa menu và hình tiêu đề nữa, không biết làm sao để mất nó ^^!
    khi nào bạn rãnh hãy nghiên cứu dùm mình nha, làm phiền bạn quá =.=!

    Trả lờiXóa
    Trả lời
    1. Với template đó bạn có thể chèn trực tiếp vào trong template trước hoặc sau thẻ </header>

      Xóa
  11. Thêm đoạn mã dạng:


    vào trước:



    Reply


    mình đã thêm đoạn này vào nhưng chỉ được thêm 2 mục, bạn có thể sửa hộ mình được không

    Trả lờiXóa
    Trả lời
    1. Bạn nói rõ câu hỏi dduwwocj không. nếu có code cần chèn vào comment hãy dùng công cụ sau: http://namkna.blogspot.com/p/code-convert-for-blogspot-chuyen-doi.html

      Xóa
    2. mình cop đoạn code của bạn vào đã được, thêm menu chính và con tiếp theo đã được, nhưng khi thêm menu chính và con thứ 3 thì không được nữa

      Xóa
    3. Hãy để lại địa chỉ blog đã áp dụng thủ thuật này để dược hỗ tợ nha bạn.

      Xóa
  12. Mình làm được rồi. Thanks Nam

    Trả lờiXóa
    Trả lời
    1. Nam ơi sao cái blog mình lại có 2 khoảng nhỏ trên + dưới Thanh Điều Hướng vậy.
      Có cánh nào cho nó sát lại như những blog khác ko bạn?

      Xóa
    2. Bạn vào chỉnh sửa HTML và chỉnh ssoanj code sau:

      .content-outer {
      background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -goog-ms-border-radius: 15px;
      border-radius: 15px;
      -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      margin: 30px auto;
      }

      thành:

      .content-outer {
      background: transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      -goog-ms-border-radius: 15px;
      border-radius: 15px;
      -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      box-shadow: 0 0 3px rgba(0, 0, 0, .15);
      margin: 0px auto;
      }

      Xóa
  13. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  14. Thanks. Bạn ơi cho mình chép 1 số bài viết của bạn lên blog mình nhé. Bài nào của bạn ở cuối mình đều ghi rõ nguồn và địa chỉ blog bạn. ^^! thanks

    Trả lờiXóa
    Trả lời
    1. Oke. CHỉ cần ghi nguồn là được :))

      Xóa
  15. Chào bạn! Mình tạo 1 page là Cẩm nang việc làm trong blog Việc làm Đà Nẵng. Tuy nhiên khi click vào thì nó hiện ra thêm 1 dòng là Search result cho "Cẩm nang việc làm". Mình muốn làm các mục FILM ONLINE | XEM TV | DOWNLOAD như bạn thì làm như nào vậy?
    Trang của mình: http://vieclam-danang.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. ĐÓ là dòng: Status Message Bar. Bạn có thể xóa như bài hướng dẫn này:
      Cách Ẩn Status Message Bar

      Các mục FILM ONLINE | XEM TV | DOWNLOAD là thanh menu. bạn có thẻ chọn một loại bạn thích tại đây:
      Tạo menu cho blog

      Xóa
    2. Mình đặt link của bạn vào góc dưới bên phải rồi. Bạn đặt link mình với nhé:
      http://vieclam-danang.blogspot.com/
      Mô tả: Việc làm tại Đà Nẵng

      Thanks!

      Xóa
  16. anh namkna co the cho em code huong dan tao menu nhu blog nay dc ko
    http://blog.linhdungvn.com/

    Trả lờiXóa
    Trả lời
    1. Em tải đoạn code bên dưới về mở ra và dán nó vào tiện ích HTML/Javarscrip ngay dưới header nha:

      Tải ngay

      Xóa
  17. anh nam cho e hỏi...làm sao để đưa lên trên vạy.e thêm tiện ích nó toàn nằm ở dưới cùng trang ạ

    Trả lờiXóa
    Trả lời
    1. Mình thay amin trả lời vậy. Em vào BỐ cục => Sau đó kéo tiện ích HTAML đó lên trên đầu trang là oke.

      Xóa
  18. NamKna cho hỏi mình làm cái menu dọc 3 cấp giống vật giá thì tới cấp 2 thì men bị che bởi phần right. Blog mình là http://3webbanhang.blogspot.com/ bạn có thể chỉ cho mình lổi sai được ko

    Trả lờiXóa
    Trả lời
    1. Template đó chỉ có 2 cấp bạn ak.

      Xóa
  19. A ơi ! a có thể demo cho e cái menu giống như thế này dc hk ? http://itshare247.blogspot.com/ E muốn thay thế mấy cái : Giới thiệu-liên hệ-Other-Policy
    A thay thế cho hợp với blog của e với ! blog của em đây : http://itc24h.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. CSS:

      /*MENU*/
      #cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px 5px 0px 0px}
      #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
      #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
      #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
      #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
      #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
      #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
      #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
      #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
      #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
      #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
      #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
      #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
      #cssmenu ul li > ul{width:200px;}
      #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
      #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
      #cssmenu, #cssmenu > ul > li > ul > li a:hover {
      background: #006666;
      }
      #cssmenu{border: 1px solid rgb(48, 48, 48);margin: 5px 0px 5px 0px}
      #cssmenu > ul > li > a{border-right:1px solid rgba(0, 0, 0, 0.26); color:#fff;}
      #cssmenu > ul > li > a:after{border-color: rgba(92, 84, 84, 0.39)}
      #cssmenu > ul > li > a:hover{background:#111;}
      .menufooter{background:url(http://4.bp.blogspot.com/-bkVX-Kp_DyI/TvB0ghTvx5I/AAAAAAAAAV4/xx_GyTXMyFU/s1600/menubgfooter.gif) no-repeat bottom;height:14px;margin-top:-1px}
      .submenu{width:950px;float:left;color:#bcbcbc;z-index:100;margin-top:4px}
      .submenu .hot{width:550px;float:left}
      .submenu h4{float:left;width:90px;font:700 12px/18px Arial;color:#fff;text-transform:uppercase}
      .submenu a{color:#BCBCBC}
      .submenu .hotcnt{width:460px;float:left}
      .submenu .hotcnt{}
      .colorheader{color:#fff;font-weight:bold}
      .submenu p{float:left}
      .menucontent{width:960px;background:url(https://lh5.googleusercontent.com/-oSssHlGj628/UgRNIC6ENRI/AAAAAAAABEc/jWeJx7MPq7A/w1-h64-no/menurepeat.png) repeat-x;height:64px;position:relative;margin-top:10px}
      .search{width:280px;float:right}
      .search p{float:left;margin-right:5px;margin-top:3px}
      .boxsearch{background:url(http://1.bp.blogspot.com/-3NewhchdXKE/TvB0wImYEzI/AAAAAAAAAWQ/m0PkCMsevLM/s1600/searchboxx.gif) no-repeat;width:197px;height:20px;font-size:11px;border:none;float:left;line-height:20px;padding-left:10px}
      .buttonsearch{border-radius: 5px;width:55px;height:20px;border:1px solid #B4AEAF;background:#214A6B;font-weight:bold;color:#fff;float:left;cursor:pointer}
      .rss{position:absolute;top:13px;right:7px}

      Xóa
    2. và đây là xml:

      <div class='menucontent'>
      <div id='cssmenu'>
      <ul>
      <li class='active'><a href='/'><span>TRANG CHỦ</span></a></li>
      <li class='has-sub'><a href='/search/label/THÔNG TIN CÔNG NGHỆ?&max-results=15'><span>THÔNG TIN CÔNG NGHỆ</span></a>
      <ul>
      <li><a href='#'><span>Bảo mật</span></a></li>
      <li class='last'><a href='#'><span>Internet</span></a></li>
      <li class='last'><a href='#'><span>Sản phẩm</span></a></li>
      <li class='last'><a href='#'><span>Thiết bị</span></a></li>
      </ul>
      </li>
      <li class='has-sub'><a href='#'><span>THỦ THUẬT-IT</span></a>
      <ul>
      <li><a href='#'><span>Thủ thuật-Tiện ích</span></a></li>
      <li><a href='#'><span>Windows</span></a></li>
      <li class='last'><a href='#'><span>Photoshop</span></a></li>
      </ul>
      </li>
      <li class='has-sub'><a class='has-sub' href='#'><span>PHẦN MỀM</span></a>
      <ul>
      <li><a href='#'><span>Hệ điều hành</span></a></li>
      <li><a href='#'><span>Tiện ích</span></a></li>
      <li class='last'><a href='#'><span>Ứng dụng văn phòng</span></a></li>
      </ul>
      </li>
      <li class='has-sub'><a href='#'><span>DOWNLOAD</span></a>
      <ul>
      <li><a href='#'><span>PSD</span></a></li>
      <li class='last'><a href='#'><span>Vector-Brush</span></a></li>
      </ul>
      </li>
      <li class='has-sub'><a href='#'><span>GIẢI TRÍ</span></a>
      <ul>
      <li><a href='#'><span>Ảnh đẹp</span></a></li>
      <li><a href='#'><span>Funny</span></a></li>
      <li class='last'><a href='#'><span>Nhạc hay</span></a></li>
      </ul>
      </li>
      <li class='has-sub'><a href='#'><span>HỎI ĐÁP</span></a>
      <ul>
      <li><a href='#'><span>Góp ý</span></a></li>
      <li class='last'><a href='#'><span>Yêu cầu</span></a></li>
      </ul>
      </li>
      </ul>
      <div class='submenu'>
      <div class='search'>
      <form action='/search' id='searchThis' method='get' style='display: inline;'><input class='boxsearch' id='searchBox' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Tìm kiếm' vinput=''/>
      <input class='buttonsearch' id='searchButton' type='submit' value='Tìm'/></form>
      </div>
      <div class='rss'>
      <a href='/feeds/posts/default' style='font:500 10px/18px Arial; color:#d1d1d1;'>RSS <img border='0' src='http://1.bp.blogspot.com/-3VL3i4xw_rM/TvB26h6oZ3I/AAAAAAAAAWw/nITz02BXomk/s1600/rss.png'/>
      </a>
      </div>
      </div>
      </div>
      </div>

      Xóa
  20. A ơi! A hướng dẫn cho e là ép code vào đâu được k z anh?

    Trả lờiXóa
  21. hình như code này ko ap dung dc cho blog của e a ơi! e mún thay mấy cái mục giới thiệu, liên hệ, .... thành những mục như trên ý ! e làm mãi mà không dc

    Trả lờiXóa
    Trả lời
    1. Ý em là thay hẳn menu đó hay chỉ thêm mấy cái sub menu xổ dọc vào menu hiện tại của em thế ????

      Xóa
  22. vậy nếu mình làm menu cấp 4 thì phải làm thế nào ạ?

    Trả lờiXóa
    Trả lời
    1. Bạn có thể xem hướng dẫn chi tiết từng bước ở đây: XEM NGAY

      Xóa
  23. ad oi cho em hoi với : sao trang cua nguoi ta tren thanh tiêu đề thì đuôi của dòng link đều là HTML vidu http://namkna.blogspot.com/2013/02/dropmenu-style-facebook-for.html, còn trên trang của em đuôi toàn là label vidu :http://www.cachmangnhadat.com/search/label/QU%E1%BA%ACN%201 , em mới chơi blog còn gà lắm nên mong ad chỉ giúp em với , em cam on ad nhìu ,

    Read more: KHÔI PHỤC DỮ LIỆU BỊ ẨN TRÊN USB | dungheineken
    Under Creative Commons License: Attribution Share Alike

    Trả lờiXóa
    Trả lời
    1. Em xem bài viết này nha"

      Tối ưu thẻ Title trong Blogspot cho Search Engine

      Thêm đoạn code như bài viết đó sẽ được đó.

      Xóa
    2. em là CACH MANG NHA DAT ne ad oi,tại trình độ ltạo blog của em còn có hạn nen e dien ta dieu muon hoi chua dung , xin ad huong dan giup em lam cach nao de em tao noi dung cho 1 menu con mà khi sang phan xem blog click vao menu con do thi duong link tren thanh tieu de la html dc ko , mong ad chi giup em voi , em doi on ad nhiu lam

      Xóa
  24. Cảm ơn ad nha. Mình đã ứng dụng và thành công. Cũng đã click quảng cáo ủng hộ nha <3

    Trả lờiXóa
  25. cho mình hỏi mí cái # namkna là gì vậy ad, có phải mã độc hok, mình thay = chữ khác có tác dụng hok

    Trả lờiXóa
  26. chỉnh độ rộng của menu con đoạn nào vậy bạn ?

    Trả lờiXóa