☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> ..menu{ border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; font-weight:bold; } .menu ul{ background:#333333; height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPbAliKSrPAFLr8duRPsM8BMdoLzQ6bCgVQkVBCAzfXCmBDIc1R96yh3YhrNMh_uTpbgrY0qlL1-CERBK2zhJuoKh8BT_iCczlpd_MJBBMjdHFJA209taZDLpFma3fq1eFNxDCuD5DYiT/h120/seperator-namkna-blogspot.gif") bottom right no-repeat; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjydr5hYhQJ0MdCPyQz8IfR-3o9LdkHWhAHWncnwZ-H9gmJgzM4nMVhZoRYnf7K-aDnAqFTCBTi5WPY4Uke6zqfURhSPu6EMYkYIo6SUwD13X_Gh9VpqEGzobm4ZJfNYqFUvl71k7R4Fz0y/h120/hover-namkna-blogspot.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Bty76pPru9i3XJ5V3WuGcbnyC974qTaAr0JBMNsSeBRxsV9p3tHwTBXrrq8u4MCXCU5BZulTtYT0Y0O9sx5IFtGyg2j7pRsN_bvfAoz-wgURleBd8wRQH_doJfwmJt4jU6LMJEScZWr3/h120/sub_sep-namkna-blogspot.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfTbNUpcmVZVRIK7okP3e4ODVouiYgAp3wZw5HcE1AQltDhJqR7SCivDLy3UwUPAvyOnYUhg939uPWd6aU69Kt30vF2-dOvGY5nVbfJ_iVSAUZsYr-nFvcMAezlGFnKpbb3PGt_kJeaid/h120/hover_sub-namkna-blogspot.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; }
6- Click chọn Lưu mẫu
7- Thêm đoạn code bên dưới vào trước thẻ </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="menu"> <ul> <li><a href="/" >Home</a></li> <li><a href="#" id="current">Products</a> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul> </li> <li><a href="#">FAQ</a> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div>
- Trong đó:
8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện ích HTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:
- Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
- Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
- Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
- Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
Chúc thành công!
Nhận xét
Cái này sao mình chèn vào thêm 1 HTML/Javarscrip không được nhỉ, phải chèn vào trên thẻ header nó mới chụi :). Bạn có tài liệu về làm giao diện cho Blogspot không? share cho mình được không, có j gởi vào địa chỉ mail này levanluan.dm@gmail.com jum` mình nhé :).
Trả lờiXóa@Vĩnh Lợi Dàn Giáo Bạn xác định ID của wiget chứa tiện ích sau đó vào Thiết Kế (Mẫu) - Chỉnh sửa HTML (Không cần chọn mở rộng tiện ích mẫu) sau đó tìm Wiget chứa ID có dạng như sau (ví dụ là Widget HTML2):
Trả lờiXóa<b:widget id='HTML2' locked='false' title='Liên kết' type='HTML'/>
Sau đó cut và dán nó vào sau Widget chứa header như sau:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header' locked='true' title='six million namkna templte (Tiêu đề)' type='Header'/>
<b:widget id='HTML2' locked='false' title='Liên kết' type='HTML'/>
</b:section>
- Lưu mẫu lại là Ok.
Bạn có thể chỉ mình cách đọc cái HTML của thằng Blooger được không, mình muốn làm cái giao diện cho mình nhưng không biết bắt đầu từ đâu :)
Trả lờiXóa@Kemu Luận Hiện nay có rất nhiều người hướng dẫn cái này do vậy mình không hướng dãn lại. TUy nhiên bạn có thể tham khảo bài viết đó TẠI ĐÂY
Trả lờiXóaMình bị lỗi như thế này:
Trả lờiXóa- Nếu thêm 1 Widget HTML/Javarscrip vào vị trí ở trên mục bài đăng trên Blog (ngay bên dưới tiêu đề blog) thì drop menu bị dồn về 1 góc bên phải.
- Nếu thêm Widget HTML/Javarscrip vào vị trí cùng với vị trí của mục bài đăng trên Blog thì drop menu không hiện hết chiều dọc của trang.
Bạn có thể hướng dẫn để điều chỉnh lại thanh Menu Drop Down giúp mình được không?
P/S: Bạn có hướng dẫn là thêm đoạn code bên dưới vào trước thẻ . (nếu không thêm 1 HTML/Javarscrip). Nhưng trên Temp của mình không có thẻ này. Có phải nó đã bị lượt bỏ dẫn đến lỗi như trên hay không? Rất mong nhận được sự giúp đỡ của bạn.
Trang của mình http://www.tracuuphapluat.info
Anh hướng dẫn em làm cái menu này với, em muốn làm cái menu cho template magazine của mình nhưng áp dụng không được :4) :4) :4)
Trả lờiXóaLink bài http://hoctv.webchuyennghiep.net/dropdown-menu-d%E1%BA%B9p-b%E1%BA%B1ng-jquery-css-cho-thi%E1%BA%BFt-k%E1%BA%BF-website/
Em đã tải link ảnh về và thay vào rồi nhưng nó báo lỗi. Anh giúp em với nhé
@Minh Hùng Bạn hãy tạo một wiget dưới header (xem bài này]) và dán code đó vào là Ok.
Trả lờiXóa@Karl Carsten Em chèn theo ảnh bảo thì nó báo lỗi sao. Anh test vẫn tốt mà.
Trả lờiXóaCảm ơn sự hỗ trợ của bạn Nam Tạ rất nhiều!
Trả lờiXóaNhờ bạn mà nhóm TNX đã hoàn thành được menu ưng ý.
Mến chúc bạn mọi việc đều thuận lợi.
Thân! :)
Không có gì đâu rất vui vì đã giúp được nhóm các bạn.
Xóaanh Nam ơi đối với blog của em thì phải bỏ đoạn nào và thay thế đoạn nào để được menu như vầy vậy anh?
Trả lờiXóaanh xem giúp en nhé! Blog của em cám ơn anh trước nhé!
Em muốn chèn mới hay thay thế một menu có sẵn trong blog của em :)
Xóaem muốn thay thế cái menu của em bằng cái menu này ngay tại vị trí mak em đặt menu đó thì làm sao vậy anh?
XóaHiện tại em có 2 menu trong blog anh không biết cái trên hay dưới . em muốn thay menu nào thì chỉ cần thay menu đó thành code của menu này thôi ;)
XóaAnh ơi em tạo một widget có id=sidebar-right-1 trượt bên phai màng hình mà sài chrome lúc tải lại trang thì hay bị chạy bậy qua bên phải, còn sài ie, crom+ thì nó chạy tùm à a ơi. a xem giùm em code nó có bị lỗi gì không
Trả lờiXóaa có thể vào trang em để xem thử bằng ie http://webtruyendich.blogspot.com/
Em chèn nó nào để anh kiểm tra xem lỗi như thế nào nha e.
XóaEm chèn theo trang này nè http://sondaika.blogspot.com/2013/10/cach-tao-widget-truot-theo-blog-co-id.html#.U9j7kuN_tic
XóaTrang đó của em chưa áp dụng mà.
XóaÁc em cho máy cái widget chỗ khác thì không sao nhưng bỏ bên phài thì nó chạy bậy, chắc do code bên phải lỗi
Xóa