Tạo menu cố định phía trên có nút ẩn hiện cho blogspot

DEMO

Bước 1: Vào bố cục, thêm 1 tiện ích HTML, sau đó copy và paste cái đống code sau đây vào:

<style>
.ShowHide {
background: none repeat scroll 0 0 #2e2f2e;
border-bottom: 2px solid #eee;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 2px solid #eee;
border-right: 2px solid #eee;
box-shadow: 1px 2px 9px #555;
cursor: pointer;
display: block;
padding: 0 7px;
height: 25px;
position: absolute;
right: 3px;
float: right;
top: 0;
z-index: 999;
}
#banner {
visibility: hidden;
display: none;
}
#banner {
background-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #eee;
box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);
height: 42px;
left: 0;
display: block;
margin-bottom: 50px;
padding: 0px 5px;
position: fixed !important;
right: 0;
top: 0;
z-index: 999;
}

.menu,.menu ul,.menu li,.menu a{
border:none;outline:none;margin:0;
padding:0;z-index:999
}
 .menu{
height:40px;width:auto; background-color: #222;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
background-image: -webkit-linear-gradient(top, #ED0000, #C20404);
background-image: -moz-linear-gradient(top, #555, #222);
background-image: -ms-linear-gradient(top, #555, #222);
background-image: -o-linear-gradient(top, #555, #222);
background-image: linear-gradient(top, #555, #222);
 -moz-box-shadow: 0 5px 5px #000;
-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, 1);
box-shadow: 0 5px 5px rgba(255, 255, 255, 1);
  }
 .menu li{
position:relative;list-style:none;
float:left;display:block;height:40px
}
 .menu li a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMEKGo5kSjFou9-aRbt5djp6nux0uDkb1HM7ysYuPuChBYDO0pq8RqaKMBdgQJNlwKD_Od68JC-_qIpxF05Vcn2pj4_aZEMYglbVgOpbMCJ7zrgSNYqhCZoly-O0XgGi8kLZNTKBWKE4/s1600/bagi.gif) no-repeat top right;
display:block;
text-decoration:none;font-
family:Arial;font-weight:700;
font-size:14px;color:#FFFFFF;
text-shadow:1px 1px 1px #1A00FF;
-webkit-transition:color .2s ease-in-out;
-moz-transition:color .2s ease-in-out;
-o-transition:color .
2s ease-in-out;-ms-transition:color
 .2s ease-in-out;transition:color .
2s ease-in-out;margin:0;
padding:12px 14px  12px
}
 .menu li:first-child a{
padding:10px 10px 7px
}
 .menu li:hover > a{color:#48d}
 .menu ul{
position:absolute;top:41px;
left:0;opacity:0;
background:#fdfdfd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp5xreFEkDzLmlq4GPXVvsU8ksOI0kxLJZjIBE55HY8DeR_6ExzqYMS1aBhCQoyzyC0BZRx9IUZAIIOBSHdF6wYq3wrNRR1qAH3jVb71v0QHGWAPU7Ot5Na1OxhMiPutr-IEtZo5KKmOQ/s1600/menuhover.png)
 repeat-x top;
-webkit-border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px;
border:1px solid #666;
border-top:none;
-webkit-transition:opacity .25s ease .1s;
-moz-transition:opacity .25s ease .1s;
-o-transition:opacity .25s ease .1s;
-ms-transition:opacity .25s ease .1s;
transition:opacity .25s ease .1s
}
 .menu li:hover > ul{opacity:1}
 .menu ul li{
height:0;overflow:hidden;
-webkit-transition:height .25s ease .1s;
-moz-transition:height .25s ease .1s;
-o-transition:height .25s ease .1s;
-ms-transition:height .25s ease .1s;
transition:height .25s ease .1s;padding:0
}
 .menu li:hover > ul li{
height:36px;
overflow:visible;
padding:0
}
 .menu ul li a{
color:#111;font-weight:400;
width:150px;margin:0;
padding:10px 0 10px 30px;
text-shadow:none
}
 .menu ul li:first-child a{
padding:10px 14px  10px 30px
}
 .menu ul li:last-child a{
border:none
}
 .menu a.trigger{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9U6UfPtsOD8lmCuS_MAI_PRV6QAicD4eJ0hb_GU9YQg8thiNrfRoZbzhSDwMaTAUTleQNmoRETMxtQ4sLUsPLt7U23IwnoEytI1ASmA1N7EijjHMf_DV2B94d7o9d2ACmq6rrmULuTNc/s1600/arrow.png)
 no-repeat 6px center
}
</style>
<script type="text/javascript">
var showHeader=false;
function ShowHideBanner() {
showHeader=!showHeader;
var nav=document.getElementById("banner");
if (showHeader) {
banner.style.visibility="visible";
banner.style.display="block";
}
else {
banner.style.visibility="hidden";
banner.style.display="none";
}
}
</script>
<div class="fixed-navbar">
<div id="banner">
<div id='kenthir-wrapper'>
 <ul class='menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKnb6fPZ9NQ9hJ1f7HjgFXH9gBIFsVLGtrYOv7iuhTtSE5E4buJfCFzjNnJhizJAdr4R98ZdnzTfX8sgqTAJxxU3ousul0USpO4IJ3k5xGfQYfaqfrcW8YP0evishojjm2Kjye5qu_Zc/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>PES 13</a>
    <ul>
<li><a class='trigger' href='#'>Sub Menu 1</a></li>
<li><a class='trigger' href='#'>Sub Menu 2</a></li>
<li><a class='trigger' href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>More</a>
    <ul>
<li><a class='trigger' href='#'>Label_01</a></li>
<li><a class='trigger' href='#'>Label_02</a></li>
<li><a class='trigger' href='#'>Label_03</a></li>
    </ul>
</li>
<li><a href='#'>Liên hệ</a></li>
</ul>
</div>
<!-- end .menu -->
<div class="ShowHide" name="Hide" style="z-index:999;top:52px;height:28px" title="Hide" onclick="ShowHideBanner();">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGH7ROPHbb_A0AGkGjqTxRS_RMWvK9dri8HEZbU2hMHgrp-Wpt9ynnQiQdorTu15Q-G26hV0xQn2BGu3O6BjjGP_-LmHjbgVYMivWSlfwM45wwy1bLOnd9ZoEqjptgTexcLqIN9zg72Ec/s1600/arrow_up.png" width="20px" />
<a style="visibility:hidden;" ></a>
</div>
</div>
<div class="ShowHide" name="Show"style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZ6Pj5aSKtovIuTyPbWIKWXtnvhyJakwNOsOD84VOY-GD4T7wEbBG0S1eW35GjyxhTiasT3xuPU1jXCVEnjcVjjwZcBNuI8WpWdUXnrlTk9l84J44JyMtU88XDwHxf-CK7SNTzFnrews/s1600/down.png" width="20px" />
<a style="visibility:hidden;" >
</a></div>
</div>

Bước 2:
- Thay link nhãn, trang, bài viết vào dấu # và tên menu vào chỗ chữ màu đỏ.
- Muốn đổi màu nền cho menu chính và menu con thì phải lấy mã màu rồi thay vào chỗ chữ màu xanh
- Độ dài menu con ngắn khiến cho tiêu đề bị xuống dòng thì tăng độ dài của nó bằng cách tăng số px vào chỗ chữ màu hồng

Bước 2: Lưu tiện ích, lưu sắp xếp.

Bài viết from: Quân Phạm