Opsoso Modern Blog – Giao diện Blogger mã nguồn mở dành cho người viết nội dung số

Quản trị viên in ,

Tôi là opsoso.net, một người lập trình template mã nguồn mở với niềm đam mê bất tận dành cho nền tảng Blogger. Trong suốt nhiều năm đồng hành cùng cộng đồng blog Việt Nam và quốc tế, tôi luôn trăn trở làm thế nào để tạo ra một giao diện vừa đẹp, vừa nhanh, lại dễ dàng tùy biến mà không đánh mất đi sự ổn định của hệ thống. Hôm nay, tôi hân hạnh giới thiệu đến các bạn Opsoso Modern Blog – phiên bản template mới nhất, được xây dựng từ những kinh nghiệm thực chiến và tinh thần “hiện đại hóa” trải nghiệm viết blog.

Chúng ta đang sống trong thời đại mà thiết kế phẳng (flat design), bo góc mềm mại và khả năng chuyển đổi giao diện sáng/tối đã trở thành tiêu chuẩn. Người đọc ngày nay không chỉ tìm kiếm thông tin, họ còn muốn một không gian đọc thư giãn, trực quan và thân thiện trên mọi thiết bị. Opsoso Modern Blog ra đời từ chính nhu cầu đó: kết hợp layout dạng thẻ (card) quen thuộc của các nền tảng như Facebook, Twitter với cấu trúc blog truyền thống, tạo nên một diện mạo vừa sang trọng, vừa gần gũi.

Tôi đã dành hơn ba tháng để hoàn thiện bản XML đầu tiên, với mục tiêu duy nhất: “Một template mã nguồn mở, miễn phí, nhưng không thua kém bất kỳ giao diện trả phí nào”. Bạn có thể trực tiếp trải nghiệm bản demo trong video mình đính kèm ở dưới – đó là nơi tôi thử nghiệm mọi tính năng và cũng là minh chứng sống động nhất cho những gì tôi sắp trình bày dưới đây.

Ngay từ dòng đầu tiên của <b:skin>, tôi đã định nghĩa một bảng màu CSS hoàn toàn dựa trên biến (variables). Toàn bộ giao diện sử dụng tông màu trung tính lấy cảm hứng từ Facebook: trắng tinh khôi cho chế độ sáng, xám than lịch lãm cho chế độ tối. Điểm đặc biệt là nút chuyển đổi theme được đặt ngay trên thanh điều hướng, tích hợp localStorage – nghĩa là lựa chọn của người đọc sẽ được ghi nhớ ngay cả khi họ tải lại trang hay quay lại sau nhiều ngày.

Màu chủ đạo #1877f2 xuất hiện ở khắp mọi nơi: đường gạch đầu dòng, link hover, badge, nút bấm… nhưng bạn hoàn toàn có thể đổi nó chỉ bằng một thao tác sửa biến --primary-color. Đây là cách tôi “mở” template để bất kỳ ai cũng có thể cá nhân hóa mà không cần động đến hàng trăm dòng CSS.

Opsoso Modern Blog sử dụng mô hình hai cột với sidebar cố định (sticky) ngay từ khi cuộn trang. Không cần plugin, không cần thủ thuật phức tạp – chỉ với position: sticky và một chút tính toán, sidebar luôn đồng hành cùng người đọc xuyên suốt bài viết.

Phần menu ngang được tôi thiết kế lại hoàn toàn so với các template gốc của Blogger. Thay vì những menu đơn điệu, tôi giới thiệu một cơ chế tạo menu con cực kỳ trực quan: bất kỳ mục nào có tiền tố dấu gạch dưới (_) trong tiêu đề LinkList sẽ tự động trở thành menu con của mục liền trước. Đoạn JavaScript nhỏ gọn phía cuối file sẽ đảm nhiệm việc tái cấu trúc DOM, biến một danh sách phẳng thành menu thả xuống chuyên nghiệp.

Ví dụ: bạn chỉ cần đặt tên “_Sản phẩm”, “_Dịch vụ” trong phần quản trị, template sẽ tự động nhóm chúng dưới mục “Chuyên mục”. Đây là ý tưởng mà tôi chưa thấy xuất hiện ở bất kỳ template mã nguồn mở nào khác.

Một trong những vấn đề nhức nhối nhất của Blogger là chất lượng ảnh thumbnail. Khi bạn tải ảnh gốc 1200px lên, Blogger vẫn có thể trả về phiên bản s72-c hay w400 – cực kỳ mờ và vỡ nét. Opsoso Modern Blog giải quyết triệt để điều này bằng một đoạn script xử lý ngay trong quá trình render danh sách bài viết theo nhãn.

Tôi sử dụng biểu thức chính quy (regex) để thay thế toàn bộ các tham số kích thước như /s72/, =w400 thành /s1200/ hay =s1200. Kết quả là ảnh hiển thị sắc nét trên cả màn hình Retina, giúp blog của bạn chuyên nghiệp hơn rất nhiều. Bên cạnh đó, thuộc tính image-rendering: crisp-edges và backface-visibility: hidden được thêm vào để tối ưu hiệu suất render, đặc biệt trên trình duyệt Webkit.

Thay vì bắt người dùng cài đặt các widget phức tạp, tôi tích hợp sẵn hai khung hiển thị bài viết theo nhãn ngay trên trang chủ. Bạn chỉ cần tạo một widget HTML, đặt tiêu đề và nhập tên nhãn vào phần nội dung. Template sẽ tự động gọi JSON-in-script từ Blogger, render ra grid 6 bài viết với ảnh đại diện, tiêu đề, mô tả và nút “Xem thêm”.

Phần này được tôi chú thích rất kỹ trong mã nguồn, bạn hoàn toàn có thể nhân bản để tạo thêm nhiều block chuyên mục khác. Tất cả đều dùng chung một hàm callback với ID động, tránh xung đột dữ liệu. Đây là minh chứng cho thấy Blogger vẫn là một nền tảng mạnh mẽ nếu biết cách khai thác.

Trong trang chi tiết, tôi đặc biệt chú trọng vào typography. Font chữ Inter được nhập khẩu từ Google Fonts với năm trọng số từ 400 đến 800, kết hợp với line-height: 1.8 và cỡ chữ 1.1rem giúp mắt không bị mỏi khi đọc các bài viết dài. Khoảng cách giữa các đoạn, hình ảnh và tiêu đề phụ được tính toán bằng đơn vị rem để đảm bảo tính nhất quán.

Phần chia sẻ mạng xã hội được bố trí ngay sau nội dung, với năm nút tròn màu sắc đặc trưng của từng nền tảng: Facebook, Twitter (X), LinkedIn, WhatsApp và Pinterest. Đường dẫn chia sẻ được tạo động bằng expr:href, đảm bảo mỗi bài viết đều có URL chính xác và tiêu đề đi kèm.

Sidebar của Opsoso Modern Blog không chỉ là nơi đặt danh mục. Tôi thiết kế một profile tác giả dạng ảnh đại diện bo tròn, có thể thay đổi dễ dàng qua widget Image. Bên dưới là menu chuyên mục dọc với hiệu ứng hover trượt nhẹ sang phải, kèm badge hiển thị số lượng bài viết.

Phần “Kết nối với tôi” sử dụng biểu tượng mạng xã hội với hiệu ứng nổi, và đặc biệt là danh sách liên hệ thông minh: khi bạn nhập “Email” làm tên liên kết, template tự động thêm tiền tố mailto:; khi nhập “Điện thoại” sẽ thêm tel:. Đây là chi tiết nhỏ nhưng thể hiện sự tỉ mỉ mà tôi luôn theo đuổi.

Phần chân trang được chia làm ba cột với giao diện lưới (grid) rõ ràng. Bạn có thể thêm bất kỳ widget nào vào các section footer-about, footer-link và footer-link2. Tôi đã đặt sẵn một widget HTML chứa các biểu tượng mạng xã hội và một widget LinkList mẫu để bạn dễ hình dung. Dòng bản quyền dưới cùng được cập nhật động theo năm hiện tại và tên blog.

Toàn bộ template không sử dụng thư viện jQuery hay bất kỳ framework CSS nặng nào. Mọi hiệu ứng đều được viết bằng CSS thuần và JavaScript thuần, giúp tốc độ tải trang đạt điểm số rất cao trên Google PageSpeed Insights. Tôi cũng tận dụng tối đa các thẻ <b:if> và <b:loop> của Blogger để giảm thiểu code thừa trong mỗi lần hiển thị.

Template tương thích với mọi phiên bản Blogger mới nhất, hỗ trợ đầy đủ các tính năng như comment form, phân trang, feed links, và đặc biệt là AdSense với các vị trí quảng cáo inline sẵn sàng. Bạn chỉ cần bật tính năng “kiếm tiền” trong tài khoản Blogger, mã AdSense sẽ tự động được chèn đúng chỗ.

Opsoso Modern Blog là món quà tôi gửi đến cộng đồng Blogger nhân dịp đầu năm 2026. Tôi tin rằng một nền tảng mã nguồn mở mạnh mẽ không chỉ đến từ kỹ thuật, mà còn từ sự chia sẻ và đóng góp của tất cả mọi người. Bạn có thể tải template miễn phí, tự do sửa đổi, thậm chí phân phối lại dưới tên thương hiệu của riêng mình – điều duy nhất tôi mong muốn là bạn giữ lại dòng credit “Thiết kế Opsoso.net” như một lời tri ân.

Trong tương lai, tôi dự định phát triển thêm các bản mở rộng như giao diện cho trang lưu trữ, trang tìm kiếm được thiết kế lại, và hỗ trợ nhiều định dạng schema.org hơn. Mọi đóng góp ý tưởng hoặc báo lỗi đều có thể gửi về email opsoso.net@gmail.com hoặc trực tiếp thông qua phần bình luận trên blog.

Hãy truy cập ngay để thấy tận mắt những gì tôi vừa trình bày. Tải template về, cài đặt và cảm nhận sự khác biệt. Tôi tin rằng sau vài phút trải nghiệm, bạn sẽ đồng ý rằng: một blog đẹp không nhất thiết phải đắt tiền, chỉ cần được xây dựng bằng tâm huyết và sự hiểu biết.

Xin chân thành cảm ơn các bạn – những người đã, đang và sẽ đồng hành cùng Opsoso.net trên hành trình làm chủ công nghệ.

[Bạn có thể tải tại đây]


Hướng dẫn sử dụng Template Opsoso Modern Blog dành cho Blogger

Xin chào, Đây là tài liệu hướng dẫn chi tiết, được viết dành riêng cho những ai muốn sở hữu một giao diện blog hiện đại, nhanh gọn và dễ dàng tùy biến mà không cần biết quá nhiều về mã nguồn.

Opsoso Modern Blog là template được xây dựng trên nền tảng Blogger phiên bản XML 2.0, sử dụng bố cục 2 cột với sidebar dính (sticky), thiết kế dạng thẻ (card) mềm mại lấy cảm hứng từ mạng xã hội hiện đại. Template hỗ trợ đầy đủ:

  • Giao diện thích ứng (responsive) trên mọi thiết bị.

  • Chế độ sáng/tối với nút chuyển đổi và lưu trạng thái.

  • Menu đa cấp tạo tự động chỉ bằng dấu gạch dưới (_).

  • Hiển thị bài viết theo nhãn mà không cần cài thêm plugin.

  • Tự động nâng chất lượng ảnh thumbnail lên độ phân giải cao.

  • Các widget thông minh: liên hệ tự động thêm mailto/tel, danh mục dọc hiệu ứng đẹp, tìm kiếm gọn gàng.

  • Hỗ trợ đầy đủ các thẻ meta SEO (OG, Twitter Card).

YÊU CẦU HỆ THỐNG

Template tương thích với tất cả blog sử dụng nền tảng Blogger mới nhất (giao diện chủ đề động, layout phiên bản 3+). Bạn chỉ cần một tài khoản Google, một blog đã được tạo và quyền truy cập vào mục Chủ đề (Theme). Template không yêu cầu bất kỳ plugin hay thư viện bên ngoài nào khác.

CÀI ĐẶT TEMPLATE

  1. Tải file XML: Nhấn vào đường dẫn tải template, file có tên opsoso_modernblog.xml.

  2. Vào trang quản trị Blogger → chọn blog của bạn → Chủ đề (Theme).

  3. Nhấn vào mũi tên xổ xuống cạnh nút Tùy chỉnh → chọn Sao lưu / Khôi phục.

  4. Trong hộp thoại hiện ra, nhấn Chọn tệp → chọn file opsoso_modernblog.xml → Tải lên.

Quá trình cài đặt diễn ra trong vài giây. Nếu blog bạn đã có dữ liệu, template sẽ tự động hiển thị lại toàn bộ bài viết, nhãn, trang tĩnh… mà không làm mất nội dung.

CẤU HÌNH CHUNG

Sau khi cài đặt, bạn nên thiết lập một số thông tin cơ bản:

  • Tiêu đề blog, mô tả ngắn: Vào Cài đặt → Cơ bản → Tiêu đề / Mô tả.

  • Favicon (biểu tượng trang): Tải lên tại Bố cục → Biểu tượng Favicon.

  • Ngôn ngữ, múi giờ: Cũng tại Cài đặt → Ngôn ngữ và định dạng.

  • Tối ưu SEO: Vào Cài đặt → Tùy chọn tìm kiếm → Thẻ meta robots, meta description tùy chỉnh theo nhu cầu.

TÙY CHỈNH HEADER VÀ MENU

1. Logo / Tiêu đề blog

Phần logo nằm ở widget Header1 trong section header-logo. Bạn có thể:

  • Chỉ dùng chữ: Widget mặc định hiển thị tiêu đề blog dạng text.

  • Dùng ảnh logo: Vào Bố cục, nhấn Chỉnh sửa widget Header1, tích chọn Thay vì dùng tiêu đề và mô tả, hãy dùng ảnh, tải ảnh lên.

  • Kích thước khuyên dùng: Chiều cao ảnh tối đa 40px, định dạng PNG/WEBP có nền trong suốt.

2. Menu chính (thanh menu ngang)

Menu được quản lý bởi widget LinkList1 trong section top-menu. Cách thêm/sửa mục menu:

  • Vào Bố cục → tìm widget Menu chính → nhấn Chỉnh sửa.

  • Thêm các liên kết theo cặp: Tên (hiển thị) và Địa chỉ (URL).

    • Ví dụ: Tên: Trang chủ, Địa chỉ: / (hoặc URL đầy đủ).

    • Tên: Tin tức, Địa chỉ: # (tạm thời) hoặc đường dẫn cụ thể.

3. Tạo menu con (dropdown) thông minh

Đây là tính năng đặc biệt của Opsoso Modern Blog. Bạn không cần kéo thả hay sử dụng HTML tùy chỉnh. Chỉ cần đặt tên menu con bắt đầu bằng dấu gạch dưới _.

Ví dụ: bạn muốn menu Chuyên mục có các mục con là Kỹ thuật và Đời sống.

  • Bước 1: Tạo mục chính tên Chuyên mục, địa chỉ bất kỳ (có thể để /).

  • Bước 2: Tạo hai mục tiếp theo, tên lần lượt là _Kỹ thuật và _Đời sống, địa chỉ tương ứng.

  • Bước 3: Lưu lại.

Template sẽ tự động ẩn dấu gạch dưới và gom các mục _... vào menu thả xuống dưới mục chính ngay trước nó. Bạn có thể tạo nhiều cấp? Ở phiên bản này chỉ hỗ trợ một cấp dropdown, tuy nhiên bạn có thể tạo nhiều nhóm menu con khác nhau cho các mục chính khác nhau.

TÙY CHỈNH SIDEBAR

Sidebar được thiết kế dính mượt mà, gồm 3 khu vực widget:

1. Tác giả / Logo sidebar (section sidebar-author)

Widget Image1 tạo khung ảnh đại diện bo tròn, kèm tiêu đề và chú thích.

  • Hình ảnh: Nên chọn ảnh vuông, tối thiểu 200x200px.

  • Tiêu đề: Tên tác giả / tên blog.

  • Chú thích: Dòng giới thiệu ngắn (hiển thị dưới tên).

2. Menu phụ – Danh mục chuyên mục (section sidebar-menu)

Widget Label1 hiển thị danh sách nhãn dưới dạng menu dọc với hiệu ứng hover trượt phải và số lượng bài viết kèm badge.

  • Cách hiển thị: Mặc định là danh sách (list). Bạn có thể đổi thành đám mây thẻ (cloud) trong phần chỉnh sửa widget, nhưng tôi khuyên dùng dạng list vì đẹp và dễ nhìn hơn.

  • Sắp xếp: Theo Alphabet (A→Z) hoặc theo số lượng bài viết (tùy chọn trong phần chỉnh sửa).

  • Hiện số lượng: Tích chọn Hiện số lượng bài viết cho mỗi nhãn.

3. Tìm kiếm & Liên hệ (section sidebar-extra)

Khu vực này chứa 3 widget:

  • BlogSearch1: Thanh tìm kiếm toàn blog. Bạn không cần chỉnh sửa gì thêm.

  • HTML1 – Kết nối với tôi: Các biểu tượng mạng xã hội (Facebook, Youtube, Instagram, TikTok). Để thay đổi liên kết, chỉnh sửa widget, sửa các đường dẫn # trong nội dung HTML. Nếu muốn thêm nền tảng khác, hãy sao chép dòng <a class='...'... và thay class/biểu tượng phù hợp (class fb tương ứng màu xanh, yt đỏ, ins hồng, tk đen).

  • LinkList2 – Liên hệ: Đây là widget thông minh. Bạn nhập tên là Email và Điện thoại, template tự động thêm tiền tố mailto: và tel: vào URL. Bạn cũng có thể thêm các liên kết khác, widget sẽ hiển thị kèm biểu tượng tương ứng.

Ví dụ: Thêm mục Zalo, URL https://zalo.me/123456. Template sẽ hiển thị biểu tượng liên kết chung.

TRANG CHỦ – BANNER VÀ BÀI VIẾT THEO NHÃN

1. Banner chính (hero-section)

Widget Image100 tạo một card lớn chứa ảnh nền và tiêu đề chồng lên ảnh.

  • Ảnh nền: Chọn ảnh có tỷ lệ ngang lớn, độ phân giải cao, chiều cao tự động co giãn theo tỷ lệ (khuyên dùng 1200x630 trở lên).

  • Tiêu đề: Xuất hiện trong khung trắng mờ phía dưới bên trái.

  • Chú thích: Hiển thị ngay dưới tiêu đề (có thể bỏ trống).

Bạn có thể ẩn banner này bằng cách xóa widget hoặc chuyển nó xuống vùng không hoạt động.

2. Hiển thị bài viết theo nhãn (Lĩnh vực 1, Lĩnh vực 2)

Đây là tính năng nổi bật nhất của template. Bạn có thể tạo nhiều block bài viết theo nhãn mà không cần cài thêm bất kỳ công cụ nào.

Cách thiết lập:

  • Vào Bố cục, tìm widget HTML5 (Lĩnh vực 2) hoặc HTML4 (Lĩnh vực 1).

  • Nhấn Chỉnh sửa.

  • Trường Tiêu đề: Nhập tên của block (ví dụ: "Công nghệ", "Du lịch"...).

  • Trường Nội dung: BẮT BUỘC nhập chính xác tên nhãn mà bạn muốn hiển thị. Lưu ý: tên nhãn phân biệt chữ hoa chữ thường, không có dấu cách thừa.

Ví dụ: Bạn có nhãn "Kinh nghiệm" – hãy gõ đúng Kinh nghiệm vào ô nội dung. Template sẽ tự động gọi 6 bài viết mới nhất thuộc nhãn đó và hiển thị dạng lưới.

Tùy chỉnh số lượng bài viết: Mặc định là 6. Để thay đổi, bạn cần chỉnh sửa file template (dành cho người có kinh nghiệm): tìm chuỗi max-results=6 trong hai widget HTML4 và HTML5, sửa số 6 thành số lượng mong muốn.

Xử lý ảnh mờ: Template đã tích hợp sẵn đoạn mã thay thế tham số kích thước ảnh từ s72, w400... thành s1200 (chất lượng cao). Bạn không cần làm gì thêm.

Nếu không có bài viết nào cho nhãn đó, toàn bộ block sẽ tự động ẩn, không gây lỗi hay khoảng trống xấu xí.

GIAO DIỆN TRANG BÀI VIẾT (SINGLE POST)

Khi click vào một bài viết, bạn sẽ thấy:

  • Tiêu đề lớn, font Inter bold 800.

  • Meta thông tin: Tác giả, ngày đăng, danh sách nhãn (click được).

  • Nội dung: Font chữ thoáng, dãn dòng 1.8, hình ảnh bo góc mềm.

  • Nút chia sẻ: 5 nút Facebook, Twitter (X), LinkedIn, WhatsApp, Pinterest. Liên kết chia sẻ tự động lấy URL và tiêu đề bài viết.

  • Phần bình luận: Sử dụng hệ thống bình luận mặc định của Blogger, bạn có thể bật/tắt tại Cài đặt → Bài đăng, nhận xét và chia sẻ.

Bạn có thể thay đổi màu sắc các nút chia sẻ hoặc thêm bớt nền tảng bằng cách sửa trong widget Blog1, includable shareButtons.

CHẾ ĐỘ SÁNG/TỐI (DARK MODE)

Template được xây dựng với biến CSS toàn cục, chuyển đổi chỉ với một nút bấm.

  • Nút hình mặt trăng/mặt trời nằm ở góc phải thanh điều hướng.

  • Khi người dùng nhấn, theme được lưu vào localStorage – lần sau truy cập tự động giữ đúng lựa chọn.

  • Nếu bạn muốn tùy chỉnh màu sắc chế độ sáng/tối, hãy vào phần <b:skin>, tìm khối :root (sáng) và [data-theme='dark'] (tối). Thay đổi các biến --primary-bg, --card-bg, --primary-color,... theo ý thích.

Ví dụ: Đổi màu xanh Facebook #1877f2 thành màu cam #ff5722, chỉ cần sửa giá trị của --primary-color.

FOOTER – CHÂN TRANG LINH HOẠT

Footer được chia làm 3 cột:

  1. Về chúng tôi (HTML2): Giới thiệu ngắn về blog, bạn có thể sửa nội dung trực tiếp trong widget.

  2. Khám phá (LinkList3): Các liên kết nội bộ như Trang chủ, Về chúng tôi, Chính sách bảo mật... Thêm/sửa như menu chính.

  3. Theo dõi chúng tôi (HTML3): Các biểu tượng mạng xã hội (tương tự sidebar). Hãy thay # bằng link thật.

Dòng bản quyền cuối cùng được tạo động: © 2026 + tên blog + "Thiết kế Opsoso.net". Bạn có thể thay đổi năm hoặc thông tin credit tại widget Text1 trong section footer-section. Nếu muốn giữ lại credit cho tôi thì thật tuyệt, nếu bạn muốn xóa, đó là quyền của bạn – template mã nguồn mở luôn tôn trọng người dùng.

CÁC VẤN ĐỀ THƯỜNG GẶP VÀ CÁCH KHẮC PHỤC

1. Menu con không hoạt động?

  • Kiểm tra xem các mục con có bắt đầu bằng dấu _ không, và chúng được đặt ngay sau mục cha (không xen kẽ mục thường).

  • JavaScript tạo menu chạy sau khi trang tải, nếu trình duyệt tắt JavaScript thì menu con không hoạt động. Hãy bảo đảm người dùng không dùng plugin chặn JS quá mức.

2. Ảnh đại diện sidebar không hiện?

  • Widget Image1 yêu cầu đường dẫn ảnh tuyệt đối. Nếu bạn copy link từ Google Photos, hãy đảm bảo định dạng đúng và ảnh ở chế độ công khai.

3. Block bài viết theo nhãn không hiện?

  • Kiểm tra chính xác tên nhãn (kể cả dấu cách). Tốt nhất copy tên nhãn từ trang Bài đăng → Nhãn.

  • Nếu blog có ít bài viết, bạn có thể thử với nhãn có nhiều hơn 1 bài.

  • Một số blog mới tạo chưa có feed ngay, hãy đợi vài phút hoặc đăng thử bài viết.

4. Sidebar không dính (sticky) trên mobile?

  • Trên màn hình nhỏ hơn 900px, template tự động chuyển sidebar xuống dưới cùng và bỏ chế độ dính để trải nghiệm đọc tốt hơn. Đây là hành vi có chủ đích.

5. Tôi muốn thay đổi kích thước ảnh thumbnail mặc định?

  • Trong widget HTML4/HTML5, tìm dòng img = img.replace(...) sửa s1200 thành kích thước mong muốn (ví dụ s800).

  • Lưu ý: sử dụng kích thước quá lớn có thể làm chậm tốc độ tải trang.

TỐI ƯU HIỆU SUẤT VÀ SEO

Opsoso Modern Blog được viết bằng CSS thuần, không jQuery, tổng dung lượng dưới 50KB. Tuy nhiên, bạn có thể tối ưu thêm:

  • Nén ảnh: Sử dụng ảnh WEBP, nén qua TinyPNG trước khi tải lên.

  • Giảm số lượng bài viết hiển thị: Mặc định trang chủ hiển thị 10 bài, bạn có thể giảm xuống 5-7 tại Cài đặt → Bài đăng, nhận xét và chia sẻ → Hiển thị tối đa.

  • Lazy load ảnh: Blogger đã hỗ trợ lazy load tự động, template không can thiệp nên yên tâm.

Về SEO:
Template đã tích hợp sẵn thẻ meta cho từng loại trang:

  • Trang chủ: lấy tiêu đề, mô tả từ Cài đặt → Mô tả meta.

  • Trang bài viết: lấy tiêu đề bài viết, mô tả lấy từ snippet hoặc mô tả meta riêng nếu có.

  • Open Graph và Twitter Card đầy đủ: ảnh đại diện mặc định là ảnh từ bài viết hoặc ảnh dự phòng.

Bạn có thể kiểm tra thẻ meta bằng công cụ Facebook Sharing Debugger hoặc Twitter Card Validator.

Opsoso Modern Blog là sản phẩm tôi tâm huyết với mong muốn mang đến một lựa chọn template miễn phí, chất lượng cao cho cộng đồng Blogger Việt Nam. Tôi đã cố gắng làm cho nó dễ sử dụng nhất có thể, nhưng nếu bạn gặp bất kỳ khó khăn nào, đừng ngần ngại liên hệ với tôi qua:

  • Trang này: Phần bình luận

  • Email: opsoso.net@gmail.com

Bạn cũng có thể tự do chỉnh sửa template, học hỏi từ mã nguồn và phát triển thêm các tính năng khác. Hãy nhớ rằng đây là mã nguồn mở, sự sáng tạo của bạn là không giới hạn.

Cảm ơn bạn đã chọn Opsoso Modern Blog. Chúc bạn có những trải nghiệm tuyệt vời với ngôi nhà mới của mình!


Ngày 13 tháng 2 năm 2026