🧭 Bài 2: Tạo menu động + responsive sidebar cho Blogger
Tiếp nối Bài 1: khung theme tối thiểu. Hôm nay ta thêm menu động (thêm/sửa trong Layout) và sidebar responsive.
🎯 Mục tiêu
- Tạo Menu dùng
LinkList(thêm link trong Layout → Add a Gadget). - Thiết kế sidebar ẩn ở màn hình nhỏ, hiện ở màn hình lớn.
- Thêm nút Hamburger bật/tắt menu khi mobile.
1) Thêm CSS cho menu & sidebar (đặt vào <b:skin> trong theme)
Mẹo: Mở Theme → Edit HTML, tìm <b:skin>...</b:skin>, chèn thêm khối dưới bên trong CDATA.
/* ==== MENU TOP ==== */
.navbar{background:#0f172a;color:#fff;display:flex;align-items:center;gap:12px;padding:10px 14px;position:sticky;top:0;z-index:20}
.navbar .brand{font-weight:700;letter-spacing:.3px}
.navbar .toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:10px;cursor:pointer}
.navbar ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.navbar a{color:#fff;text-decoration:none;padding:8px 10px;border-radius:8px}
.navbar a:hover{background:rgba(255,255,255,.12)}
/* mobile: menu ẩn sau nút toggle */
@media (max-width: 768px){
.navbar ul{display:none;width:100%}
.navbar ul.open{display:flex;flex-direction:column;padding-top:8px}
}
/* ==== LAYOUT CHÍNH ==== */
main{display:grid;grid-template-columns:1fr;gap:18px;padding:16px}
@media (min-width: 992px){
main{grid-template-columns:1fr 300px}
}
.content,.sidebar{background:#ffffff;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
.sidebar .widget{margin-bottom:14px}
2) Thêm phần tử menu + sidebar vào Template
Trong Theme → Edit HTML, chèn các <b:section> bên dưới vào vị trí phù hợp (ví dụ ngay sau <body> và trong <main>). Hãy dán đúng như XML (không đổi dấu).
Navbar (menu động) — thêm ngay sau dấu
<body>:
<!-- NAVIGATION (LinkList để quản lý menu trong Layout) -->
<div class='navbar'>
<div class='brand'><data:blog.title/></div>
<div class='toggle' expr:onclick='"document.getElementById(\"navlinks\").classList.toggle(\"open\")"' aria-label='Toggle menu'>
☰
</div>
<ul id='navlinks'>
<b:section id='nav' class='navlinks' showaddelement='yes' maxwidgets='1'>
<b:widget id='LinkList1' type='LinkList' title='Menu' />
</b:section>
</ul>
</div>
Main + Sidebar — đặt trong phần thân trang (nếu theo Bài 1 bạn đã có
<main>, chỉ cần đảm bảo có 2 section dưới):
<main>
<b:section id='main' class='content' showaddelement='yes' maxwidgets='10'>
<b:widget id='Blog1' type='Blog' title='Bài đăng' locked='true'/>
</b:section>
<b:section id='sidebar' class='sidebar' showaddelement='yes' maxwidgets='20'>
<b:widget id='PopularPosts1' type='PopularPosts' title='Bài nổi bật'/>
<b:widget id='Labels1' type='Label' title='Chủ đề'/>
<b:widget id='Profile1' type='Profile' title='Tác giả'/>
</b:section>
</main>
3) Thêm/sửa menu trong Layout
- Vào Layout ▶ khu vực “Menu” bạn vừa tạo (LinkList).
- Nhấn Edit ▶ thêm các mục: Tên & URL.
- Kéo thả để sắp xếp thứ tự. Lưu lại.
✅ Kết quả
- Menu hiển thị link do bạn quản lý ở Layout.
- Mobile có nút ☰ để bật/tắt menu (không cần jQuery).
- Sidebar chuyển cột khi ≥ 992px, mobile thì xuống dưới nội dung.
4) Lỗi thường gặp & cách tránh
- SAXParse “&” entity: chỉ xảy ra khi bạn dán nội dung bài viết vào Theme. Hãy dán code trên vào Theme, còn content bài giảng thì đăng như bài viết.
- Trùng nhiều <b:skin>: Theme chỉ có 1 thẻ. Gộp CSS vào cùng CDATA cũ.
- Thiếu <b:section>: đảm bảo có
id='nav',id='main',id='sidebar'.
🚀 Bài 3 (sắp ra mắt): Tạo menu con (dropdown) + sticky sidebar + scroll-to-top.
📌 Danh sách bình luận