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> 


Sửa tên Menu 
Thành tên menu của bạn.


 
====================================================================
Cảm ơn sự quan tâm và ủng hộ của mọi người trên web https://www.antonda.xyz/
Antonda tôi sẽ cập nhật những tin tức liên quan đến vấn đề này sớm nhất .
====================================================================

Nguồn : https://www.antonda.xyz/

Tất cả các bài viết đều được viết từ trải nghiệm thực tế, vì vậy để đảm bảo kinh phí cho website hoạt động hiệu quả, rất hy vọng mọi người hãy click vào các link quảng cáo để chúng tôi có một phần kinh phí, giúp chúng tôi có những “động lực” để cung cấp những thông tin mới nhất và bổ ích nhất tới các bạn. Xin cảm ơn !

Link quảng cáo : | Click