Tạo menu dropdown 1 cấp đơn giản cho Blogger

By Luat Hoang → Wednesday, August 15, 2012

Menu thường được quan tâm trong thiết kế Blog vì nó có khả năng điều hướng rất tốt cho site của bạn. Vì thế hôm nay mình quay lại với những thủ thuật về Blogspot để hướng dẫn tạo một menu dropdown 1 cấp chỉ bằng CSS và HTML (những menu sau sẽ thay đổi style và nâng cao hơn). Đây là menu khá đơn giản nên bạn có thể dễ dàng chỉnh sửa cho phù hợp với từng Blog.
Đầu tiên bạn dán code bên dưới vào trước thẻ ]]></b:skin> trong template của bạn:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRHPzq3KqPMnoL1_ip6ninkGwUoimOcVD-8L8nyknHQE5-HpPfmdsNmkH4TjeOnQgaAq4riiSOx8JcWoqtKctlXIF-Bv6QiX6rP8yaQqMsP3AqMU8CJLw8Vy9u7Dteo8fjBJ4_EzSp9zxM/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuI7wgcX0csUaPkXy3gRg2sPui5DviNVx96F1mPh05VxKrG6aiLdZYS1IZBekpgkizC-jRu6cwS9PWLExxoHVa2dMLPfs3Hvb69rhpZaEhutNqVDoxQ_9TLz8Hivxxe30xgkAZqv4krYdT/s1600/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjXwHLvNXitzM1xS1aaw3iZE7xDr3K-qpYf9cB46q_aeZmoBkU2HhQrzUNWmYQ1HghfFNJhCWeFxNoDEnD2EKQFTEhpKthZqcQJUqOTDMUbuvCN8TpZ3ntCjFDOfImn-eXFauGGyARnqI/s1600/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5TAnGZQ2OmhxLjU7yFluo3_0fPlmnqP9xR_WpkYpdMq773Gyx1V4LfDDW3-l-UF61eGaXqRD2Z17IeRbgKfDBlhkgPJGECDkDIJwABcL_4agXEhzOXMib0jWoJiNirHRSXolTbBBd9c1U/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
Tiếp theo bạn chèn đoạn mã bên dưới vào trước <div id='outer-wrapper'> hoặc vào 1 tiện ích HTML/javascript:

<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
Vậy đã gần như hoàn tất, bây giờ bạn hãy chỉnh sửa lại liên kết cũng như CSS (nếu như biết) theo ý mình nhé!

21 comments to ''Tạo menu dropdown 1 cấp đơn giản cho Blogger"

ADD COMMENT
  1. bạn ơi, qua bên nhà mình bàn thêm về việc trao đổi link liên kết nhé. :))
    http://khongphaixoan.blogspot.com/p/trao-oi-link.html

    ReplyDelete
  2. =D=D Em tham gia rồi mà không biết được không nữa!
    Mà không hiểu lắm về cái này nhỉ! :-?

    ReplyDelete
  3. Ồ, lâu không ghé blog bác chơi, cái này hơi giống cái của mình nè :)

    ReplyDelete
    Replies
    1. Cái blog demo đẹp đó. =d>

      Delete
    2. Bác này! :-? Blog em không khen mà khen cái Demo b-(

      Delete
    3. Thì cả hai điều đẹp :).

      Delete
  4. Chèn code Club vào blog nữa à, nghe mà hết muốn tham gia... :-o
    Một phần vì cái blog hết chổ chèn, một phần là nặng [-(

    ReplyDelete
    Replies
    1. Em cũng không tham gia được. Chèn cái đó Blog nặng quá =d>

      Delete
    2. Thôi mình cứ tự sướng thôi :)

      Delete
    3. =D Thôi đành vậy! =d>=d>

      Delete
  5. Pác share cái drop menu có xài jquery của pác được không. Đang tìm mấy cái menu dạng zậy để ngồi ngâm đây.

    ReplyDelete
    Replies
    1. Nó giống jquery hả bác?
      Cái này dùng CSS3 bác à!

      Delete
  6. ad oi cho em hoi với : sao trang cua nguoi ta tren thanh tiêu đề thì đuôi của dòng link đều là HTML vidu http://luatpro.blogspot.com/2012/08/tao-menu-xo-doc-don-gian-cho-blogspot.html , còn trên trang của em đuôi toàn là label vidu :http://www.cachmangnhadat.com/search/label/QU%E1%BA%ACN%201 , em mới chơi blog còn gà lắm nên mong ad chỉ giúp em với , em cam on ad nhìu ,

    ReplyDelete
    Replies
    1. Sao bạn lai so sánh trang bài viết và trang label được. Trang bài viết của ban thì cũng có đuôi như trang mình thôi. Trang label đó là trang để gom những bài viết thuộc cùng 1 label lại với nhau thôi.

      Delete
  7. Cám ơn bài viết này của bạn :) rất hữu ích với mình ^^

    ReplyDelete
    Replies
    1. Mình rất vui khi nó có ích với bạn :)

      Delete
  8. Tạo Flat Tabbled Menu Cho Website

    http://vnminhtriet.blogspot.com/2015/03/tao-flat-tabbled-menu-cho-website.html

    ReplyDelete
  9. http://thegioigiaitrigame.blogspot.com/

    ReplyDelete

- Không nói chuyện thô tục thiếu văn hóa,...
- Không spam. Còn lại thì chém gió thoải mái hết! :D
@ Có thể chèn ẢnhVideo Youtube bằng cách paste link trực tiếp