• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020

ATPMedia Bởi ATPMedia
3 năm cách đây
Trong Cách thiết kế web
Trang chủ Cách thiết kế web

tạo menu xổ xuống trong blogspot là một trong những từ khóa được search nhiều nhất trên google về chủ đề tạo menu xổ xuống trong blogspot. Trong bài viết này, cachthietkeweb.vn sẽ viết bài Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020.

Tạo Menu Xổ Xuống Trong Blogspot

Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020

Bạn có like 1 thanh thực đơn xinh để áp dụng cho thanh menu cố định khi cuộn trang lung thị linh hơn? ^_^ Ở đây mình sẽ share phương pháp sử dụng menu xổ xuống (drop down) cơ bản nhất cho Blogspot. Sau khi hoàn thiện bạn sẽ có 1 thanh menu ấn tượng!

Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020

chú ý là all hướng dẫn ở đây chỉ ứng dụng cho những mẫu có sẵn khu vực navigation ở top, còn những mẫu template khác thì các bạn phải tùy biến nhiều hơn mới có kết quả!

làm sao để để làm menu xổ xuống (Drop down)?

– Truy cập vào trang quản trị Blogger > thiết kế (Thiết kế) > Page Elements (Bố cục)

Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020

– Hãy lựa chọn thêm HTML/JavaScript giống như hình trên, và paste đoạn code này vào:

#‘>Trang chủ
#‘>Chém gió
#‘>Liên hệ
#‘>thực đơn
  • #‘>thực đơn 1
  • #‘>thực đơn 2
  • #‘>thực đơn 3
Trong đó:
+ Những dấu # sẽ được thay bằng các đường dẫn đến các đề tài mà các bạn mong muốn nó xuất hiện
+ Chữ màu xanh là content hiển thị của các đề tài

+ Thẻ

  • …

là thẻ sử dụng để mở rộng tạo menu xổ xuống (drop down). như đoạn code trên thì khi trỏ chuột vào thực đơn, sẽ xổ xuống các menu 1,2,3

Sau đó lưu lại đi!
– Giờ thì đến thiết kế (Mẫu)> Edit HTML (Chỉnh sửa HTML)
– Giờ thì nên backup toàn bộ code trước khi chỉnh sửa nhé, để khi cần còn có thể phục hồi lại như cũ

– tìm kiếm đến thẻ ]]> và thêm đoạn CSS này lên trên nó:

/*—– Drop tải về menu —-*/
#drnavbar
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
#drnav
margin: 0;
padding: 0;
#drnav ul
float: left;
list-style: none;
margin: 0;
padding: 0;
#drnav li
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
#drnav li a, #drnav li a:link, #drnav li a:visited
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
#drnav li a:hover, #drnav li a:active
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
#drnav li
float: left;
padding: 0;
#drnav li ul
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
#drnav li ul a
width: 140px;
#drnav li ul ul
margin: -25px 0 0 161px;
#drnav li:hover ul ul, #drnav li:hover ul ul ul, #drnav li.sfhover ul ul, #drnav li.sfhover ul ul ul
left: -999em;
#drnav li:hover ul, #drnav li li:hover ul, #drnav li li li:hover ul, #drnav li.sfhover ul, #drnav li li.sfhover ul, #drnav li li li.sfhover ul
left: auto;
#drnav li:hover, #drnav li.sfhover
position: static;
#drnav li li a, #drnav li li a:link, #drnav li li a:visited
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
#drnav li li a:hover, #drnavli li a:active
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
Các đoạn CSS có #… là màu của các nguyên nhân trong thanh thực đơn nhé, màu thế nào là tùy các bạn. Bạn đủ nội lực refresh font chữ tại đoạn code màu xanh

Cuối cùng là lưu template lại và tận hưởng kết quả Hướng dẫn cách tạo menu xổ xuống trong blogspot mới nhất 2020 Nhưng nhớ là có k vừa ý thì cũng tự hiểu rằng đây chỉ là đoạn code cơ bản để làm thực đơn xổ xuống (Drop down) cho Blogspot thôi ^_^ Bạn phải tùy chỉnh một vài nội dung nữa nó mới hợp với trang web của bạn!

Nguồn: https://www.tranbadat.com/

Tags: chỉnh sửa menu trong blogspothướng dẫn tạo menu đa cấp trong blogspotmenu đa cấp cho blogspottạo menu đa cấp cho bloggertạo menu xổ xuống bằng csstạo menu xổ xuống trong blogspottạo menu xổ xuống trong exceltạo menu xổ xuống trong wordpresstạo sub menu trong blogspot
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Căn Chỉnh Vị Trí Trong Html

Hướng dẫn cách căn chỉnh vị trí trong html mới nhất 2020

Cách Thiết Kế Web

​Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.​

Chuyên mục

  • Xây Dựng Website
  • Bảo Mật Website
  • Dịch Vụ Chăm Sóc Website
  • Source Web
  • Tài Liệu Làm Web
  • Khai báo sitemap

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Top Vui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.