Hướng dẫn tạo menu ngang nằm ở đầu hoặc cuối trang website và blogger

Để blog hay website của các bạn trở lên xinh động hơn hôm nay mình xin giới thiệu tới các bạn cách tạo menu trượt ngang nằm ở đầu blog/website.

Cách tạo menu trượt ngang

1. Đăng nhập admin Blogger.com ---> chọn Blog cần tạo ---> bấm vào Mẫu --->tiếp theo bấm vào Chỉnh sửa HTML.

2. Tìm thẻ ]]></b:skin 

3. Chèn đoạn code sau vào trước thẻ ]]></b:skin vừa tìm được ở bước 2

/* VATARBOY MENU */
#VATARBOY_menu{background-color:#E93302;height:34px;width:100%;min-width:960px;position:fixed;top: 0px;left:0;z-index:9999;overflow:hidden;border-top: 0px solid #9932CC;height:34px;width:100%;min-width:960;position:fixed;top: 0px;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #9932cc;}
#VATARBOY_menu ul{list-style:none;margin:auto;width:960px}
#VATARBOY_menu ul li{float:left;}
#VATARBOY_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:12px;font-family:Arial;text-shadow:0px -1px 0px
#0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#VATARBOY_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:yellow;}

4. Lưu mẫu lại

5. Tìm thẻ  </head> 

6. Chèn đoạn code sau vào sau thẻ </head> vừa tìm được ở bước 5

<div id='VATARBOY_menu'>
    <ul>
    <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL7gijS1MHX4hPdJ027wf5qk2WfasFKTTF5ON-mbhJQU5L8yuhXmM8VYow4EmX9eQXhU69XhN-BIYitzgYcTJ0t8ZKdIDRb74Wi7Jw2Gbk4ug3UtPsjbo4AHlw5HlOkvdwvFaX5tglRoU/s1600/home_icon.gif' style='padding:0px;'/>Home</a></li>
      <li><a href='/'>Tên menu 1</a></li>
      <li><a href='/'>Tên menu 2</a></li>
      <li><a href='/'>Tên menu 3</a></li>
      <li><a href='/'>Tên menu 4</a></li>
      <li><a href='/'>Tên menu 5</a></li>
      <li><a href='/'>Tên menu 6</a></li>
      <li><a href='/'>Tên menu 7</a></li>
      <li><a href='/'>Tên menu 8</a></li>
    </ul>
    </div>

Cuối cùng các bạn chỉ cần nhấn lưu mẫu và tận hưởng thành quả mình vừa làm

Nếu các bạn muốn nó lằm phía dưới cuối blog thì các bạn thay top: 0px thành bottom: 0px 

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