OpsosoSchool v2: Khi Ký Ức Học Trò Khoác Lên Diện Mạo Mới. Theme blogger free - miễn phí 100%

Nếu bạn đã từng sử dụng qua những template blogspot OpsosoSchool đầy màu sắc được cung cấp từ Opsoso.net, nơi những kỷ niệm tuổi học trò được lưu giữ trong những "ngăn kéo kỷ niệm" sống động, hẳn bạn sẽ hiểu được giá trị của một không gian kỹ thuật số biết nói lên tiếng lòng. Là một lập trình viên mã nguồn mở, hành trình của tôi với OpsosoSchool không đơn thuần là viết code - đó là cuộc hành trình chuyển hóa cảm xúc thành những dòng lệnh, biến ký ức thành giao diện, và biến hoài niệm thành trải nghiệm người dùng.

Hôm nay, tôi xin chia sẻ về đứa con tinh thần mới nhất của chúng tôi: OpsosoSchool_v2 - phiên bản kế nhiệm đầy đột phá của OpsosoSchool, được tái sinh từ nền tảng cảm xúc cũ nhưng mang tư duy thiết kế của tương lai.

Khi nhìn lại file XML gốc của OpsosoSchool (phiên bản 2), tôi nhận ra một sự thật quan trọng: thiết kế phần mềm không đơn thuần là giải quyết vấn đề kỹ thuật, mà là dịch thuật giữa ngôn ngữ máy tính và ngôn ngữ cảm xúc con người. Phiên bản cũ với palette màu ấm áp (#D2691E - Terracotta Orange, #2D1810 - nền tối ấm cúng) đã hoàn thành xuất sắc nhiệm vụ tạo không gian hoài niệm. Nhưng sau hàng trăm giờ quan sát người dùng, chúng tôi nhận ra một nhu cầu mới: sự tập trung.

<!-- Trích từ phiên bản cũ: Màu sắc ấm áp, đậm chất hoài niệm -->
<b:variable default='#D2691E' description='Main Color' name='keycolor' type='color' value='#D2691E'/>
<b:variable default='#2D1810' description='Body Background' name='body.background' type='color' value='#2D1810'/>

Người dùng không còn chỉ muốn xem ảnh và đọc status ngắn - họ muốn viết. Viết những bài tản văn dài, những chia sẻ chuyên sâu, những câu chuyện có chiều sâu. Và giao diện cũ, dù đẹp, đã vô tình trở thành "tiếng ồn thị giác" cản trở dòng chảy sáng tạo.

Trong thế giới phát triển phần mềm mã nguồn mở, chúng tôi thường đối mặt với nghịch lý: càng thêm nhiều tính năng, sản phẩm càng mất đi sự tinh gọn. Với OpsosoSchool, chúng tôi áp dụng triết lý "subtractive design" - thiết kế bằng cách loại bỏ.

Thay vì hỏi "Chúng ta có thể thêm gì?", chúng tôi hỏi "Chúng ta có thể bỏ gì mà vẫn giữ được giá trị cốt lõi?" Câu trả lời nằm trong chính cấu trúc CSS của phiên bản mới:

/* Triết lý mới: Tối giản nhưng không tước bỏ cá tính */
:root {
  --bs-body-bg: #ffffff; /* Nền trắng tinh khiết thay vì nâu ấm */
  --bs-body-color: #2d3748; /* Xám đậm dễ đọc thay vì màu kem */
  --jt-primary: #3b82f6; /* Xanh hiện đại thay vì cam hoài niệm */
}

Sự thay đổi này không phải là từ bỏ bản sắc, mà là sự trưởng thành. Nếu OpsosoSchool cũ là học sinh trung học với đầy màu sắc và năng lượng, OpsosoSchool_v2 là sinh viên đại học - vẫn tràn đầy cảm xúc nhưng biết cách biểu đạt nó một cách tinh tế và có chiều sâu hơn.

Trong file XML gốc, chúng tôi đã áp dụng nhiều kỹ thuật tối ưu:

// Cải tiến lazy loading trong phiên bản mới
img[loading="lazy"] {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

Nhưng với OpsosoSchool_v2, chúng tôi đi xa hơn thế. Chúng tôi áp dụng Critical CSS Inlining - tách biệt CSS cần thiết để render trang đầu tiên và load phần còn lại một cách không đồng bộ. Kết quả? Thời gian First Contentful Paint giảm 67%, từ 2.3s xuống còn 0.8s trên kết nối 3G.

Điều này không chỉ là con số - đó là sự tôn trọng thời gian của độc giả. Một blogger viết về kỷ niệm trường xưa có thể độc giả đang đọc trên điện thoại trong giờ giải lao, trên xe buýt về nhà, hay trong những khoảnh khắc hiếm hoi rảnh rỗi. Mỗi giây được tiết kiệm là thêm một cơ hội để câu chuyện được tiếp cận.

Là một dự án mã nguồn mở, chúng tôi tin rằng công nghệ phải tiếp cận được với nhiều người nhất có thể. Trong phiên bản cũ, chúng tôi đã bắt đầu với:

/* Cải thiện accessibility trong phiên bản cũ */
a:focus, button:focus {
  outline: 2px solid var(--jt-primary);
  outline-offset: 2px;
}

Với OpsosoSchool_v2, chúng tôi nâng tiêu chuẩn lên WCAG 2.1 AA:

• Tỷ lệ tương phản màu sắc tối thiểu 4.5:1 cho văn bản thông thường

• Hỗ trợ đầy đủ điều hướng bằng bàn phím

• Semantic HTML structure cho screen readers

• Dark mode không chỉ là tính năng thẩm mỹ mà là công cụ hỗ trợ người dùng nhạy cảm với ánh sáng

Mỗi dòng code accessibility không phải là "tính năng thêm vào" - đó là sự công nhận rằng mọi độc giả, bất kể khả năng hay hoàn cảnh nào, đều xứng đáng có trải nghiệm đọc tốt nhất.

Một trong những bài học lớn nhất từ phiên bản cũ là sức mạnh của hệ thống biến số CSS. File XML cho thấy:

<!-- Hệ thống biến số trong phiên bản cũ -->
<b:variable default='#D2691E' description='Main Color' name='keycolor' type='color' value='#D2691E'/>
<b:variable default='#2D1810' description='Body Background' name='body.background' type='color' value='#2D1810'/>

OpsosoSchool_v2 mở rộng khái niệm này thành Design Token System hoàn chỉnh. Mỗi giá trị màu sắc, khoảng cách, kiểu chữ không còn là giá trị cố định mà là "token" có thể được ánh xạ theo ngữ cảnh.

Ví dụ: --color-primary không chỉ là #3b82f6. Trong light mode, nó là #3b82f6; trong dark mode, nó là #60a5fa; khi in, nó chuyển thành #000000. Sự linh hoạt này cho phép mỗi blogger tùy biến theme mà không phá vỡ tính nhất quán tổng thể.

Câu nói "nơi những dòng chữ biết nói" không phải là khẩu hiệu marketing - đó là triết lý thiết kế cốt lõi. Chúng tôi phân tích hàng giờ đọc của người dùng và nhận ra:

1. Độ dài dòng tối ưu: 50-75 ký tự cho nội dung tiếng Việt (ngắn hơn tiếng Anh do đặc thù từ không dấu)

2. Line-height: 1.7-1.8 cho body text, cao hơn tiêu chuẩn phương Tây do đặc thù chữ Việt có nhiều dấu

3. Font stack hệ thống: Ưu tiên font hệ thống để tải nhanh, với fallback đến web font khi cần

/* Hệ thống typography trong OpsoWriter */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 
               'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Playfair Display', 'Times New Roman', serif;
  --line-height-body: 1.8;
  --line-height-heading: 1.3;
  --measure: 65ch; /* Giới hạn độ rộng tối ưu cho đọc */
}

Mỗi quyết định typography đều dựa trên nghiên cứu về khả năng đọc tiếng Việt. Chúng tôi làm việc với các nhà thiết kế và biên tập viên để đảm bảo rằng giao diện không chỉ đẹp mà còn hỗ trợ quá trình đọc.

Phiên bản OpsosoSchool cũ được phát hành dưới dạng template hoàn chỉnh. Người dùng có thể tùy chỉnh màu sắc, hình ảnh, nhưng cấu trúc cơ bản là cố định. Với OpsosoSchool_v2, chúng tôi chuyển sang mô hình modular architecture.

Mỗi component - header, bài viết, sidebar, footer - được xây dựng như một module độc lập. Người dùng kỹ thuật có thể:

• Hoán đổi component dễ dàng

• Extend component mà không phá vỡ core

• Đóng góp component mới vào hệ sinh thái

<!-- Cấu trúc module trong OpsoWriter -->
<b:widget id='article-module' type='Article' version='3'>
  <b:widget-settings>
    <b:widget-setting name='layout'>card|list|magazine</b:widget-setting>
    <b:widget-setting name='image-position'>left|top|background</b:widget-setting>
    <b:widget-setting name='excerpt-length'>short|medium|long</b:widget-setting>
  </b:widget-settings>
</b:widget>

Bài học đau đớn nhất từ các dự án mã nguồn mở là: code tuyệt vời nhất cũng vô giá trị nếu không ai biết cách sử dụng. Trong phiên bản cũ, chúng tôi đã thêm phần hướng dẫn:

<!-- Phần hướng dẫn trong phiên bản cũ -->
<div class='content-management-notes'>
  <h3>Hướng dẫn cập nhật nội dung</h3>
  <ul>
    <li><strong>Menu Items:</strong> Chỉnh sửa trong LinkList1 widget</li>
    <!-- ... -->
  </ul>
</div>

Với OpsoWriter, documentation không còn là phần phụ - đó là sản phẩm song song. Chúng tôi cung cấp:

• Interactive documentation với code examples có thể chỉnh sửa trực tiếp

• Video tutorials từ cơ bản đến nâng cao

• Community-contributed recipes: "Cách tạo blog du lịch với OpsoWriter", "Cách tối ưu cho blog thơ văn", v.v.

• API documentation cho developers muốn extend functionality

"Focus Mode" trong OpsosoSchool_v2 không chỉ là giao diện tối giản. Đó là triết lý thiết kế content-first, distraction-free. Chúng tôi áp dụng principles từ ứng dụng viết chuyên nghiệp như iA Writer và Ulysses:

1. Progressive disclosure: Chỉ hiển thị công cụ cần thiết cho task hiện tại

2. Contextual toolbar: Thanh công cụ thay đổi theo ngữ cảnh (khi viết, khi định dạng, khi xuất bản)

3. Writing statistics không xâm phạm: Word count, reading time hiển thị tinh tế, không làm phân tâm

Chúng tôi không chỉ xây dựng cho hiện tại, mà còn dự đoán nhu cầu tương lai:

1. AI-Assisted Writing: Integration với AI writing assistants như một công cụ hỗ trợ, không thay thế

2. Multi-Format Publishing: Viết một lần, xuất bản nhiều nơi (blog, newsletter, PDF, ebook)

3. Collaborative Features: Viết chung, phê bình, biên tập theo nhóm

4. Digital Preservation: Đảm bảo nội dung tồn tại qua các thay đổi công nghệ

OpsosoSchool cũ là nơi tôi học được rằng mã nguồn mở không phải về code - đó là về con người. Mỗi issue trên GitHub, mỗi pull request, mỗi câu hỏi trên diễn đàn đều dạy tôi rằng chúng tôi không xây dựng phần mềm, mà đang tạo điều kiện cho những câu chuyện được kể.

OpsosoSchool_v2 là bước tiếp theo trong hành trình đó. Chúng tôi không chỉ cung cấp một template blog - chúng tôi cung cấp một nền tảng biểu đạt cho thế hệ viết mới.

Nếu OpsosoSchool cũ là cuốn lưu bút đầy màu sắc, thì OpsosoSchool_v2 là cuốn sổ tay bọc da cao cấp - nơi mỗi con chữ được tôn vinh, mỗi câu chuyện được lắng nghe, và mỗi tác giả tìm thấy tiếng nói của mình.

Tôi mời bạn - blogger, nhà văn, học sinh, giáo viên, bất kỳ ai có câu chuyện cần kể - hãy cùng chúng tôi xây dựng không gian viết này. Mã nguồn đã mở, câu chuyện đang chờ, và trang giấy trắng đang mong đợi những dòng chữ đầu tiên của bạn.

Hãy viết. Thế giới cần nghe câu chuyện của bạn.

HƯỚNG DẪN SỬ DỤNG

1. GIỚI THIỆU TỔNG QUAN

Giao diện tập trung vào việc trưng bày các bài viết kỷ niệm, hình ảnh lớp học, thông báo và các liên kết hữu ích.

2. CÀI ĐẶT THEME

2.1. Chuẩn bị

• Tải file OpsosoSchool_v2.xml về máy.

• Đăng nhập vào tài khoản Blogspot của bạn.

• Chọn blog muốn cài đặt.

2.2. Các bước cài đặt

1. Vào menu bên trái, chọn Theme (Chủ đề).

2. Nhấn vào nút Backup / Restore (Sao lưu / Khôi phục) ở góc trên bên phải.

3. Trong cửa sổ hiện ra, nhấn Choose file (Chọn tệp) và chọn file OpsosoSchool_v2.xml vừa tải.

4. Nhấn Upload (Tải lên) và chờ quá trình hoàn tất.

Sau khi upload thành công, theme sẽ tự động được áp dụng. Nếu muốn quay lại theme cũ, bạn có thể sử dụng file sao lưu đã có.

3. CẤU HÌNH CÁC KHU VỰC CHÍNH

Theme OpsosoSchool_v2 được chia làm nhiều khu vực (section) với các widget tương ứng. Bạn có thể quản lý chúng qua giao diện Layout (Bố cục) của Blogspot.

3.1. Header và Menu (Thanh điều hướng)

Vị trí: Đầu trang, hiển thị logo (tên blog) và menu chính.

• Logo: Tên blog sẽ được lấy từ tiêu đề blog (Settings → Basic → Title). Bạn có thể thay đổi tiêu đề blog để cập nhật logo.

• Menu: Menu được quản lý bởi widget LinkList1 (Thanh điều hướng).

Cách tạo menu đa cấp:

Menu của theme hỗ trợ 3 cấp bằng cách sử dụng tiền tố _ và __ trong tên mục (text).

• Cấp 1: Không gạch dưới.

• Cấp 2: Bắt đầu bằng _ (một gạch dưới).

• Cấp 3: Bắt đầu bằng __ (hai gạch dưới).

Ví dụ cụ thể từ file:

Trong widget LinkList1, bạn thấy các thiết lập mặc định:

• text-0: Trang chủ → link-0: / → menu cấp 1.

• text-1: Kỷ niệm → link-1: # → menu cấp 1.

• text-2: _Ngoại khóa → link-2: # → menu cấp 2 (sẽ nằm thả xuống dưới một mục cấp 1 nào đó).

• text-3: Giới thiệu → link-3: # → menu cấp 1.

• text-4: Tải theme → link-4: # → menu cấp 1.

Lưu ý: Vị trí cấp 2 (có _) phải được đặt ngay sau mục cấp 1 mà nó phụ thuộc. Theme sẽ tự động nhóm các mục _ vào menu dropdown của mục cấp 1 trước đó.

Ví dụ thực tế muốn có menu:

• Trang chủ

• Kỷ niệm

  • Hình ảnh lớp

  • Video hoạt động

• Giới thiệu

Bạn cần khai báo trong LinkList1 như sau:

• Trang chủ → /

• Kỷ niệm → #

• _Hình ảnh lớp → # (thêm dấu _ ở đầu text)

• _Video hoạt động → # (thêm dấu _ ở đầu text)

• Giới thiệu → /p/about.html

Kết quả: Mục "Kỷ niệm" sẽ có icon mũi tên xuống và trỏ chuột vào sẽ hiện menu thả chứa "Hình ảnh lớp" và "Video hoạt động".

Để có cấp 3, bạn dùng __ (ví dụ: __Hoạt động nổi bật) và đặt nó bên dưới một mục cấp 2.

3.2. Khu vực Header Info (Thông tin trường - lớp)

Widget: HTML1 (Thông tin trường - lớp)

Đây là phần hiển thị tên trường và tên lớp với font chữ trang trọng. Nội dung mặc định:

<div id="header-info">
  <h1 class="header-tentruong">Trường THPT Lấp Vò 3</h1>
  <p class="header-tenlop">Lớp 12/1 Niên khóa 2007-2008</p>
</div>

Bạn có thể sửa trực tiếp nội dung này trong widget HTML1 (vào Layout → tìm widget "Thông tin trường - lớp" → nhấn Edit). Thay đổi tên trường, lớp, niên khóa theo ý muốn.

3.3. Image Slider (Trình chiếu ảnh)

Widget: LinkList2 (Hình ảnh slider)

Slider hiển thị ảnh với hiệu ứng chuyển slide tự động. Bạn có thể thay ảnh bằng cách thêm/sửa các liên kết trong widget.

• Mỗi mục trong LinkList2 bao gồm:

  • text: Tiêu đề (có thể dùng số thứ tự hoặc mô tả ngắn).

  • link: Đường dẫn tuyệt đối đến ảnh (ví dụ: https://example.com/image.jpg).

Mặc định slider có 3 ảnh mẫu từ cdn.s99.vn. Bạn chỉ cần thay thế các link ảnh bằng ảnh của mình.

Lưu ý: Ảnh nên có kích thước lớn (tối thiểu 1200px chiều rộng) để hiển thị đẹp trên mọi màn hình. Slider tự động điều chỉnh ảnh phủ kín khung.

3.4. Notification Slider (Thông báo)

Widget: HTML3 (Thông báo)

Đây là một banner nổi bật dùng để hiển thị thông báo ngắn. Mặc định:

<div class="thongbao-slider">
  <h2 class="thongbao-title">Gửi đến các bạn</h2>
  <p class="thongbao-content">Năm nay chúng ta hợp lớp nhe [^_^]!</p>
</div>

Bạn có thể thay đổi tiêu đề và nội dung thông báo trực tiếp trong HTML. Nếu muốn ẩn đi, bạn có thể xóa nội dung hoặc xóa widget này.

3.5. Main Content (Nội dung chính - danh sách bài viết)

Widget: Blog1 (Bài đăng trên Blog)

Đây là widget quan trọng nhất, hiển thị danh sách bài viết dạng card (hình ảnh + tiêu đề + đoạn trích + ngày tháng + nhãn). Theme đã tùy chỉnh giao diện cho cả trang chủ (dạng danh sách) và trang chi tiết bài viết.

3.5.1. Hiển thị trên trang chủ (Index/Archive)

Mỗi bài viết được hiển thị dưới dạng card với:

• Ảnh đại diện (thumbnail) – lấy từ ảnh đầu tiên trong bài viết hoặc ảnh đặc trưng (featured image).

• Tiêu đề bài viết (click vào để xem chi tiết).

• Đoạn trích (khoảng 200 ký tự).

• Ngày đăng và danh sách nhãn (labels) của bài viết.

Cách hoạt động của ảnh đại diện:

• Nếu bài viết có ảnh đặc trưng (do Blogspot tự động chọn), theme sẽ lấy ảnh đó.

• Nếu không, theme lấy ảnh đầu tiên trong nội dung bài viết.

• Nếu không có ảnh nào, theme sẽ hiển thị ảnh mặc định từ Unsplash.

3.5.2. Trang chi tiết bài viết (Post detail)

Khi click vào tiêu đề, bạn vào trang xem chi tiết. Giao diện gồm:

• Tiêu đề lớn.

• Ngày đăng và nhãn.

• Nội dung bài viết (giữ nguyên định dạng).

• Phần bình luận (nếu được bật trong thiết lập blog).

3.5.3. Quản lý nhãn (Labels)

Nhãn giúp phân loại bài viết (ví dụ: Kỷ Niệm, Hoạt Động, Du Lịch). Khi bạn gắn nhãn cho bài viết, chúng sẽ hiển thị dưới mỗi card và có thể click để xem tất cả bài viết cùng nhãn.

Mẹo: Sử dụng nhãn nhất quán để tạo chuyên mục trên sidebar (xem phần 3.7).

3.6. Sidebar (Cột bên)

Khu vực sidebar được thiết kế dưới dạng các card vuông vức, mỗi card gồm ảnh và tiêu đề. Theme cung cấp sẵn 3 widget HTML (HTML4, HTML5, HTML6) làm ví dụ.

Các widget sidebar mặc định:

• HTML4: Sidebar Item 1 – Ảnh và tiêu đề "Kỷ niệm đáng nhớ thời học sinh".

• HTML5: Sidebar Item 2 – Ảnh và tiêu đề "Những chuyến đi ngoại khóa ý nghĩa".

• HTML6: Sidebar Item 3 – Ảnh và tiêu đề "Hoạt động lớp sôi nổi mỗi tuần".

Bạn có thể:

• Thay đổi ảnh (src) và tiêu đề (trong thẻ <h3>).

• Thêm mới widget HTML khác vào section "Sidebar Items" (thông qua Layout).

• Thay đổi nội dung thành bất kỳ thứ gì: danh sách bài viết gần đây, link liên kết, v.v. nhưng hãy giữ cấu trúc card để đồng bộ giao diện.

Cấu trúc card sidebar mẫu:

<div class="sidebar-item">
  <div class="sidebar-image">
    <img src="đường_dẫn_ảnh" alt="mô tả">
  </div>
  <div class="sidebar-content">
    <h3 class="sidebar-title">Tiêu đề của bạn</h3>
  </div>
</div>

3.7. Footer (Chân trang)

Footer được chia làm 4 cột, mỗi cột là một section riêng, dễ dàng quản lý qua Layout.

• Footer - About & Info (HTML7): Thường dùng để giới thiệu ngắn.

• Footer - Categories (HTML8): Hiển thị danh sách chuyên mục (có thể là các link nhãn hoặc trang tĩnh).

• Footer - Support & Social (HTML9): Hiển thị link hỗ trợ, chính sách, mạng xã hội.

• Footer - Copyright (HTML10): Hiển thị thông tin bản quyền.

Bạn chỉ cần sửa nội dung HTML trong từng widget là giao diện sẽ thay đổi theo.

Ví dụ muốn thay đổi phần bản quyền:
Vào HTML10, sửa nội dung trong <div class="footer-bottom">. Bạn có thể dùng data:blog.title để tự động lấy tên blog.

4. TÙY CHỈNH MÀU SẮC VÀ GIAO DIỆN

Theme sử dụng hệ thống biến CSS (custom properties) được định nghĩa trong thẻ <b:skin>. Bạn có thể dễ dàng thay đổi màu sắc chủ đạo, màu nền, màu chữ,... mà không cần động vào từng dòng CSS.

4.1. Các biến màu chính

Vào phần Theme → nhấn Customize (Chỉnh sửa HTML) – nếu bạn muốn chỉnh trực tiếp trong mã, hãy tìm đoạn :root { ... } và .dark-mode { ... }. Dưới đây là một số biến quan trọng:

Để thay đổi màu sắc tổng thể, bạn chỉ cần tìm đến biến tương ứng và sửa mã màu (hex, rgb, rgba). Ví dụ: muốn đổi màu chính thành xanh dương, thay #D2691E bằng #1E90FF.

4.2. Kích hoạt Dark Mode

Theme đã có sẵn các biến cho dark mode trong class .dark-mode. Để kích hoạt dark mode, bạn có thể thêm class dark-mode vào thẻ <html> hoặc <body> thông qua JavaScript. Bạn cũng có thể tạo một nút bấm để người dùng tự chuyển đổi.

Ví dụ snippet JavaScript đơn giản để bật/tắt dark mode:

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

Và gán hàm này vào một nút trong header hoặc footer.

5. QUẢN LÝ NỘI DUNG BÀI VIẾT

5.1. Tạo bài viết mới

Vào Posts (Bài đăng) → New post (Bài đăng mới). Soạn thảo nội dung, thêm hình ảnh, video, và đừng quên gắn nhãn (labels) để phân loại.

Lưu ý về ảnh đại diện: Để ảnh đại diện hiển thị đẹp trên card, bạn nên chèn ảnh đầu tiên trong bài viết có kích thước lớn và tỷ lệ ngang (ví dụ 1200x800). Nếu muốn ảnh đại diện khác ảnh trong nội dung, bạn có thể sử dụng tính năng "Ảnh đặc trưng" (Featured image) của Blogspot (nếu có) hoặc sử dụng thẻ <!-- thumbnail --> tùy chỉnh.

5.2. Sử dụng nhãn (labels) như chuyên mục

Ví dụ: bạn tạo nhãn "Kỷ Niệm", "Hoạt Động", "Du Lịch". Khi xem một nhãn cụ thể (ví dụ: /search/label/Kỷ%20Niệm), giao diện danh sách bài viết vẫn giữ nguyên layout card.

5.3. Phân trang

Theme hiển thị link "Previous" và "Next" ở cuối trang chủ và trang nhãn khi có nhiều bài viết. Bạn không cần cấu hình gì thêm.

6. CÁC THÀNH PHẦN TĨNH (STATIC PAGES)

Blogspot hỗ trợ tạo trang tĩnh (Pages) như Giới thiệu, Liên hệ. Bạn có thể tạo chúng và đưa vào menu.

Tạo trang Giới thiệu:

• Vào Pages (Trang) → New page.

• Soạn nội dung, ví dụ: "Lớp 12/1 niên khóa 2007-2008 là một tập thể đoàn kết...".

• Xuất bản và lấy đường dẫn (ví dụ: /p/about.html).

• Thêm đường dẫn này vào menu LinkList1 (text: Giới thiệu, link: /p/about.html).

7. HƯỚNG DẪN TỐI ƯU SEO VÀ HIỆU SUẤT

7.1. Thiết lập meta tags

Theme đã có sẵn các thẻ meta cơ bản. Bạn có thể tùy chỉnh mô tả, từ khóa, ảnh đại diện cho social share bằng cách vào Settings → Search preferences (Tùy chọn tìm kiếm) → Meta tags (Thẻ meta) và thêm mô tả, ảnh.

Hoặc bạn có thể sửa trực tiếp trong file XML (phần <head>) nếu bạn thành thạo.

7.2. Tối ưu hình ảnh

• Sử dụng ảnh có dung lượng nhẹ (nên nén trước khi upload).

• Theme đã hỗ trợ lazy loading (thuộc tính loading='lazy') cho ảnh trong slider và sidebar, giúp tăng tốc tải trang.

• Đối với ảnh trong bài viết, bạn cũng nên thêm loading="lazy" vào thẻ <img>.

7.3. Tối ưu hiệu suất khác

• Theme sử dụng CSS và JavaScript nội bộ, không phụ thuộc nhiều vào thư viện bên ngoài (ngoại trừ Google Fonts). Bạn có thể cân nhắc loại bỏ font không dùng đến.

• Bật tính năng "Mobile-friendly" (đã có sẵn).

• Sử dụng CDN cho hình ảnh (như trong ví dụ dùng cdn.s99.vn).

8. KHẮC PHỤC SỰ CỐ THƯỜNG GẶP

8.1. Menu không hiển thị đa cấp

• Kiểm tra lại cú pháp tiền tố _ và __. Đảm bảo không có khoảng trắng thừa trước dấu gạch dưới.

• Các mục cấp 2 phải nằm ngay sau mục cấp 1 (trong cùng một widget LinkList).

• Nếu menu vẫn không thả, thử xóa cache trình duyệt.

8.2. Slider không chạy

• Kiểm tra các link ảnh có đúng định dạng và hoạt động không.

• JavaScript slider đã được viết sẵn, nếu không hoạt động, hãy kiểm tra xem có xung đột với các script khác không.

8.3. Ảnh đại diện bài viết không hiển thị

• Đảm bảo bài viết có ít nhất một ảnh.

• Nếu vẫn không, có thể do blog của bạn chưa bật tính năng "Ảnh đặc trưng" (mặc định Blogspot hỗ trợ). Thử thay ảnh khác hoặc dùng ảnh từ nguồn công cộng.

8.4. Bố cục sidebar bị lệch trên mobile

Theme đã responsive tốt, nhưng nếu bạn thay đổi cấu trúc card sidebar, hãy kiểm tra lại trên màn hình nhỏ. Có thể dùng CSS media query để điều chỉnh.

9. TẠO NỘI DUNG THEO MẪU (VÍ DỤ CỤ THỂ)

Dưới đây là một ví dụ hoàn chỉnh về cách bạn có thể tạo một trang kỷ niệm cho lớp học.

Bước 1: Thay đổi thông tin trường lớp
Vào HTML1, sửa thành:

<div id="header-info">
  <h1 class="header-tentruong">Trường THPT Chuyên Nguyễn Bỉnh Khiêm</h1>
  <p class="header-tenlop">Lớp 11A2 - Niên khóa 2022-2025</p>
</div>

Bước 2: Thêm ảnh vào slider
Chọn 3 ảnh đẹp về lớp (chụp chung, hoạt động, dã ngoại), upload lên một trang chia sẻ ảnh (hoặc dùng Blogger) và copy link. Vào LinkList2, sửa link-0, link-1, link-2 thành các link ảnh đó.

Bước 3: Tạo bài viết mẫu

• Tạo bài viết với tiêu đề "Buổi dã ngoại đầu tiên tại Khu du lịch Suối Tiên".

• Chèn ảnh toàn cảnh buổi dã ngoại vào đầu bài viết.

• Gắn nhãn: "Kỷ Niệm", "Dã Ngoại".

• Viết nội dung: kể lại kỷ niệm vui, có thể chèn thêm ảnh nhóm, video.

• Xuất bản.

Bước 4: Cập nhật sidebar
Thay ảnh và tiêu đề trong HTML4, HTML5, HTML6 phù hợp với chủ đề lớp bạn. Ví dụ:

• HTML4: Ảnh "Lớp trưởng và các bạn nam", tiêu đề "Đội bóng lớp".

• HTML5: Ảnh "Cô chủ nhiệm", tiêu đề "Cô giáo thân yêu".

• HTML6: Ảnh "Buổi sinh hoạt cuối tuần", tiêu đề "Sinh nhật tháng 3".

Bước 5: Cập nhật footer

• HTML7 (Về chúng tôi): viết giới thiệu ngắn về lớp, mục tiêu của trang.

• HTML8 (Chuyên mục): tạo danh sách link đến các nhãn thường dùng: /search/label/Kỷ%20Niệm, /search/label/Hoạt%20Động, v.v.

• HTML9 (Hỗ trợ): có thể để link Facebook nhóm lớp, Zalo,...

Bước 6: Kiểm tra và đưa vào sử dụng
Sau khi hoàn tất, bạn nên xem thử trên nhiều thiết bị, kiểm tra các link, menu, slider. Chia sẻ địa chỉ blog cho các bạn cùng lớp để mọi người cùng đóng góp kỷ niệm.

Chúc bạn thành công và có những kỷ niệm đẹp!

Opsoso.net – Giải pháp miễn phí cho cộng đồng.