Bạn có thích 1 thanh menu đẹp để áp dụng cho thanh menu cố định khi cuộn trang lung thị linh hơn? ^_^ Ở đây mình sẽ chia sẻ cách làm menu xổ xuống (drop down) cơ bản nhất cho Blogspot. Sau khi hoàn thành bạn sẽ có 1 thanh menu ấn tượng!
Chú ý là tất cả hướng dẫn ở đây chỉ áp 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 thế nào để làm menu xổ xuống (Drop down)?
– Truy cập vào trang quản trị Blogger > Design (Thiết kế) > Page Elements (Bố cục)
Hãy chọn thêm HTML/JavaScript như ảnh trên, và paste đoạn code này vào:
<div id=’drnavbar’><ul id=’drnav’><li><a href=’#‘>Trang chủ</a></li><li><a href=’#‘>Chém gió</a></li><li><a href=’#‘>Liên hệ</a></li><li><a href=’#‘>Menu</a><ul><li><a href=’#‘>Menu 1</a></li><li><a href=’#‘>Menu 2</a></li><li><a href=’#‘>Menu 3</a></li></ul></li></ul></div>
Trong đó:
+ Những dấu # sẽ được thay bằng các đường dẫn đến các chủ đề mà các bạn muốn nó xuất hiện
+ Chữ màu xanh là nội dung hiển thị của các chủ đề
+ Thẻ <ul>…</ul> là thẻ 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 Menu, sẽ xổ xuống các Menu 1,2,3
Sau đó lưu lại đi!
– Giờ thì đến Design (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ẻ ]]></b:skin> và thêm đoạn CSS này lên trên nó:
/*—– Drop Down 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 thành phần trong thanh menu nhé, màu thế nào là tùy các bạn. Bạn có thể thay đổi 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 thành quả Nhưng nhớ là có không vừa ý thì cũng tự hiểu rằng đây chỉ là đoạn code cơ bản để làm menu 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!
Đến với Ula Spa bạn sẽ được chuyên viên trực tiếp soi khám và tư vấn những phác đồ điều trị riêng phù hợp với từng tình trạng và loại da. Cam kết điều trị đến khi dứt điểm. Sau khi điều trị xong khách hàng sẽ không mất thời gian nghỉ dưỡng.
Trả lờiXóaThẩm mỹ viện Ula Spa thật sự là một cơ sở hàng đầu điều trị mụn và bệnh lý trên da. Đây xứng đáng là địa chỉ để khách hàng có thể yên tâm đặt trọn niềm tin để điều trị. Ula Spa cam kết sau khi điều trị tại thẩm mỹ viện khách hàng sẽ lột xác hoàn toàn với một làn da mịn màng và hồng hào. Thẩm mỹ viện Ula “An toàn – Hiệu quả- Chất lượng”.
Nguồn: https://thammyvienula.vn/co-so-tri-mun-uy-tin-chat-luong-ho-chi-minh/
Nguồn: https://thammyvienula.vn/