Thủ thuật tạo menu đa cấp cho blog

28 Th12


  • Hôm nay Chip giới thiệu cho các bạn một menu đa cấp rất hay mà Chip Vừa sưu tầm và chỉnh sửa lại xong.Menu này chip cũng đang sử dụng đó tiện lợi,nhưng có 1 nhược điểm các bạn nên chú ý đó là nó chỉ có thể hoạt động tốt bên trên bài đăng Blog thôi.các bạn xem DEMO trên Weblog của chip na.
  • Giờ bắt đầu thôi nào:
    1>Các bạn vào Thiết kế > Chỉnh sửa HTML > Chèn đoạn code sau bên dưới thẻ <head>

    <link href=’http://chipteenplis.googlecode.com/files/ddsmoothmenu.css ‘ rel=’stylesheet’ type=’text/css’/>

    <link href=’http://chipteenplis.googlecode.com/files/ddsmoothmenu-v.css ‘ rel=’stylesheet’ type=’text/css’/>

    <script src=’http://chipteenplis.googlecode.com/files/jquery.min.DC.js&#8217; type=’text/javascript’/>

    <script src=’ http://chipteenplis.googlecode.com/files/menu24h.JS ‘ type=’text/javascript’>

    </script>

    <script type=’text/javascript’>

    ddsmoothmenu.init({

    mainmenuid: &quot;smoothmenu1&quot;, //menu DIV id

    orientation: 'h', //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;

    classname: 'ddsmoothmenu', //class added to menu's outer DIV

    //customtheme: [&quot;#1c5a80&quot;, &quot;#18374a&quot;],

    contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]

    })

    ddsmoothmenu.init({

    mainmenuid: &quot;smoothmenu2&quot;, //Menu DIV id

    orientation: 'v', //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;

    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV

    //customtheme: [&quot;#804000&quot;, &quot;#482400&quot;],

    contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]

    })

    </script>

    <link href=’http://traidatmui.110mb.com/Myfile/css/style24h.css&#8217; rel=’stylesheet’ type=’text/css’/>

    <script src=’http://chipteenplis.googlecode.com/files/jquery.min.JS&#8217; type=’text/javascript’/>

    <script src=’http://chipteenplis.googlecode.com/files/menu24h.JS ‘ type=’text/javascript’/>

    <script type=’text/javascript’>

    ddsmoothmenu.init({

    mainmenuid: &quot;smoothmenu2&quot;,

    orientation: 'v',

    classname: 'ddsmoothmenu-v',

    //customtheme: [&quot;#804000&quot;, &quot;#482400&quot;],

    contentsource: &quot;markup&quot;

    })

    </script>

    2>Các bạn Lưu Mẫu lại.
    3>Các bạn tạo 1 HTML/JAVARSCRIPT sau đó chèn đoạn code sau vào na.

    <div class=’ddsmoothmenu’ id=’smoothmenu1′>

    <ul>

    <li><a href=’http://chipkool.blogspot.com’>INDEX</a&gt;

    <ul>

    <li><a href=’http://chip-4rum.forumvi.net/’>CHIP4-RUM</a></li&gt;

    <li><a href=’#’>CHAT ZOOM</a></li>

    <li><a href=’#’>CONTACT ME</a></li>

    </ul>

    </li>

    <li><a href=’#’>TH THUT</a>

    <ul>

    <li><a href=’http://chipkool.blogspot.com/search/label/thu%20thuat%20blogger’>BLOGGER</a></li&gt;

    <li><a href=’#’>BLOG PLUS</a></li>

    <li><a href=’http://chipkool.blogspot.com/search/label/thu%20thuat%20vi%20tinh’>VI TINH</a></li>

    <li><a href=’http://chipkool.blogspot.com/search/label/thu%20thuat%20internet’>INTERNET</a></li&gt;

    <li><a href=’#’>MOBILE</a></li>

    <li><a href=’#’>PHOTOSHOP</a></li>

    <li><a href=’#’>MICROSFT</a></li>

    </ul>

    </li>

    <li><a href=’#’>GII TRÍ</a>

    <ul>

    <li><a href=’#’>VIDEO – CLIP</a>

    <ul>

    <li><a href=’#’>Sub Item 1.1.1</a></li>

    <li><a href=’#’>Sub Item 1.1.2</a></li>

    <li><a href=’#’>Sub Item 1.1.3</a></li>

    <li><a href=’#’>Sub Item 1.1.4</a></li>

    <li><a href=’#’>Sub Item 1.1.5</a></li>

    <li><a href=’#’>Sub Item 1.1.6</a></li>

    <li><a href=’#’>Sub Item 1.1.7</a></li>

    </ul>

    </li>

    <li><a href=’#’>HI-TIVI ONLINE</a></li>

    <li><a href=’#’>XEM PHIM</a>

    <ul>

    <li><a href=’#’>PHIM HAY</a></li>

    <li><a href=’#’>PHIM NÓNG</a></li>

    <li><a href=’#’>WEB XEM PHIM</a></li>

    </ul>

    </li>

    <li><a href=’#’>Sub Item 1.4</a></li>

    <li><a href=’#’>Sub Item 1.2</a></li>

    <li><a href=’#’>Sub Item 1.3</a></li>

    <li><a href=’#’>Sub Item 1.4</a></li>

    </ul>

    </li>

    <li><a href=’#’>PHN MM</a>

    <ul>

    <li><a href=’#’>Sub Item 2.1</a>

    <ul>

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    <li><a href=’#’>Sub Item 2.1.2</a></li>

    <li><a href=’#’>Sub Item 2.1.3</a></li>

    <li><a href=’#’>Sub Item 2.1.4</a></li>

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    <li><a href=’#’>Sub Item 2.1.2</a></li>

    <li><a href=’#’>Sub Item 2.1.3</a></li>

    <li><a href=’#’>Sub Item 2.1.4</a></li>

    </ul>

    </li>

    <li><a href=’#’>Sub Item 2.2</a>

    <ul>

    <li><a href=’#’>Sub Item 2.2.1</a></li>

    <li><a href=’#’>Sub Item 2.2.2</a></li>

    <li><a href=’#’>Sub Item 2.2.3</a></li>

    <li><a href=’#’>Sub Item 2.2.4</a></li>

    <li><a href=’#’>Sub Item 2.2.1</a></li>

    <li><a href=’#’>Sub Item 2.2.2</a></li>

    <li><a href=’#’>Sub Item 2.2.3</a></li>

    <li><a href=’#’>Sub Item 2.2.4</a></li>

    </ul>

    </li>

    <li><a href=’#’>Sub Item 2.3</a></li>

    <li><a href=’#’>Sub Item 2.4</a></li>

    </ul>

    </li>

    <li><a href=’#’>BLOG</a>

    <ul>

    <li><a href=’http://chipkool.blogspot.com/search/label/blog%20radio1′>CA S TÂM HN</a></li>

    <li><a href=’#’>NHT KÝ</a></li>

    <li><a href=’#’>Sub Item 1.3</a></li>

    <li><a href=’#’>Sub Item 1.4</a></li>

    <li><a href=’#’>Sub Item 1.2</a></li>

    <li><a href=’#’>Sub Item 1.3</a></li>

    <li><a href=’#’>Sub Item 1.4</a></li>

    </ul>

    </li>

    <li><a href=’#’>SITEMAP</a>

    <ul>

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    <li><a href=’#’>Sub Item 2.1.2</a></li>

    <li><a href=’#’>Sub Item 2.1.3</a></li>

    </ul>

    </li>

    </ul>

    <br style=’clear: left’/>

    </div>

    bạn chú ý các đoạn code sau trong bước 3 này;

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    Bạn muốn thêm các Sub Item con Của Sub Item 2.1.1 thì bạn chi việc tách </a> và</li> sau đó thêm đoạn code sau vào giữa na.

    <ul>

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    <li><a href=’#’>Sub Item 2.1.2</a></li>

    <li><a href=’#’>Sub Item 2.1.3</a></li>

    <li><a href=’#’>Sub Item 2.1.4</a></li>

    <li><a href=’#’>Sub Item 2.1.1</a></li>

    <li><a href=’#’>Sub Item 2.1.2</a></li>

    <li><a href=’#’>Sub Item 2.1.3</a></li>

    <li><a href=’#’>Sub Item 2.1.4</a></li>

    </ul>

    Vậy là gần xong rồi đấy. cuối cùng là bạn nên kéo Javarscript vừa tạo ở bước 3.Lên trên phần bài đăng trên blog.Trong phần tử trang ấy.nếu như các bạn không hiểu hay còn thắc mắc gì.Thì comment cho Chip na.

    Chúc các bạn thành công!!!?

    Trả lời

    Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

    WordPress.com Logo

    Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

    Twitter picture

    Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

    Facebook photo

    Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

    Google+ photo

    Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

    Connecting to %s

    %d bloggers like this: