Tạo thanh menu ngang cho blogspot

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

1_Demo

Xem Code ↓

HTML

<style>
.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/AVvXsEg8iMksvp9SQmwChHgml7dj9W1jxJzXAoEAxv3iEaMuAv2BGSGJaIZeHFadmqY8MIfwhYSgLQ8IwbLi93G2JRBd68sV61uh0GnxFMZjmorG1sUgZGtEcpSib3GCzd_C3jfuDSxFMJkjXvU/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/AVvXsEjCWm_v2DKeL4qv6UdTGE7R0y4_AST_irqz1X4n8w7pTx3YPry9jGx7Z5lIiAfAyRwVib5M-Gw4stykSuS7Dl36kZiIurVEMM0dP2tv2Nu01Iv9-cFoRhas_i9iRu37292lQony2zfe-J0/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/AVvXsEgtrm0NSibAEaq1_CB3CHIssZzRNgMJFYuRR1Sr5FwlJFPWbmy2p1UEtaxp0QcgFoyJdet7Ystt5zSmqDu70-xCg0tTgrtnz6he24kry5ld25y0ZUTqS81K_XJmY9SJdvNgBdS9-1Eq5Fo/s1600/arrow.png)
 no-repeat 6px center
}
</style>
<div id='kenthir-wrapper'>
    <ul class='menu' style="font-family:arial">
<li>
            <a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzULBJanfMysrLRjlSd0iHWahumnI2JkVxEiW72FMpvN2Qo90r7_iOP1iEvMZSYC8sxLZJzZ5mXP_WphKCqJGmdtzss5eZKLDCdFlXW-daDTWfTcQ5DddRYslBWfTQOBDUgme3fDqcuA/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>
<!-- end .menu -->

2_Dropdown Menu

Demo:

_ Xem code ↓

HTML

<style>
    #menu
    {
     width: 100%;
     margin: 0;
     padding: 10px 0 0 0;
     list-style: none;
     background: #111;
     background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
     background: -webkit-linear-gradient(#444, #111);
     background: -o-linear-gradient(#444, #111);
     background: -ms-linear-gradient(#444, #111);
     background: linear-gradient(#444, #111);
     -moz-border-radius: 50px;
     border-radius: 50px;
     -moz-box-shadow: 0 2px 1px #9c9c9c;
     -webkit-box-shadow: 0 2px 1px #9c9c9c;
     box-shadow: 0 2px 1px #9c9c9c;
    }
    #menu li
    {
     float: left;
     padding: 0 0 10px 0;
     position: relative;
     line-height: 0;
    }
    #menu a
    {
     float: left;
     height: 25px;
     padding: 0 25px;
     color: #999;
     text-transform: uppercase;
     font: bold 12px/25px Arial, Helvetica;
     text-decoration: none;
     text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a
    {
     color: #fafafa;
    }
    *html #menu li a:hover /* IE6 */
    {
     color: #fafafa;
    }
    #menu li:hover > ul
    {
     display: block;
    }

    #menu ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 99999;
        background: #444;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
        -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
        box-shadow: 0 0 2px rgba(255,255,255,.5);
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #menu ul ul
    {
      top: 0;
      left: 150px;
    }
    #menu ul li
    {
        float: none;
        margin: 0;
        padding: 0;
        display: block;
        -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
        box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    }
    #menu ul li:last-child
    {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #menu ul a
    {
        padding: 10px;
     height: 10px;
     width: 130px;
     height: auto;
        line-height: 1;
        display: block;
        white-space: nowrap;
        float: none;
     text-transform: none;
    }
    *html #menu ul a /* IE6 */
    {
     height: 10px;
    }
    *:first-child+html #menu ul a /* IE7 */
    {
     height: 10px;
    }
    #menu ul a:hover
    {
        background: #0186ba;
     background: -moz-linear-gradient(#04acec,  #0186ba);
     background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
     background: -webkit-linear-gradient(#04acec,  #0186ba);
     background: -o-linear-gradient(#04acec,  #0186ba);
     background: -ms-linear-gradient(#04acec,  #0186ba);
     background: linear-gradient(#04acec,  #0186ba);
    }
    #menu ul li:first-child > a
    {
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
    #menu ul li:first-child > a:after
    {
        content: '';
        position: absolute;
        left: 30px;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid #444;
    }
    #menu ul ul li:first-child a:after
    {
        left: -8px;
        top: 12px;
        width: 0;
        height: 0;
        border-left: 0;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
        border-right: 8px solid #444;
    }
    #menu ul li:first-child a:hover:after
    {
        border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after
    {
        border-right-color: #04acec;
        border-bottom-color: transparent;
    }

    #menu ul li:last-child > a
    {
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    #menu:after
    {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
    }
    * html #menu             { zoom: 1; } /* IE6 */
    *:first-child+html #menu { zoom: 1; } /* IE7 */
    </style>
<ul id="menu">
<li>
<a href="http://www.testtemplatekhoi.blogspot.com/">Home</a>
</li>
<li>
<a href="#">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li>
<a href="#">Item 11</a>
</li>
<li>
<a href="#">Item 12</a>
</li>
<li>
<a href="#">Item 13</a>
</li>
<li>
<a href="#">Item 14</a>
</li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul>
<li>
<a href="#">Item 21</a>
</li>
<li>
<a href="#">Item 22</a>
</li>
<li>
<a href="#">Item 23</a>
</li>
<li>
<a href="#">Item 24</a>
</li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul>
<li>
<a href="#">Item 31</a>
</li>
<li>
<a href="#">Item 32</a>
</li>
<li>
<a href="#">Item 33</a>
</li>
<li>
<a href="#">Item 34</a>
</li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li>
<a href="#">Item 41</a>
</li>
<li>
<a href="#">Item 42</a>
</li>
<li>
<a href="#">Item 43</a>
</li>
<li>
<a href="#">Item 44</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work</a>
<ul>
<li>
<a href="#">Work 1</a>
<ul>
<li>
<a href="#">Work 11</a>
<ul>
<li>
<a href="#">Work 111</a>
</li>
<li>
<a href="#">Work 112</a>
</li>
<li>
<a href="#">Work 113</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul>
<li>
<a href="#">Work 121</a>
</li>
<li>
<a href="#">Work 122</a>
</li>
<li>
<a href="#">Work 123</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul>
<li>
<a href="#">Work 131</a>
</li>
<li>
<a href="#">Work 132</a>
</li>
<li>
<a href="#">Work 133</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>
<a href="#">Work 21</a>
<ul>
<li>
<a href="#">Work 211</a>
</li>
<li>
<a href="#">Work 212</a>
</li>
<li>
<a href="#">Work 213</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 22</a>
<ul>
<li>
<a href="#">Work 221</a>
</li>
<li>
<a href="#">Work 222</a>
</li>
<li>
<a href="#">Work 223</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 23</a>
<ul>
<li>
<a href="#">Work 231</a>
</li>
<li>
<a href="#">Work 232</a>
</li>
<li>
<a href="#">Work 233</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li>
<a href="#">Work 31</a>
<ul>
<li>
<a href="#">Work 311</a>
</li>
<li>
<a href="#">Work 312</a>
</li>
<li>
<a href="#">Work 313</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 32</a>
<ul>
<li>
<a href="#">Work 321</a>
</li>
<li>
<a href="#">Work 322</a>
</li>
<li>
<a href="#">Work 323</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 33</a>
<ul>
<li>
<a href="#">Work 331</a>
</li>
<li>
<a href="#">Work 332</a>
</li>
<li>
<a href="#">Work 333</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>

3_Demo:

Code ↓ và

HTML

<style>
.menukhoiho-wrap{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihrz9VgrHXfTaL1Cs03X613_StCJu8eqMRJwx6pW_Nt4YDnkjIcxYlqJwsngFmtQkQkc7DQOxLYRA7px3V0uSRLyjCgGrjsLFr24p_57PhrkBQdP4t4S6XNKY7XbWgnWVo7j_waeqVU7C9/s1600/khoibg3.png) repeat-x top;height:56px;width:100%;}
.menukhoiho{font:normal 12px Arial;line-height:normal;width:985px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}
.menukhoiho ul{margin:0;padding:0}
.menukhoiho li{list-style:none;color:#b69786;float:left;display:inline;position:relative;margin:0;padding:0}
.menukhoiho li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqpaHBVG5SqsYybdLD6DGq_ceA1NIhCrmo9ha7-omdGQ3sDraJvnd1R32WzrwT6S4Rfet57RgiUToSm_b0-6G-Uy6buyADUFNSmJoMFaB1M30IWn3Dlr1dCqLpaz9a4iRB3iI07VPg40/s1600/11-06-2014+5-40-34+CH.png) repeat-x top;display:block;text-decoration:none;font-weight:700;color:#ccc;text-shadow:1px 1px 2px #111;outline:none;margin:10px 4px 8px;padding:8px 16px;border:1px solid #111}
.menukhoiho li a:hover{background:#333;-moz-box-shadow: inset 2px 2px 2px #151515;-webkit-box-shadow: inset 2px 2px 2px #151515;box-shadow: inset 2px 2px 2px #151515;}
.menukhoiho li a:hover,.menukhoiho ul li a:hover{color:#eee}
<!--abcd-->
<!--id for menu-->
</style>
<div class="menukhoiho-wrap">
<div class="menukhoiho">
<ul>
<li><a href="http://hongockhoi.blogspot.com/2014/06/mau-viet-bai-moi.html"> Post.Temp</a></li>
<li><a href="http://hongockhoi.blogspot.com/2013/04/mau-tieu-e.html"> Frame code</a></li>
<li><a href="http://hongockhoi.blogspot.com/2014/04/nhung-code-thong-dung-cho-blogspot.html"> Popular Code</a></li>
<li><a href="http://testtemplatekhoi.blogspot.com/2014/05/code-chen-chu-text-vao-anh-trong-blogger.html"> CSS Background</a></li>
<li><a href="http://testtemplatekhoi.blogspot.com/2014/05/remove-linkwithin-widget-completely.html"> Remove Linkwithin</a></li>
<li><a href="http://testtemplatekhoj.blogspot.com/p/html-editor.html"><blink>HTML Editor</blink>
<li><a href="http://hongockhoi.blogspot.com/2014/06/khung-chua-co-nen-en.html"><blink>Black Frame</blink></a></li>
</a></li>
</ul>
</div>
</div>
<!-- skip links for text browsers -->

4_Demo:

Code ↓ và

HTML

<style>
#topwrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihrz9VgrHXfTaL1Cs03X613_StCJu8eqMRJwx6pW_Nt4YDnkjIcxYlqJwsngFmtQkQkc7DQOxLYRA7px3V0uSRLyjCgGrjsLFr24p_57PhrkBQdP4t4S6XNKY7XbWgnWVo7j_waeqVU7C9/s1600/khoibg3.png) repeat-x top;
width:100%;
margin:0 auto;
padding:0 auto
}
#topnav {
width:960px;
height:56px;
margin:0 auto
}
#top {
width:100%
}
#top, #top ul {
list-style:none;
font-family:Trebuchet MS;
margin:0;
padding:0px
}
#top a {
display:block;
text-decoration:none;
font:normal 11px Arial;
text-transform:none;
color:#FFFFFF;
border-right:1px solid #ffffff;
border-left:1px solid #e3e4e4;
padding:10px 12px 16px
}
#top a.trigger {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdbZotvZl9S7X7OjHBqxxsDJTf72ohUYLR4MVv61VlvLNIZmEQqYd9e2KD5eRaz9MdypPB_4AQU0XBJU4CUc0G37RA9CZQ8LoKlSDCybkeEA8qZD5jbU8_R4VFFf2Mam6hRXJW9hlnhPD/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:10px 24px 16px 12px
}
#top li {
float:left;
position:static;
width:auto
}
#top li ul, #top ul li {
width:170px
}
#top ul li a {
text-align:left;
color:#666;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;
border:none;
padding:10px 10px
}
#top li ul {
z-index:100;
position:absolute;
display:none;
background:#222;
padding-bottom:0;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6);
filter:alpha(opacity=87);
-moz-opacity:.87;
opacity:.87
}
#top li:hover a, #top a:active, #top a:focus, #top li.hvr a {
background-color:#222;
color:#000
}
#top li:hover ul, #top li.hvr ul {
display:block
}
#top li:hover ul a, #top li.hvr ul a {
color:#aaa;
background-color:transparent;
text-decoration:none
}
#top li ul li.hr {
border-bottom:1px solid #444;
border-top:1px solid #000;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:0
}
#top ul a:hover {
background-color:#111!important;
color:#e3e4e4!important;
text-decoration:none
}
#top a span, #top a.arrow span {
font:bold 12px Trebuchet MS;
color:#FF9900;
display:block;
line-height:16px;
text-transform:uppercase
}
#top li:hover a span, #top li:hover a.arrow span {
color:#eaeaea
}
img.label_thumb {
float:left;
border:1px solid #4e4d4d;
background:#141414;
height:55px;
width:55px;
margin:0 5px 5px 0;
padding:5px
}
img.label_thumb:hover {
border:1px solid #4e4d4d;
background:#868686
}
.label_with_thumbs {
float:left;
width:100%;
min-height:auto;
margin:0 auto;
padding:0 auto
}
ul.label_with_thumbs li {
min-height:67px;
clear:both;
margin:0 0 5px;
padding:0 10px 5px 0
}
</style>
<div id="topwrapper">
<div id="topnav">
<ul id="top">
<li>
<a href="http://hongockhoimylife.blogspot.com/"> <span>Welcom</span> Trang chủ </a>
</li>
<li>
<a href="http://hongockhoimylife.blogspot.com/p/mot-chut-toi.html"> <span>Giới thiệu</span> Một chút Tôi </a>
</li>
<li>
<a href="http://hongockhoimylife.blogspot.com/p/hrefhttpwww.html"> <span>Contact</span> Me </a>
</li>
<li>
<a class="trigger" href="#"> <span>Chỉnh Sửa Ảnh</span> Online </a>
<ul>
<li>
<a href="http://apps.facebook.com/aviaryeditor/">Aviary Editor</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://apps.facebook.com/picmonkey/"> PicMonkey</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://www.scrapee.net/?sms_ss=embed">Srapee</a>
</li>
</ul>
</li>
<li>
<a href="http://www.bbc.com/"> <span>Đọc báo</span> BBC News </a>
</li>
<li>
<a href="#"> <span>Playlist </span> Quốc tế </a>
</li>
<li>
<a class="trigger" href="#"> <span>Chủđề Blg</span> Label </a>
<ul>
<li>
<a href="http://hongockhoimylife.blogspot.com/search/label/B%C3%A0i%20vi%E1%BA%BFt">Bài viết</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://hongockhoimylife.blogspot.com/search/label/H%C3%ACnh%20%E1%BA%A3nh">Hình ảnh</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://hongockhoimylife.blogspot.com/search/label/Gi%E1%BA%A3i%20tr%C3%AD">Giải trí,Âm nhạc</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Ảnh động</a>
</li>
</ul>
</li>
<li class="hr">
</li>
<li>
<a class="trigger" href="#"> <span>Myblog</span> Blog </a>
<ul>
<li>
<a href="http://nhakhoi.blogspot.com/">WESTERN</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://hongockhoi.blogspot.com/">ẢNH ĐẸP</a>
</li>
<li class="hr">
</li>
<li>
<a href="http://testtemplatekhoi.blogspot.com/?zx=5a93ac22bc4cbce0">TESTTEMPLATE </a>
</li>
</ul>
</li>
</ul>
<br class="clearit">
</div>
<div style="clear:both;">
</div>
</div>

5_MBT Menu

Dưới đây là một mẫu menu lạ mà drop menu chạy từ chân màn hình trượt lên mà mình trích từ Mybloggertricks.com
Bấm vào để xem:

Code ↓ và

HTML

 <style>
#secondary-Menu{
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg09gt9P5x2hB1Sm7Y5zxUK-iJDx7gl_pDyUT38dOo-rUPPaM_CWaSCrGitNSG1TDgz-L9bzahknpEwwInQahnj0BkiHOd-42juY1IuXpVHHMntn381mEpVHwmLiG8ykjRoSUtTxOaCgv8/s1600/Sub_menu_2.png)
   no-repeat scroll 0 0 transparent;
   width:1015px;
   height:128px;
   position:relative;
   left:0;margin:0 auto;
   padding:0 0 0 17px
  }
 #secondary-nav{
   margin:10px
   auto;padding:0
  }
 #secondary-nav ul{
   float:left;
   list-style:none;
   margin:5px auto;padding:0
  }
 #secondary-nav li{
   list-style:none;
   float:left;
   margin:5px 0 0;padding:0
  }
 #secondary-nav li a,
 #secondary-nav li a:link{
   color:#B8B8B8;
   display:block;
   font-size:12px;
   font-family:arial;
   font-weight:700;
   text-transform:none;
   text-decoration:none;
   text-shadow:1px 1px 3px #333;
   margin:0 0 0 20px;
   padding:10px 10px 17px 0
  }
 #secondary-nav li a:hover{
   color:#ddd;
   text-shadow:1px 2px 1px #000
  }
 #secondary-nav li ul{
   position:absolute;
   left:0;width:190px;z-index:99999;
   display:block;
   transition: opacity 0.5s,top 0.5s,left 0.5s;
   opacity:0;visibility:hidden;
   top:400%;margin:0;padding:0
  }
 #secondary-nav li:hover ul{
   top:47px;opacity:1;
   left:auto;visibility:visible
  }
 #secondary-nav li li{
   border-bottom:1px dotted #3B3D3E;
   background:#242729;
   width:190px;margin:0;padding:0
  }
 #secondary-nav li li:hover{
   background:#343637;
  -webkit-transition:all .1s ease-in-out;
  -moz-transition:all .1s ease-in-out;
  -ms-transition:all .1s ease-in-out;
  -o-transition:all .1s ease-in-out;
   transition:all .1s ease-in-out
  }
 #secondary-nav li li a{
   color:#B8B8B8;display:block;
   text-decoration:none;
   margin:0;padding:7px 0!important
  }
 #secondary-nav li li a:hover{
   color:#FFF;text-decoration:none
  }
 
 <!--the end css-->

 </style>

<div id="secondary-Menu">
<ul id="secondary-nav">
<li> <a href="http://services.mybloggertricks.com/">Services</a> </li>
<li> <a href="http://downloads.mybloggertricks.com/">Downloads</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/10/magazine-style-blogger-templates-free.html">Templates</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/12/blogger-help-for-general-off-topic.html">FAQ</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/06/something-about-me.html">About</a> </li>
<li> <a href="http://contact.mybloggertricks.com/">Contact</a> </li>
<li> <a href="http://www.mybloggertricks.com/p/advertise-here.html">Advertise</a> </li>
<li> <a href="https://www.blogger.com/null" style="cursor: pointer;">Tools »</a>
   <ul>
<li> <a href="http://ucut.it/" rel="nofollow">Password Protect URLs!</a> </li>
<li> <a href="http://editor.mybloggertricks.com/">HTML Editor</a> </li>
<li> <a href="http://tools.mybloggertricks.com/generator/sitemap.html">Multiple SITEMAP Generator</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/10/convert-special-html-characters-to.html">Encode HTML Characters</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/11/count-characters-in-post-titles-meta.html">Count Characters</a> </li>
<li> <a href="http://www.mybloggertricks.com/2010/06/meta-tag-generator-tool-for-blogger.html">Meta Tag Generator</a> </li>
<li> <a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html">Color Code Generator</a> </li>
<li> <a href="http://www.mybloggertricks.com/2009/10/embeddable-css-color-chart-table-for.html">Color Chart</a> </li>
</ul>
</li>
</ul>
</div>

6_ Thêm một mẫu menu đẹp :

Menu Bar Horizontal For Blogspot
Demo:

Home
Contact Us
Sport
Instruction to use
Entertainment
- Music
- Movie
- Television
Health
Drop Menu

Code ↓ và

HTML

<style>

#menuwrapperpic {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKUkQ5MD6MkoXcgINH1gnwaJ2fFRCO1x_dehPGPKgau5URjkrglJkmCnGy8mx-r-XJXikT8V25tQrEWNpb9kk3qxILnoX_vXZfalwipcofHCOO__Ofjk1ihZggG7mFoZriyDrehOJMmjs/s1600/menuwrap.png) repeat-x top;
border-top:5px solid #26231c;
border-bottom:5px solid #26231c;
width:100%;
margin:0 auto;
padding:0 auto;
height:37px
}
#menuwrapper {
width:980px;
height:37px;
margin:0 auto
}
.clearit {
clear:both;
height:0;
line-height:0.0;
font-size:0
}
#menubar {
width:100%
}
#menubar, #menubar ul {
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0
}
#menubar a {
display:block;
text-decoration:none;
font-size:12px;
font-weight:700;
text-transform:none;
color:#ddd;
padding:11px 12px 11px;
border-right:1px solid #6c6250;
border-left:1px solid #373123
}
#menubar a.trigger {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrBr7p1O83l81p0w5-7MdgLYYCUimawb7zxtQ0sJd_5IfRj9xKkoLQLgiIVu8lj8DCYJIZypV4XndZEftdriBJNhHs9B4jLBd8optZfdntdHAnX_9Sh200ousAWvwINqf0ku5sNBEvWc/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:right center;
padding:11px 24px 11px 12px
}
#menubar li {
float:left;
position:static;
width:auto
}
#menubar li ul, #menubar ul li {
width:170px
}
#menubar ul li a {
text-align:left;
color:#fff;
font-size:12px;
font-weight:400;
text-transform:none;
font-family:Arial;
border:none;
padding:5px 10px
}
#menubar li ul {
z-index:100;
position:absolute;
display:none;
background:#26231c;
-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6)
}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a {
background-color:#26231c;
color:#fff
}
#menubar li:hover ul, #menubar li.hvr ul {
display:block
}
#menubar li:hover ul a, #menubar li.hvr ul a {
color:#edfdfd;
background-color:transparent;
text-decoration:none
}
#menubar li ul li.hr {
border-bottom:1px solid #433e31;
border-top:1px solid #11100d;
display:block;
font-size:1px;
height:0;
line-height:0;
}
#menubar ul a:hover {
font-family: Arial;font-size: 12px;
background-color:#555!important;
color:#fff!important;
text-decoration:none
}
#search {
float:right;
width:180px;
height:20px;
margin-top:3px;
margin-right:5px
}
#search form {
float:left
}
#search input[type="text"] {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqiTEkKxf9Q_mMm1neJKIoIkFI80BEe2bjlYcArgFjlE2MOTCQtj0fMe7pK5SksJorf5FSBHCoVj_RnNG66YSbSXo645A8vrCt1vQDUtgivcqaLCQMsKsttwHAsI2IgzyL88K_1lNPH0/s1600/search_button.png) no-repeat scroll 4px center;
float:left;
border:1px solid #999;
width:146px;
margin-top:1px;
padding:3px 15px;
font-size:12px;
text-align:right
}
#search input[type="text"]:focus {
background:#fff
}
#search input[type="submit"] {
display:none
}
</style>
<div id="menuwrapperpic">
<div id="menuwrapper">
<ul id="menubar">
<li>
<a href="/"><img border="0" style="padding:0px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwn3pOt_88ww91ysi9SsFXOlf33nRviZ5B55Q8SBQl-1VzeeUWaXgdFmN3RUDlwHvrlbhHnNDTInqtFoohjPhhQGjsicFh_s4jDlYY8XNRrjG0mJTkn3tZQwnZr4NmIC4obt4V2pgK55F-/s1600/home_white.png"></a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#" class="trigger">Contact Us</a>
<ul>
<li>
<a href="#">Google +</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Contact on Facebook</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Contact on Twitter</a>
</li>
</ul>
</li>
<li>
<a href="#">Sport</a>
</li>
<li>
<a href="#">Instruction to use</a>
</li>
<li>
<a href="#" class="trigger">Entertainment</a>
<ul>
<li>
<a href="#">Music</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Movie</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Television</a>
</li>
</ul>
</li>
<li>
<a href="#">Health</a>
</li>
<li>
<a href="#" class="trigger">Drop Menu</a>
<ul>
<li>
<a href="#">Sub menu 1</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
<li class="hr">
</li>
<li>
<a href="#">Sub Menu 5</a>
</li>
</ul>
</li>
</ul>
<div style="text-align:right;">
<div class="menusearch">
<div style="float:right;padding:8px 0px 0 0;">
<form target="_blank" method="get" action="http://www.google.com/search">
<input value="Your URL" style="display:none;"
name="sitesearch">
<input type="text" value="Search..." style="width:220px;border:none;padding:4px 10px; font:normal 12px Arial;color:#7a7a7a; text-shadow: 1px 1px 1px #000; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghGlrnFPQpETv29Pq4kaPyoCBCu7r4JT9fx1wlC4-kOuXesTncI1fgGbAcxemzK1WhJf8YgtS1pYZXviQ0kmT8KXau0tRnFTeP2kPkW1skjZ1pGn15SSdFo6nbJCgPtZwGSsVFzkiP45M/s1600/field.gif) no-repeat;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="q" id="search-box">
<input type="image" align="top" value="Search" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghV2JE6Ycl4D5ohSceAxKjK9klQFiXgv-OEru40ME9QJ0ifQwb64lg0dEP7Ghfxja5TWp_8V8VGrxC0FRxT-jL7HdzukHENC9zCt7ayNOkGLHcHB-ECCitWLYa_Le1JtvRSNqGDhfqzYs/s1600/btn_search.gif" id="search-btn">
</form>
</div>
</div>
</div>
<!--end menu-search-->
<br class="clearit">
</div>
<div style="clear:both;">
</div>
</div>

Bạn có thể test thử trên Test Html Editor
Link to this page:

9 nhận xét:

Bạn có thể chèn trực tiếp một số thẻ HTML đưa vào comment như:
Chữ in đậm : Nội_dung_chữ_in_đậm 
Chữ in nghiêng : Nội_dung_chữ_in_nghiêng 
Chèn code : Nội_dung_code_đã_mã_hóa 
Chèn link liên kết : <a href = ' Link '> Tên_link </a>
Dùng link ảnh chèn trực tiếp vào comment
Don't spam link here. Pls

Mã Hóa

Unknownlúc 16:22 27 tháng 2, 2015
chèn mấy đoạn code này vào vị trí nào thế ạ?
Trả lờiXóa
Trả lời
Unknownlúc 13:23 18 tháng 5, 2016
sao sub menu của e nó không hiện http://hoang4rever.blogspot.com/
Trả lờiXóa
Trả lời
Nặc danhlúc 16:41 19 tháng 10, 2020
menu số 2 nhập vào blogspot thì nó không thể đổ xuống các list con được. không biết là mình đã làm sai bước nào nhỉ?
Trả lờiXóa
Trả lời

Thanks for following my blog

Tạo thanh menu ngang đẹp cho blog

Tạo thanh menu ngang cho blogspot

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

1_Demo

2_Dropdown Menu

3_Demo:

4_Demo:

5_MBT Menu

6_ Thêm một mẫu menu đẹp :

9 nhận xét:

Label

Popular Post

Live Traffic Feed

YOUR POSITION

Popular

Label

Tạo thanh menu ngang đẹp cho blog

Tạo thanh menu ngang cho blogspot

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

1_Demo

2_Dropdown Menu

3_Demo:

4_Demo:

5_MBT Menu

6_ Thêm một mẫu menu đẹp :

Bạn có thể xem thêm :

9 nhận xét:

Label

Popular Post

Live Traffic Feed

YOUR POSITION

Popular

Label