Thêm menu ngang cho Blogspot!

1. Đăng nhập vào blogger của bạn.
2. Chọn blog của bạn.
3. Chọn tùy chọn Bố cục (Layout.)
4. Trong bố cục blog của bạn bấm vào Thêm tiện ích
5. Bây giờ chọn HTML / JavaScript
6. Trong HTML / JavaScript dán đoạn mã sau và lưu lại

Mẫu 1:

Xem Demo:

• Home
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Home
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Link 6
• Link 7

Code mẫu 1

<style> #multicolor-bar { background: #222222; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #0099FF; height:35px; } #multicolor-nav { margin: 0; padding: 0; } #multicolor-nav ul { float: left; list-style: none; margin: 0; padding: 0; } #multicolor-nav li { list-style: none; margin: 0; padding: 0; } #multicolor-nav li a, #multicolor-nav li a:link, #multicolor-nav li a:visited { color: #FFF; display: block; font:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; } #multicolor-nav li a:hover, #multicolor-nav li a:active { background: #ee7d07; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 11px 12px; } #multicolor-nav li { float: left; padding: 0; } .color-1 { background:#0b5394; } .color-2 { background:#3d85c6; } .color-3 { background:#6fa8dc; } .color-4 { background:#990000; } .color-5 { background:#d6253a; } .color-6 { background:#e06666; } .color-7 { background:#274e13; } .color-8 { background:#38761d; } .color-9 { background:#6aa84f; } .color-10 { background:#93c47d; } .color-11 { background:#b45f06; } .color-12 { background:#e69138; } .color-13 { background:#f6b26b; } .color-14 { background:#741b47; } .color-15 { background:#a64d79; } .color-16 { background:#c27ba0; } </style> <div id='multicolor-bar'> <ul id='multicolor-nav'><li class="color-1"><a href='#'>Home</a></li><li class="color-2"><a href='#'>Link 2</a></li><li class="color-3"><a href='#'>Link 3</a></li><li class="color-4"><a href='#'>Link 4</a></li><li class="color-5"><a href='#'>Link 5</a></li><li class="color-6"><a href='#'>Link 6</a></li><li class="color-7"><a href='#'>Link 7</a></li><li class="color-8"><a href='#'>Home</a></li><li class="color-9"><a href='#'>Link 2</a></li><li class="color-10"><a href='#'>Link 3</a></li><li class="color-11"><a href='#'>Link 4</a></li><li class="color-12"><a href='#'>Link 5</a></li><li class="color-13"><a href='#'>Link 6</a></li><li class="color-14"><a href='#'>Link 7</a></li><li class="color-15"><a href='#'>Link 6</a></li><li class="color-16"><a href='#'>Link 7</a></li></div>

Mẫu 2:
Xem Demo:

• Home
• Dropdown 1 »
  • Link 1
  • Link 2
  • Link 3
  • Link 4
  • Link 5
  • Link 6
• Dropdown 2 »
  • Link 1
  • Link 2
  • Link 3
  • Link 4
• About us
• Contact us

Code mẫu 2

<style>#wcdropdown{ width:100%; height:40px; display:block; padding:0; margin:0 0 22px 0; background:#222222; box-shadow:2px 2px 5px #444444; -moz-box-box-shadow:2px 2px 5px #444444; -web-kit-box-shadow:2px 2px 5px #444444; -goog-ms-box-shadow:2px 2px 5px #444444; } #wcddmenu{ float:left; width:740px; height:45px; display:block; padding:0; margin:0; } #wcddmenu ul{ float:left; margin:0; padding:0; } #wcddmenu li{ float:left; list-style:none; line-height:40px; margin:0; padding:0 } #wcddmenu li a, #wcddmenu li a:link{ color:#dcdcdc; display:block; margin:0; padding:0 10px; text-decoration:none; } #wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a { color:#fff; padding:0 10px; background:#333333; } #wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{ font-size: 12px; background: #222222; color: #fff; width: 150px; margin: 0; padding: 0px 10px; line-height:30px; position: relative; border-bottom:1px solid #333333; } #wcddmenu li li a:hover, #wcddmenu li li a:active { background: #333333; color: #fff; } #wcddmenu li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0px; padding:0px } #wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{ left:auto } #wcddmenu li:hover, #wcddmenu li.sfhover{ position:static } </style> <div id='wcdropdown'> <div id='wcddmenu'> <ul><li><a href='data:blog.homepageUrl'>Home</a></li><li><a href='#'>Dropdown 1 »</a> <ul><li><a href='#'>Link 1</a></li><li><a href='#'>Link 2</a></li><li><a href='#'>Link 3</a></li><li><a href='#'>Link 4</a></li><li><a href='#'>Link 5</a></li><li><a href='#'>Link 6</a></li></ul></li><li><a href='#'>Dropdown 2 »</a> <ul><li><a href='#'>Link 1</a></li><li><a href='#'>Link 2</a></li><li><a href='#'>Link 3</a></li><li><a href='#'>Link 4</a></li></ul></li><li><a href='#'>About us</a> </li><li><a href='#'>Contact us</a> </li></ul></div></div><!-- dropdown navigation menu ends-->

Mẫu 3:
Xem Demo:

• Home
• Dropdown »
  • Link1
  • Link2
  • Link3
  • Link4
  • Link5
  • Link6
  • Link7
  • Link8
• Contact us

Code mẫu 3

<style>#navigation{ width:1000px; height:40px; display:block; padding:0; margin:0 0 22px 0; margin-left:auto; margin-right:auto; background: #45484d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ } #menu{ float:left; width:740px; height:40px; display:block; padding:0; margin:0; } #menu ul{ float:left; margin:0; padding:0; } #menu li{ float:left; list-style:none; line-height:40px; margin:0; padding:0 } #menu li a, #menu li a:link{ color:#fff; display:block; margin:0; padding:0 10px; text-decoration:none; font-family:verdana,arial; } #menu li a:hover, #menu li a:active, #menu .current_page_item a { color:#fff; padding:0 10px; background:#00bd39; border-radius:18px; } #menu li li a, #menu li li a:link, #menu li li a:visited{ background: #111111; color: #fff; width: 150px; margin: 0; padding: 0px 10px; line-height:30px; position: relative; border-bottxom:1px solid #00bd39; } #menu li li a:hover, #menu li li a:active { background:#00bd39; border-radius:0px; color: #fff; } #menu li ul{ z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0px; padding:0px } #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul{ left:auto } #menu li:hover, #menu li.sfhover{ position:static } /* === Search Form === */ #search { float:right; width:230px; padding:0px 0px ; margin:9px 10px 0px 0px; .margin:8px 10px 0px 0px; background:#fff; } #search form { margin: 0; padding: 0; } #search fieldset { margin: 0; padding: 0; border: none; } #search p { margin: 0; font-size:12px; } #s { width:180px; margin:0; padding:3px 5px; height:18px; color:#444; background:#fff; float:left; border:none; display:inline; } input#searchsubmit{ background:url('http://2.bp.blogspot.com/-hTiuEA1yMzQ/UTsummbkmMI/AAAAAAAABbs/CyyGd92XiVM/s1600/searchbu.png'); float:right; display:inline; margin:2px 5px 0px 0px; height:21px; width:22px; color:#fff; border:none; text-indent:-9999px; .font-size: 0; .display:block; .line-height: 0; } </style> <div id='navigation'><div id='menu'><ul><li><a href='#'> Home </a></li><li><a href='#'> Dropdown » </a><ul><li><a href='#'> Link1 </a></li><li><a href='#'> Link2 </a></li><li><a href='#'> Link3 </a></li><li><a href='#'> Link4 </a></li><li><a href='#'> Link5 </a></li><li><a href='#'> Link6 </a></li><li><a href='#'> Link7 </a></li><li><a href='#'> Link8 </a></li></ul></li><li><a href='#'> Contact us </a></li></ul></div><div id='search'><form action='http://www.windroidclub.com/search/' id='searchform' method='get'><input id='s' name='q' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/><input id='searchsubmit' type='submit' value='search'/></form></div></div><!--navigation menu with search ends-->