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>
/*—– 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;}
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!
