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.
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!
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ã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
+ 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
– tìm kiếm đến thẻ ]]> và thêm đoạn CSS này lên trên nó:
/*—– Drop tải về menu —-*/#drnavbarbackground: #060505;width: 960px;color: #FFF;margin: 0px;padding: 0;position: relative;border-top:0px solid #960100;height:35px;#drnavmargin: 0;padding: 0;#drnav ulfloat: left;list-style: none;margin: 0;padding: 0;#drnav lilist-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:visitedcolor: #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:activebackground: #BF0100;color: #FFF;display: block;text-decoration: none;margin: 0;padding: 9px 12px 10px 12px;#drnav lifloat: left;padding: 0;#drnav li ulz-index: 9999;position: absolute;left: -999em;height: auto;width: 160px;margin: 0;padding: 0;#drnav li ul awidth: 140px;#drnav li ul ulmargin: -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 ulleft: -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 ulleft: auto;#drnav li:hover, #drnav li.sfhoverposition: static;#drnav li li a, #drnav li li a:link, #drnav li li a:visitedbackground: #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:activebackground: #060505;color: #FFF;display: block; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;
Cuối cùng là lưu template lại và tận hưởng kết quả 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/