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.

  • Blogger
  • May 6, 2016
  • 0 comment
  • 82 views

Recent posts

OnePlus 13 có thể ‘vượt mặt’ Google và Samsung nhờ viên pin khổng lồ

OnePlus 13 có thể ‘vượt mặt’ Google và Samsung nhờ viên pin khổng lồ

OnePlus 13 sắp ra mắt vào cuối tháng 10 được trang bị viên pin dung lượng lớn, sạc nhanh 100W. […]

Những hình ảnh không nên lưu trên điện thoại

Những hình ảnh không nên lưu trên điện thoại

Có một số chuyên gia cảnh báo rằng, dù cho điện thoại di động của bạn có dung lượng lớn, […]

iPhone 16 Pro gặp vấn đề về màn hình khiến người dùng khó chịu

iPhone 16 Pro gặp vấn đề về màn hình khiến người dùng khó chịu

iPhone 16 Pro đã bắt đầu đến tay những người mua đầu tiên vào thứ Sáu tuần trước và những […]

Hơn 11 triệu thiết bị Android nhiễm phần mềm độc hại từ Wuata Camera trong Google Play

Hơn 11 triệu thiết bị Android nhiễm phần mềm độc hại từ Wuata Camera trong Google Play

Những ứng dụng này đã thu hút hơn 11 triệu lượt tải xuống. Người dùng cần nhanh chóng gỡ bỏ […]

Google Chrome sẽ dịch các trang web phức tạp theo thời gian thực

Google Chrome sẽ dịch các trang web phức tạp theo thời gian thực

Google đang thử nghiệm một API mới sử dụng các mô hình học máy để trình duyệt Chrome dịch thuật […]

© 2021 Tạp Chí CNTT. Mr Hoang