Tạo Menu dọc xổ ngang 3 cấp cho blogspot

Tạo Menu dọc xổ ngang 3 cấp cho blogspot

Demo:

Để tạo được menu kiểu này các bạn có thể làm theo các bước sau:

Bước 1 : Đăng nhập blog: Vào Template -> Edit html

Tìm thẻ </head> post trước nó đoạn css, script (Bên dưới) --> Save

<style type="text/css">
    .sidebarmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px Verdana;
    width: 200px; /* Độ rộng của menu chính cấp 1 */
    border-bottom: 1px solid #ccc;
    }
    .sidebarmenu ul li{
    position: relative;
    }
    /* Top level menu links style */
    .sidebarmenu ul li a{
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #778;
    border-right: 1px solid #778;
    }
    .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
    background-color: #CC0000; /* Màu nền của tab (default state)*/
    }

    .sidebarmenu ul li a:visited{
    color: white;
    }
    .sidebarmenu ul li a:hover{
    background-color: #ff0000;
    }
    /*Sub level menu items */
    .sidebarmenu ul li ul{
    position: absolute;
    width: 250px; /* Độ rộng của menu con cấp 2 và 3 */
    top: 0;
    visibility: hidden;
    }
    .sidebarmenu a.subfolderstyle{
    background: url(http://1.bp.blogspot.com/-Dnx2NMUc_VA/UaoeKUU5oQI/AAAAAAAADNc/8ysOZjddVls/s1600/xo+xuong+blogger.gif) no-repeat 97% 50%;
    }
    </style>
    <script type="text/javascript">
    var menuids=["sidebarmenu1"] //Phamhuanmko.net
    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      for (var t=ultags.length-1; t>-1; t--){ //Phamhuanmko.net
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
    </script>

Bước 2: Tìm vị trí muốn đặt:  Menu Dọc xổ ngang 3 cấp cho blogspot:

Cách đơn giản nhất là vào Layout (Chọn vị trí đặt Menu) -> chọn Add a Gadget -> HTML/JavaScript (Post đoạn html sau) --> Save

<div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
      <ul>
      <li><a href="#">Sub menu 2.1</a>
    <ul>
        <li><a href="#">Sub menu 2.1.1</a></li>
        <li><a href="#">Sub menu 2.1.2</a></li>
        <li><a href="#">Sub menu 2.1.3</a></li>
        <li><a href="#">Sub menu 2.1.4</a></li>
        </ul>
      </li>
      <li><a href="#">Sub menu 2.2</a>
    <ul>
        <li><a href="#">Sub menu 2.2.1</a></li>
        <li><a href="#">Sub menu 2.2.2</a></li>
        <li><a href="#">Sub menu 2.2.3</a></li>
        </ul>
      </li>
      <li><a href="#">Sub menu 2.3</a>
        <ul>
        <li><a href="#">Sub menu 2.2.1</a></li>
        <li><a href="#">Sub menu 3.2.2</a></li>
        <li><a href="#">Sub menu 2.3.3</a></li>
        <li><a href="#">Sub menu 2.3.4</a></li>
        </ul>
      </li>
    </ul>
    <li><a href="#">Menu 3</a>
      <ul>
      <li><a href="#">Sub menu 3.1</a></li>
      <li><a href="#">Sub menu 3.2</a></li>
      </ul>
    </li>
   
    <li><a href="#">Menu 4</a>
      <ul>
      <li><a href="#">Sub menu 4.1</a>
    <ul>
        <li><a href="#">Sub menu 4.1.1</a></li>
        <li><a href="#">Sub menu 4.1.2</a></li>
        <li><a href="#">Sub menu 4.1.3</a></li>
        <li><a href="#">Sub menu 4.1.4</a></li>
        </ul>
      </li>

      <li><a href="#">Sub menu 4.3</a>
    <ul>
        <li><a href="#">Sub menu 4.2.1</a></li>
        <li><a href="#">Sub menu 4.2.2</a></li>
        <li><a href="#">Sub menu 4.2.3</a></li>
        <li><a href="#">Sub menu 4.2.4</a></li>
        </ul>
      </li>
      <li><a href="#">Sub menu 4.3</a>
        <ul>
        <li><a href="#">Sub menu 4.2.1</a></li>
        <li><a href="#">Sub menu 4.2.2</a></li>
        <li><a href="#">Sub menu 4.2.3</a></li>
        <li><a href="#">Sub menu 4.3.4</a></li>
        </ul>
      </li>
    </ul>
    </li></li></ul></div> 

Chú Ý: Sửa tên Sub Menu Thành tên menu của bạn. 

About "Administrator"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit, augue quis mattis gravida, est dolor elementum felis, sed vehicula metus quam a mi. Praesent dolor felis, consectetur nec convallis vitae.