Menu dọc xổ ngang đẹp cho blogspot

Cập nhật: 28 thg 8, 2015 tháng 8 28, 2015

Bước 1: Đăng nhập vào tài khoản blogger.com
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML  nhấn Ctrl+F tìm đến thẻ ]]></b:skin>
<style type="text/css">
/* Độ rộng của menu chính cấp 1 */
.sidebarmenu ul{margin:0;padding:0px;list-style-type: none;width:50%;font-weight: bold;}
/* Lên cấp độ liên kết trình đơn phong cách */
.sidebarmenu ul li{position:relative;}
.sidebarmenu ul li a{display:block;overflow:auto;color: #0c9706;text-decoration: none;padding:10px;border-bottom-color: #E0E0E0;}
/* Màu nền của tab */
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active {
  padding: 10px;
  background-color: #f7f7f7;
  border-bottom-color: #E0E0E0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: #FFFFFF;
  border-top-style: solid;
  border-top-width: 1px;
  border-right-color: #E0E0E0;
  border-right-style: solid;
  border-right-width: 1px;
  }
.sidebarmenu ul li a:visited{color:#0c9706;}
.sidebarmenu ul li a:hover{background-color:#EAEAEA;}
/* menu con cấp 2,3 */
.sidebarmenu ul li ul{ position: absolute;width: 100%;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>
 Sau khi chèn CSS xong các bạn tìm đến thẻ <header> dán đoạn code này vào bên dưới thẻ <header>
<script type="text/javascript">
var menuids=["sidebarmenu1"] //wapgialai.blogspot.com
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--){ //wapgialai.blogspot.com
  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>
Cuối cùng dán đoạn code này dưới thẻ <body> 
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a>
<ul>
<li><a href="link 1">Text 1</a></li>
<li><a href="link 2">Text 2</a></li>
<li><a href="link 3">Text 3</a></li>
</ul>
</li>
<li><a href="#">menu 3</a>
<ul>
<li><a href="link 1">Text 1</a></li>
<li><a href="link 2">Text 2</a></li>
<li><a href="link 3">Text 3</a></li>
<li><a href="link 4">Text 4</a></li>
<li><a href="link 5">Text 5</a></li>
<li><a href="link 6">Text 6</a></li>
</ul>
</li>
<li><a href="#">menu 4</a>
<ul>
<li><a href="link 1">Text 1</a></li>
<li><a href="link 2">Text 2</a></li>
<li><a href="link 3">Text 3</a></li>
<li><a href="link 4">Text 4</a></li>
</ul>
</li>
<li><a href="#">menu 5</a>
<ul>
<li><a href="link 1">Text 1</a></li>
<li><a href="link 2">Text 2</a></li>
<li><a href="link 3">Text 3</a></li>
<li><a href="link 4">Text 4</a></li>
</ul>
</li>
<li><a href="#">menu 6</a>
<ul>
<li><a href="link 1">text 1</a></li>
<li><a href="link 2">text 2</a></li>
<li><a href="link 3">text 3</a></li>
</ul>
</li>
<li><a href="#">menu 7</a></li>
</ul>
</div>
Bước 4 : Lưu lại và xem kết quả
Chúc các bạn thành công !
Liên hệ quảng cáo