Tạo thanh menu ngang cho blogspot

Hello world! This is a testtemplatekhoi.com's Web.

Demo

Chèn đoạn code dưới vào dưới thẻ đóng của tiện ích Header 1 ( Html ): <b:widget id='Header1'>
Code:

<div id='kenthir-wrapper'>
<ul class='menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7MggBGu_YTjglCzo2iXSAdo-zuZgrAxGLKQox2fdd8dO7LyT89Cs3iqfbf1TpRT4HfEYnaQeIXe_dUrJ3PPzEFzo_M8mFhpCVzLDtzcFe6mJo6vJy0WR9dZIY3HQC8LjFS-m39vc8nUQ/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>About Me</a></li>
<li><a href='#'>Linh Tinh</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='#'>Label</a>
<ul>
<li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Thủ thuật'>Thủ Thuật</a></li>
      <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Trangtrí'>TrangTrí</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Phần Mềm'>PhầnMềm</a></li>
   <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Thiết kế'>Thiết Kế</a></li>
   <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Widget'>Widget</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Hiệu ứng'>Hiệu Ứng</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Mẫu'>Khung Chứa</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Mẫu'>Mẫu</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Mẫu'>Mẫu Thư</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Web'>Web</a></li>
     <li><a class='trigger' href='http://hongockhoi.blogspot.com/search/label/Khéo tay'>Khéo Tay</a></li>
   </ul>
</li>
<li><a href='http://hongockhoi.blogspot.com/p/blog-page_4994.html'>Mã Hóa</a></li>
<li><a href='http://hongockhoi.blogspot.com/p/blog-page_24.html?zx=b3c3ea75124923c4'>HEX Code</a></li>
</ul>
</div>

Thay link và tiêu đề bằng hiệu chỉnh của bạn
Tiếp tục chèn code css vào trước thẻ đóng ]]</b:skin>

.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, #555, #222);
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 #000;
box-shadow: 0 5px 5px #000;
}
.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/AVvXsEjSEJa0yqLRzEyXLZagjt2oHxNbkRh8Py3b-doidFfK2ruVk42My1mjT9bo05PV9CC7uTE_RvuiKIF8_Li6jR1GyW53wj13z8xWmlMwaGdQz_rtNXWQc_Ux6dLJiEZF04ScJ75GmAHfHy4/s1600/bagi.gif) no-repeat top right;
display:block;
text-decoration:none;font-
family:Arial;font-weight:700;
font-size:14px;color:#ddd;
text-shadow:1px 1px 1px #000;
-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/AVvXsEgAF-0AKVyLUktF9j6PIOTxegNlpdxRFVadP_NVKDk-__XbMvdZqnO6ja3_0eb7mdKJf6bfZ9W1zhukG5iSqS_B50B5ZoaRMWrhnb4mp0t_mkslab5v6Hu2s-S7mNrcLFP9lSh0Q__UkfE/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:100px;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/AVvXsEjga715ov3KrdkvmKExh0eSfWc-C1xZ0fpGL5lRhp8t4Ns5SncDCZ9C0qn5o0RAL5Rb6iw-_4BVU7HPG-T6dwH8CFQYlFx3XAJtFB9CzI3eEXviT2wN-7k6bGdePwSf8F6cltvKmZqn6GU/s1600/arrow.png)
no-repeat 6px center
}

(✽) _Code chèn thanh menu này được trích ra từ blog này

Menu testtemp.

Tạo thanh menu ngang cho blogspot

Hello world! This is a testtemplatekhoi.com's Web.

Demo