humghn.com
Trong bài viết lần này , chuyên mục sẽ gửi đến các bạn cách tạo menu ngang trên blogspot . Với cách bố chí menu ngang như vậy , trang blog/website của bạn sẽ trở nên đẹp hơn , gọn gàng hơn và mang tính bao quát trực quan hơn .
Để thực hiện , các bạn làm theo những bước sau :
Bước 1 : Đăng nhập blogspot ; chọn mục " Bố cục " và tạo một HTML/JavaScript
Bước 2 : Có 2 kiểu menu ngang mà chuyên mục sẽ giới thiệu tới các bạn , các bạn có thể chọn mẫu nào tùy ý
Mẫu Số 1
DEMO
DEMO
Các bạn dán đoạn mã sau vào HTML/JavaScrip vừa tạo
<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#4AA02C url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://themeblogspot247.blogspot.com/'>Home</a></li>
<li><a href='#1'>Menu1</a></li>
<li><a href='#2'>Menu2</a></li>
<li><a href='#3'>Menu3</a></li>
<li><a href='#4'>Menu4</a></li>
<li><a href='#5'>Menu5</a></li>
<li><a href='#6'>Menu6</a></li>
<li><a href='#7'>menu7</a></li>
</ul>
</div>
Để thay đổi màu sắc cho phù hợp với blogspot của bạn , các bạn thay thế " # 222 " và " 4AA02C " thành các mã màu tùy chỉnh . Để biết mã màu tùy chỉnh , các bạn vào đây
" #8eda22 " là màu của menu khi rê chuột vào . Các bạn cũng hoàn toàn có thể thay thế bằng các màu sắc khác trong bang màu trên .
Câc mục #1 , #2 ... #7 các bạn thay lần lượt bằng các đường dẫn tới các menu tương ứng .
Mẫu Số 2
DEMO
Để thực hiện , các bạn chỉ cần thay thế đoạn code ở mẫu số 1 thành đoạn code sau :
+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào
Bảng trị số màu các bạn xem tại đây
Chúc các bạn thành công !
Mẫu Số 2
DEMO
Để thực hiện , các bạn chỉ cần thay thế đoạn code ở mẫu số 1 thành đoạn code sau :
<style>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}
ul#navlist li {
float: left;width: 60px;
height:24px;
}
ul#navlist li a {
text-decoration: none;width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;background: #003663;
display:block;
color:#fff;
}
ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;background:#004a80;
font-size:9pt;
font-weight:bold;
}
</style>
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Các bạn có thể thay đổi các thông số sau theo sở thích của bạn :+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột
+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường
+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.
+ background: #003663; : màu nền của menu lúc bình thường
+ background:#004a80; : màu nền của menu khi rê chuột vào
Bảng trị số màu các bạn xem tại đây
Chúc các bạn thành công !
