Tạo menu xổ lên cố định bên dưới trang cho blogspot

Menu xổ lên bên dưới cố định sẽ làm cho blog của bạn trông khá "độc", để làm được điều này, mình đã tìm tòi 1 số code trên mạng. Code cho menu cố định bên trên + code làm cho widget nổi và đã thành công, sau đây mình sẽ chia sẻ cách làm:

Các bạn có thể xem demo tại: http://aliensf.blogspot.com/

Bước 1:  Đến mục Chỉnh sửa mẫu HMTL (Edit HTML) và tìm đoạn mã ]]></b:skin> (để con trỏ chuột nháy vào trong khung chứa mâu, dùng tổ hợp phím Ctrl + F để tìm và chèn đoạn mã bên dưới trước nó:

div.fixed-navbar { z-index:9999; background-color: #ccc; color: #000; font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif; position: fixed; top: 0; left: 0; text-align: left; width: 100%; border: 2px #00f solid; }

- Trong đó:
position: fixed; top: 0; left: 0; là vị trí hiển thị trên đầu, bạn có thể đổi lại thànhposition: fixed; bottom: 0; left: 0; để hiện thị phía dưới bên trái.
width: 100% là độ rộng của khung bằng chiều rộng blog. Có thể thay dổi bàng số tuyệt đối là width:900Px theo ý bạn. (Nếu bạn đang sử dụng giao Responsive diện thì bạn nên dùng số tương đối là %).

Bước 2:   Vào bố cục thêm 1 tiện ích (widget) HTMLvào vị trí cuối blog (nếu blog bạn ko có phần thêm tiện ích phía chân blog thì đọc bài này để làm xuất hiện phần add tiện ích ở chỗ đó: Click vào), xong xuôi rồi thì dán mã sau vào (ko cần đặt tên cho tiện ích này):

<div class="fixed-navbar"> {Code menu xổ lên của bạn} </div>

- Trong đó: {Code menu xổ lên của bạn} là đoạn mã menu sau:

<style type='text/css'> body{padding: 3em; } #menu * { padding:0; margin: 0; font: 12px arial; list-style-type:none;} #menu { margin-top: 0px; float: left; line-height: 10px; left: 200px;} #menu a { display: block; text-decoration: none; color: #F7EFEF;} #menu a:hover { background: #B0BD97;} #menu ul li ul li a:hover { background: #B7B9B5; padding-left:9px; border-left: solid 1px #000;} #menu ul li ul li { width: 100px; border: none; color: #B0BD97; padding-top: 3px; padding-bottom:3px; padding-left: 3px; padding-right: 3px; background: #333;} #menu ul li ul li a { font: 11px arial; font-weight:normal; font-variant: small-caps; padding-top:3px; padding-bottom:3px;} #menu ul li { float: left; width: 100px; font-weight: bold; border-top: solid 1px #283923; border-bottom: solid 1px #283923; background: #333;} #menu ul li a { font-weight: bold; padding: 5px 10px;} #menu li{ position:relative; float:left;} #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ display:none; list-style-type:none; width: 140px;} #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { display:block;} #menu:hover ul li:hover ul li:hover ul { position: absolute; margin-left: 60px; margin-top: -22px; font: 10px;} #menu:hover ul li:hover ul { position: absolute; margin-top: 1px; font: 10px; bottom:10%; } 
</style>
 <div id="menu"> 
<ul> <li><center><a href="/">Home</a></center> 
         <ul> <li><a href="XXX">About me</a></li> 
                  <li><a href="XXX">Official Blog</a></li> </ul> </li> 

<li><center><a href="#">PES 6</a></center>
         <ul> <li><a href='XXX' tabindex='0'>Patch</a></li>
                  <li><a href='XXX' tabindex='0'>Kits</a></li>
                  <li><a href='XXX' tabindex='0'>Adboards</a></li>
                  <li><a href='XXX' tabindex='0'>Download</a></li> </ul></li> 
<li><center><a href="#">PES 10</a></center> 
      <ul> <li><a href='XXX' tabindex='0'>Patch</a></li> 
               <li><a href='XXX' tabindex='0'>Commentary</a></li> 
               <li><a href='XXX' tabindex='0'>Download</a></li> </ul> 
</li> 
<li><center><a href="XXX">PES.VN</a></center> </li> </li></ul> </div>

» Trong đó:
Thay thế các dấu  # thành liên kết của trang bài viết, nhãn hoặc trang blog mà bạn muốn. 

Thay các tiêu đề menu tương ứng dấu XXX,

Muốn thêm 1 tab menu nữa thì copy mã sau:

<li><center><a href="#">PES 10</a></center> <ul> <li><a href='XXX' tabindex='0'>Patch</a></li> <li><a href='XXX' tabindex='0'>Commentary</a></li> <li><a href='XXX' tabindex='0'>Download</a></li> </ul> </li>

Dán vào ngay sau đoạn code của tab menu phía trước

Bước 3: Lưu tiện ích lại và lưu sắp xếp là xong !

Viết bài: Quân Phạm