Cách Tạo Menu drop down cho blogger không cần Javascript

Với người dùng Blogger không được hỗ trợ Menu Drop Down có sẵn như với mã nguồn WordPress, do đó bài viết này sẽ giúp bạn tự tạo thủ công cho Blogger. Do vậy bạn cần biết 1 chút về CSS và HTML để làm.

Tuy nhiên, Dạng Menu thả xuống giúp gộp các đối tượng, phân loại, liên kết các nội dung giúp tiếp cận người dùng hiệu quả. Mặt khác nó giúp cho giao diện Website, Blog gọn và trông Clear, bớt rối hơn. Đặc biệt nếu Blog của bạn có nhiều thông tin, nhiều chuyên mục, bạn có thể làm theo tôi từng bước và Copy các dòng lệnh tôi đưa ra.

Menu thả xuống này được làm hoàn toàn bằng CSS3 và HTML, không dùng Javascript do đó sẽ đảm bảo load nhẹ nhàng cho Blog của bạn. Bạn có thể xem demo của nó ở đây. Để bắt đầu, bạn cần vào phần chỉnh sửa Layout của Blogger và thêm một đoạn HTML vào phần Header.

<ul id="icbabdrop">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Bạn cần thay đổi các ký tự # bằng đường link đến các mục tương ứng trong Menu của bạn. Đường link này có thể về các Label hay link bài viết,…

Các mục có trong Menu mẫu như Lifestyle, Blogging,… hãy thay bằng từng mục mong muốn cho Blog của bạn.

Bạn dễ dàng tùy biến Menu Drop Down của mình bằng cách thêm các phần <li> tiếp theo vào đoạn code trên.

<li>
    Topics
    <ul>
      <li><a href="#">Lifestyle</a></li>
      <li><a href="#">Blogging</a></li>
      <li><a href="#">Art and Design</a></li>
    </ul>
  </li>

Xong phần 1 tạo mã HTML cho Menu. Tiếp theo bạn cần CSS lại cho Menu.

Trong giao diện quản lý Blogger. Bạn chọn Template (Mẫu) > Tùy chỉnh > Chọn tiếp Nâng cao (Advanced) > Kéo xuống dưới cùng chọn Thêm CSS.

Sau đó bạn thêm đoạn CSS sau vào ô Thêm CSS tùy chỉnh. Nếu am hiểu chút về CSS bạn có thể chỉnh sửa thêm để có được Menu theo ý muốn.

/* DROPDOWN MENU */
.tabs-inner .widget ul#icbabdrop {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#icbabdrop li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
  padding:0;
  font-family: sans-serif; /* Font for the menu links */
  border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#icbabdrop li ul {
  z-index:1000;
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
  background: #555; /* background colour of the sub menu items */
  display: block;
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Như vậy là xong Menu Drop Down cho Blogger của bạn không dùng Javascript. Nếu bạn muốn thêm vào vị trí bất kỳ thì có thể mở phần chỉnh sửa HTML và thêm đoạn Code HTML ở đầu bài viết vào.

Chúc bạn thành công.