May 6, 2016

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
  • 168 lượt xem

Recent posts

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

TikTok thách thức công cụ tìm kiếm của Google

TikTok thách thức công cụ tìm kiếm của Google

TikTok đã trở thành công cụ tìm kiếm ngày càng phổ biến trong giới trẻ ở Mỹ. Một cuộc khảo […]

© 2021 Tạp Chí CNTT. Mr Hoang