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/AVvXsEh_ykR19WWxsm56k-Xr3PK7DuNDsd4Ip8rRI9lmuYvHh3c4fF_WpPwYED_FJ6Hb9FlpMjxBsNIcTclGZCCDpxhxgzGdC_tDj9d494OSyMK0xr1ma9x4pkXYyLnoePmxi543Vdhp26w8OjY/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/AVvXsEgBEx2sYo1M52LUuhZ7bhS2R-mNf_tfxEZO2URDt-Ca8sFd2b1KsNficoTX8vxfdAkqB9chgfJUpygZj9ykDKUxatVZlOUBccfh5NO3-awG1EHla5I-ZK-J7E2usO0iowr9rK3V4rjtkdw/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/AVvXsEhzU77BmbFYx9KiFffZQpR9d9L1Se5AsHZy0QsUjzbCjipvMxTB23OAMCRt-Y2uwDTnyl3OIIb7f3W7nomK4dvoPP6OywuOKKUeil5MN9FgmRYGQLsVcsRR9yFk8P9STGVr2KpMyxwXgng/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/AVvXsEjqsA6RFiRl53JZZtPwsYmasnBo_7IozLc-h6KuWpbmr0g4ij6iUAjM2RSKghzAL3Ujc_4fHS0u6irRM2maPS4Rs5DRsBc3WAYaOo6qkEijdaQgmPszyJ3uQImHWZqjjdlWi18rsmymqyg/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/AVvXsEivR3gmPAkfZB39aF1_vG98KJLlkwwHz1pFLvGMfrud6r_YE1_KLgWIShyphenhyphenU9aVnuGyYFTl28XpcP4OUL_6vp-ByofNLmpkuI-8ya9COxjL1TJpotr13Pq_0EWOPWQNGdZPrwdnx_J4_S68/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/AVvXsEgkihLIT7u2MpYyZrXbU1vnpAMHRRwNmD4Oes2_WAhd9-Sw7g_pERiUpSVJeuJLZbSRyRRz0rVGweRU5TP5Tp8qfx64aY18jqUac3xpyHjcuITkSFzEDMhZrliDXQyJTu6U2nda2RwUPYw/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