Tạo menu cho blogspot bằng widget pagelist

Đặc tính của template trong blogspot là nhét tất cả các thứ vào cùng một code nên mỗi lần thay đổi một cái, mà sơ sảy là đi tong. Đặc biệt với người không rành về code thì việc chỉnh sửa trong code template là cả một vấn đề. Chẳng lẽ mỗi lần muốn chỉnh cái menu của blogspot lại đè cái code ra mò mò vọc vọc. Tốt nhất là đưa nó ra layout để cho người không rành code (không muốn đụng code) có thể nhanh chóng và dễ dàng thay đổi menu theo ý mình.
Bạn có thể lợi dụng widget LinkList hoặc PageList để làm menu cho blogspot. Vì mình thích PageList hơn nên hôm nay sẽ giới thiệu mọi người cách đơn giản nhất để làm menu từ widget PageList.

Đầu tiên là phải tạo một phân dùng chứa widget PageList và PageList, như đoạn code bên dưới.
<b:section class='main-menu row' id='main-menu' maxwidgets='1' name='Main Menu' showaddelement='yes'>
    <b:widget id='PageList1' locked='true' title='Menu' type='PageList' version='1'>
</b:widget>
  </b:section> 
Bạn chỉ việc bỏ đoạn code này vào vị trí mà bạn ưng ý, còn mọi chuyện để google lo.

Sau khi tạo xong PageList như vậy thì bạn chỉ cần thêm vào những gì cần thiết cho menu là đã có một menu cơ bản (dĩ nhiên là phải tự làm CSS cho ra hình ra dáng). Nhưng lúc này menu của bạn nó chỉ có một cấp duy nhất mà thôi, nếu bạn muốn có sub-menu thì lại là vấn đề khác.

Bình thường Pagelist chỉ dùng để hiển thị danh sách các trang mà bạn đã đăng tải để người dùng có thể nhanh chóng truy cập tới trang đó, nên nó không phân cấp ra là main-menu hay sub-menu nên cần phải sử dụng đến javascript để làm việc đó.
$("#main-menu").each(function() {
for(var e = $(this).find(".PageList ul > li").children("a"), a = e.length, n = 0; n < a; n++) {
var t = e.eq(n),
r = t.text();
if("_" !== r.charAt(0))
if("_" === e.eq(n + 1).text().charAt(0)) {
var i = t.parent();
i.append('<ul class="sub-menu m-sub"/>')
}
"_" === r.charAt(0) && (t.text(r.replace("_", "")), t.parent().appendTo(i.children(".sub-menu")))
}
for(n = 0; n < a; n++) {
var c = e.eq(n),
u = c.text();
if("_" !== u.charAt(0))
if("_" === e.eq(n + 1).text().charAt(0)) {
var l = c.parent();
l.append('<ul class="sub-menu2 m-sub"/>')
}
"_" === u.charAt(0) && (c.text(u.replace("_", "")), c.parent().appendTo(l.children(".sub-menu2")))
}
$("#main-menu ul li ul").parent("li").addClass("has-sub")
}),
Bạn chỉ cần bỏ javascript này vào trước </body> thôi là nó đã giúp bạn tạo ra sub-menu cho bạn rồi.

Để có sub-menu thì khi add link bạn thêm vào trước Page title của bạn dấu gạch dưới ( _ ). Nếu thêm một cấp nữa thì cho 2 gạch dưới ( __ ). Sau cùng lưu widget của bạn lại là ok.

Việc còn lại của bạn là ngồi thêm CSS cho riêng mình để phù hợp giao diện website của bạn.

Đăng nhận xét

0 Nhận xét