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/AVvXsEg3_fnymDf9mkb5sXqUOH-CN6SSqFeFqCF39BSXEZN3EdVrUjscBPa9bPTMvIF9q5UNA_TJqH5Q6bQFBGqfe0msP6Qb5QCjxpIbZOO_XFcwD6ScaI66opvilyek8G5vLcMBDJCjRL6XDRE/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/AVvXsEjWH5e3E1QTW-XHQ1YICyL-u7r73RyF-tCuKNUWft5q4ZG-YTc2nro1JeikvBMTotCH3aEc09VIx8KK3NZ-V9Gir4aa7mrcrpvDQo72e-l-eIlJcd6u5xzAy7Hmk4gIRPztCp1obyfpKI0/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/AVvXsEjhLK6Mu7e-AiGDmiGokRxEYsP1sHzirlqys934Zo1z9NBkKAEkgVnXoJVVZv5TLMKeL7w8MRiBpehGHc8bxKYRwUdJVf9hWrBisx1SSk2tBmiIQ24aQMw3tKIx1mrubq6pts4vVaKKLeM/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/AVvXsEgLCRWuAyX058xFdQ49tW5r58uE1E3PYZJwC2Q0abrj8-0zWRZ54wH_i9nEzORyhUYZk_OnsDoE24Wev25h-QLRg79QJ9R3qI-ex0PEDbifya9PER-N2OkMp7HNThGFfqJIxzOrgai8dgw/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/AVvXsEhIEeG7g6bz-A5HZ4nNsRDaz_fcHa2Qp8c9BTfbMjpVNaVUTcJcP7mIek-bWp8jdesNx0LeoToaHqWXTUBD01w-VILBWmaTzFyMdqfH43w63NA8nYyFy7ZdbDws30oBbQfsTVULghr_4H5F/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/AVvXsEhTVzesyeqyC-ez6IIFL_sR44csxaDX_3Rem8qYjQzFHYDFlb-p_6s8JN943L_gAz2HXyXP-2MXlbwd8FZNbh72s6uTE_JEuuQX9s-F5TqIyYI5K9jYV50j0gNHPmCFHjpJQStAjgzSECg/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/AVvXsEhIEeG7g6bz-A5HZ4nNsRDaz_fcHa2Qp8c9BTfbMjpVNaVUTcJcP7mIek-bWp8jdesNx0LeoToaHqWXTUBD01w-VILBWmaTzFyMdqfH43w63NA8nYyFy7ZdbDws30oBbQfsTVULghr_4H5F/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/AVvXsEh0b5Kbt5H89Jn7F8oMhn78Af_1glHdTC68vPKhkacY7POwvxiOx7URV20jJxNVog4LgcP_7_CBuB6t4fKoITR0dRKh_I9bSYB63PQc4q4p73lLn9XIk1wdXVRmNAT3Q44tQEW_n_iQ8seP/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_

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/AVvXsEhfZfbQcXExxySaGaVcU710YrHH0xKfKXaW70QILWkl02cg1ykERkT5Oe-sy3jCefZJX9NQoD1lM-hK-w02aRCOD40DfjhznpErd7-wtgZA5J_2ett9AXYpEwItoLL-iaeYoK6uePaiA5g/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/AVvXsEi4VixLC36MioNyI2-ODjEtmTB5T0N0MI6wWnAPvfHB-19Hhjf9ElwrBJodBlCDcO6X573reahs4MrFLeMyWPyMwGz7dgFbY3DwPt8rUuqtSgdjnA8thtW3PHysebOPZUJAZlnk2UU1puk/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/AVvXsEie3OZgoI8Cl-F3nZ-i_ZQZjvtkXGor6qZEubALyr3E8hMc_KvoLYPfAvgvAxCr7jPrYG0q9VCxFibEcGZXxLyBNYHAMhnCToaNyo4lnlSFCusPUQyz02V0SbKkU9tezjN_qmsXul9MgSM/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/AVvXsEjvSuf2x2zSWUwXh7sZE4jWNjeqPXbmSWu3nvcwJM0IGIf5bH0qlwTgR9aYTpKraJSX-prKiRH17q2RkHdA-q-ZHHqSsHDJNFQneOvXjvA0HKmZQkLXMYeRc7PbfGwut36KA6elPcu-UQY/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/AVvXsEjjvcnHL4Oiz7ysNFSGWNbmMEXj_vodmUa0hDnJV28smH9QZ9Kw0vKVtHxFhhjMhYMgv-KQ9oEZa1OO4TG-ENYLx0lRtfrogsDC8s8FKxDjhgLMuWZZJGC3E9LwLRTMBuBRmlqgTh8sALuX/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/AVvXsEiXzk7BA_TFVR0vBEDueDBfPVEwYT0dwTk3pAR56cLUoFZ2VvbjGq7wvJHmFhbh5GSbg42WOsYeq6JCOSLCutHaYn_OT1U8sD9jCo0Il01FKzt6AaYQW0hN5MgfeYQXFrOkfGx6QwQWg_k/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/AVvXsEhMQoli6NmhXIeXGJJcv_GAAXEG80IHEaSwN-R9P-Wk0PN0i1hQrqklOgwd7Ajgiy3NLDgHnoLv41wjHO_-CxDYwKcgR5ZfpUvH1UCFUZj755gPf-BlXF7wpOuepXWK4GDI0Q2WJFsRrRg/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:

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_

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

About Testtem

0 nhận xét:

Đăng nhận xét

Submit

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_

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

About Testtem

RELATED POSTS

0 nhận xét:

Đăng nhận xét