Opsoso Begin Blogger – Giao diện Blogspot hiện đại, tối ưu trải nghiệm người dùng

Quản trị viên in , ,

Trong thế giới blog ngày nay, việc sở hữu một giao diện đẹp mắt, thân thiện với người dùng và tối ưu cho cả máy tính lẫn thiết bị di động là yếu tố then chốt để giữ chân độc giả. Đây là một trong những bộ giao diện Blogger (Blogspot) được đầu tư kỹ lưỡng về mặt thiết kế, tính năng và khả năng tùy biến, hướng đến cộng đồng blogger Việt Nam cũng như quốc tế.

Opsoso_Begin_Blogger.xml là một template dành riêng cho nền tảng Blogger.com, được xây dựng dựa trên ngôn ngữ HTML5, CSS3 và JavaScript thuần túy, tích hợp sẵn các thẻ XML của Blogger (GML) để tương thích hoàn hảo với hệ thống quản lý nội dung của Google. Template này không chỉ đơn thuần là một lớp vỏ bên ngoài mà còn là một hệ sinh thái nhỏ với nhiều tiện ích được thiết kế sẵn, giúp người dùng tiết kiệm thời gian và công sức trong việc xây dựng blog.

Template được phát triển bởi đội ngũ Opsoso.net – một trang web chuyên cung cấp các giải pháp mã nguồn mở, công cụ trực tuyến và giao diện website miễn phí. Mục tiêu của Opsoso khi tạo ra template này là:

  • Cung cấp một giao diện hiện đại, sạch sẽ, thân thiện với mắt, giảm mỏi mắt khi đọc nội dung dài.
  • Tối ưu trải nghiệm trên mọi thiết bị nhờ thiết kế responsive hoàn toàn.
  • Hỗ trợ SEO cơ bản ngay từ đầu, giúp bài viết dễ dàng tiếp cận công cụ tìm kiếm.
  • Dễ dàng tùy biến mà không cần am hiểu sâu về mã nguồn.
  • Hoàn toàn miễn phí, phù hợp với cộng đồng blogger, đặc biệt là các blog cá nhân, blog công nghệ, blog chia sẻ kiến thức.

Template Opsoso Begin Blogger phù hợp với:

  • Blogger cá nhân muốn có một giao diện chuyên nghiệp nhưng không có ngân sách mua template trả phí.
  • Blog công nghệ, mã nguồn mở – bởi chính tên gọi và phong cách thiết kế của Opsoso.
  • Blog chia sẻ kiến thức, giáo dục với nhu cầu hiển thị nội dung rõ ràng, có cấu trúc.
  • Các blog ảnh, portfolio nhờ slider ảnh và grid bài viết bắt mắt.
  • Người mới bắt đầu với Blogger muốn có một template sẵn nhiều tính năng mà không cần code nhiều.

Template được tổ chức theo cấu trúc grid linh hoạt, sử dụng CSS Grid Layout hiện đại, cho phép sắp xếp các khu vực một cách khoa học.

Bố cục chính (Layout)

Bố cục của template bao gồm 5 khu vực chính:

1.      Header (Đầu trang) – Chứa logo và menu điều hướng.

2.      Main Top Section (Khu vực trên cùng của nội dung chính) – Dành cho các widget giới thiệu, slogan hoặc 3 ô chức năng nổi bật.

3.      Main (Nội dung chính) – Hiển thị các bài viết dạng grid hoặc nội dung bài viết chi tiết.

4.      Sidebar (Thanh bên) – Chứa các tiện ích như giới thiệu, bài viết phổ biến, danh mục chủ đề, chính sách bảo mật.

5.      Footer (Chân trang) – Hiển thị thông tin giới thiệu, liên kết và bản quyền.

Khi xem trên màn hình nhỏ hơn 768px (tablet, điện thoại), bố cục sẽ tự động chuyển sang 1 cột, đảm bảo nội dung vẫn dễ đọc và thao tác.

Header được thiết kế dạng sticky (dính trên cùng khi cuộn) và có tính năng auto-hide: khi người dùng cuộn xuống, header sẽ ẩn đi để tiết kiệm không gian; khi cuộn lên, header hiện trở lại. Điều này mang lại trải nghiệm đọc mượt mà, đặc biệt trên thiết bị di động.

Menu điều hướng đa cấp (Multilevel Dropdown)

Đây là một điểm nhấn quan trọng. Menu không chỉ hỗ trợ cấp 1 mà còn hỗ trợ cấp 2 (dropdown) và cấp 3 (sub-dropdown) thông qua cú pháp đặc biệt trong tiêu đề liên kết:

  • Sử dụng dấu _ (gạch dưới) ở đầu tên mục để tạo menu cấp 2.
  • Sử dụng dấu __ (hai gạch dưới) để tạo menu cấp 3.

Menu sẽ tự động phân tích cấu trúc nhờ đoạn JavaScript được nhúng sẵn, giúp tạo menu thả xuống mượt mà mà không cần plugin.

Nút chuyển đổi giao diện tối (Dark Mode)

Ngay trong thanh menu (cạnh các mục điều hướng), template tích hợp một nút bật/tắt dark mode. Trạng thái được lưu vào localStorage của trình duyệt, do đó khi người dùng quay lại, giao diện sẽ được duy trì theo lựa chọn trước đó.

Main Top Section – Khu vực tạo ấn tượng đầu tiên

Khu vực này nằm ngay sau header, trước nội dung bài viết, bao gồm tối đa 3 widget HTML do người dùng thêm vào. Trong bản mẫu, Opsoso đã cung cấp sẵn:

  • Widget HTML4: Hiển thị slogan với biểu tượng bông tuyết (fa-snowflake) và câu khẩu hiệu về mã nguồn mở.
  • Widget HTML5 (chỉ hiển thị trên trang chủ): Hiển thị 3 ô chức năng với hiệu ứng hover đẹp mắt, giới thiệu các lợi ích như "Tốc độ siêu tốc", "Bảo mật tối đa", "Dễ dàng tùy biến".

Các widget này được thiết kế dưới dạng card, có hiệu ứng nổi khi rê chuột, tạo sự sinh động cho trang chủ.

Slider ảnh tự động (LinkList1)

Một tính năng rất được yêu thích là slider ảnh toàn màn hình được xây dựng từ widget LinkList1. Cách hoạt động:

  • Người dùng thêm các liên kết vào widget LinkList, trong đó URL của liên kết chính là đường dẫn ảnh (hỗ trợ ảnh từ Blogger, Imgur, hoặc bất kỳ nguồn nào).
  • Template sẽ tự động chuyển đổi danh sách liên kết đó thành slider với nút điều hướng và tự động chuyển ảnh sau mỗi 4 giây.
  • Ảnh được hiển thị với tỷ lệ cover, chiều cao 350px (trên desktop) và 200px (trên mobile), phù hợp để làm banner hoặc ảnh nổi bật.

Điều đặc biệt: Nếu chỉ có 1 ảnh, slider sẽ ẩn các nút điều hướng để tránh gây nhầm lẫn.

Khu vực nội dung chính (Main)

Hiển thị bài viết dạng grid

Trên trang chủ, các bài viết được hiển thị dưới dạng lưới (grid), mỗi thẻ bài viết bao gồm:

  • Ảnh đại diện (featured image) – được resize tự động về kích thước 480px theo tỷ lệ 4:3.
  • Tiêu đề bài viết.
  • Đoạn trích dài 150 ký tự.
  • Ngày đăng.

Grid có số cột linh hoạt, tối thiểu 280px cho mỗi thẻ, giúp giao diện luôn cân đối trên mọi kích thước màn hình.

Hiển thị bài viết chi tiết (Single Post)

Khi vào một bài viết cụ thể, template sẽ hiển thị nội dung ở dạng full-width nhưng giới hạn chiều rộng tối đa 890px và căn giữa, giúp người đọc tập trung vào nội dung. Các ảnh trong bài được bo góc và đổ bóng nhẹ, tạo cảm giác chuyên nghiệp.

Phân trang (Pager)

Template có phân trang rõ ràng với các nút "Bài cũ hơn", "Bài mới hơn" và "Trang chủ". Các nút này cũng được thiết kế đồng nhất với phong cách chung.

Sidebar thông minh

Sidebar được trang bị sẵn một số widget quan trọng:

  • HTML100 – Giới thiệu: Hiển thị ảnh đại diện và mô tả ngắn.
  • LinkList2 – Chính sách bảo mật: Danh sách liên kết dạng cột.
  • PopularPosts1 – Bài viết phổ biến: Hiển thị 5 bài viết được xem nhiều nhất trong năm qua, kèm ảnh thu nhỏ.
  • Label1 – Chủ đề tiêu biểu: Hiển thị các nhãn (label) dưới dạng danh sách, giúp độc giả dễ dàng lọc bài viết theo chủ đề.

Các widget LinkList trong sidebar có hiệu ứng hover đặc biệt: khi rê chuột, liên kết sẽ trượt nhẹ sang phải và đổi màu nền.

Footer – Chân trang ấn tượng

Footer được chia làm 2 cột (trên desktop):

  • Cột trái: Widget Text1 hiển thị thông tin giới thiệu về Opsoso.net.
  • Cột phải: Widget LinkList3 hiển thị các liên kết trang.
  • Phía dưới cùng: Widget Text100 hiển thị bản quyền với năm hiện tại (tự động cập nhật) và liên kết về Opsoso.net.

Footer có thiết kế tối giản nhưng vẫn đầy đủ thông tin cần thiết, không gây rối mắt.

Tối ưu SEO cơ bản

Template đã tích hợp sẵn:

  • Thẻ meta description cho từng loại trang (trang chủ, bài viết, trang tĩnh).
  • Open Graph tags (og:title, og:description, og:image, og:url) để chia sẻ lên Facebook đẹp mắt.
  • Twitter Card dạng summary_large_image.
  • Schema.org BlogPosting cho bài viết.
  • BreadcrumbList dạng JSON-LD cho bài viết có nhãn, giúp Google hiểu cấu trúc trang.

Nhờ đó, blog của bạn có lợi thế ngay từ khi cài đặt mà không cần cài thêm plugin SEO.

Tải bài viết động theo nhãn (Dynamic Label Posts)

Một tính năng rất thông minh và ít thấy ở template miễn phí: tự động lấy và hiển thị bài viết theo nhãn thông qua các widget HTML1, HTML2, HTML3.

Cách hoạt động:

  • Người dùng chỉ cần nhập tên nhãn (label) vào nội dung của widget HTML.
  • JavaScript sẽ gọi API JSON của Blogger, lấy tối đa 3 bài viết mới nhất thuộc nhãn đó.
  • Hiển thị chúng dưới dạng danh sách ảnh + tiêu đề + đoạn trích.

Điều này cực kỳ hữu ích để tạo các chuyên mục con hoặc hiển thị bài viết liên quan mà không cần tạo nhiều trang con phức tạp.

Hiệu ứng xuất hiện khi cuộn (Scroll Reveal)

Template có sẵn class .reveal-on-scroll và JavaScript đi kèm (chưa kích hoạt mặc định nhưng sẵn sàng để sử dụng). Bạn có thể thêm class này vào bất kỳ phần tử nào để chúng có hiệu ứng mờ dần và trượt lên khi xuất hiện trong khung nhìn.

Responsive và Mobile First

Toàn bộ CSS được viết theo hướng mobile first, nghĩa là mặc định các kiểu dành cho màn hình nhỏ, sau đó dùng media query để mở rộng cho màn hình lớn. Điều này đảm bảo tốc độ tải trang trên di động luôn ở mức tốt nhất.

Menu trên mobile được thu gọn thành nút hamburger, khi nhấn sẽ hiển thị menu dọc với các cấp dropdown có thể mở rộng.

Opsoso_Begin_Blogger.xml là một template Blogger chất lượng cao, được phát triển bởi đội ngũ Opsoso.net với tâm huyết dành cho cộng đồng mã nguồn mở. Nó không chỉ đẹp về mặt thẩm mỹ mà còn mạnh mẽ về tính năng, thân thiện với người dùng và tối ưu cho công cụ tìm kiếm.

Dù bạn là blogger mới bắt đầu hay đã có kinh nghiệm, template này đều đáp ứng tốt nhu cầu: từ một blog cá nhân đơn giản đến một trang web nội dung chuyên nghiệp. Với việc được cung cấp hoàn toàn miễn phí, đây thực sự là một món quà ý nghĩa từ Opsoso dành cho cộng đồng.

Hãy tải ngay template Opsoso Begin Blogger, cài đặt và trải nghiệm sự khác biệt mà nó mang lại. Và đừng quên ghé thăm Opsoso.net thường xuyên để cập nhật những phiên bản mới nhất cũng như các giải pháp mã nguồn mở hữu ích khác.

Thông tin liên hệ & hỗ trợ:


Hướng dẫn sử dụng template Opsoso Begin Blogger chi tiết dành cho người dùng

Lời nói đầu

Cảm ơn bạn đã lựa chọn Opsoso_Begin_Blogger.xml – một giao diện hiện đại, miễn phí và giàu tính năng dành cho nền tảng Blogger. Tài liệu này sẽ hướng dẫn bạn từng bước từ cài đặt, cấu hình cơ bản đến tùy chỉnh nâng cao, giúp bạn khai thác tối đa sức mạnh của template. Bài hướng dẫn được viết với giả định bạn đã có một blog trên Blogger (Blogspot) và có quyền truy cập vào giao diện quản trị.

Phần 1: Cài đặt template

1.1. Tải template về máy

Trước tiên, bạn cần tải file Opsoso_Begin_Blogger.xml từ trang chủ Opsoso.net hoặc từ nguồn cung cấp. Lưu file này vào một thư mục dễ tìm trên máy tính.

1.2. Đăng nhập vào Blogger

  • Truy cập blogger.com và đăng nhập bằng tài khoản Google của bạn.
  • Chọn blog mà bạn muốn cài đặt template.

1.3. Tiến hành upload template

1.      Trên thanh menu bên trái, chọn Giao diện (Theme).

2.      Bên phải, nhấn vào nút Sao lưu / Khôi phục (mũi tên xuống cạnh nút Tùy chỉnh).

3.      Một cửa sổ nhỏ hiện ra, chọn Tải tệp lên (Upload).

4.      Nhấp Chọn tệp và tìm đến file Opsoso_Begin_Blogger.xml bạn đã tải.

5.      Nhấn Tải lên (Upload). Hệ thống sẽ cảnh báo ghi đè template hiện tại, bạn xác nhận đồng ý.

Sau khi upload thành công, template mới sẽ được áp dụng ngay cho blog. Bạn có thể vào trang chủ để xem giao diện mới.

Lưu ý: Nên sao lưu template cũ trước khi thay đổi, bằng cách nhấn Tải xuống đầy đủ trong cửa sổ Sao lưu/Khôi phục.

Phần 2: Cấu hình cơ bản – Các widget quan trọng

Sau khi cài đặt, bạn sẽ thấy giao diện có sẵn một số widget mẫu. Hãy vào Bố cục (Layout) để bắt đầu tùy chỉnh.

2.1. Header – Logo và menu

a) Thay đổi logo

  • Trong bố cục, tìm khu vực Header Logo.
  • Nhấp vào Chỉnh sửa (biểu tượng bút chì) trên widget Header1.
  • Tại đây bạn có thể:
    • Tải ảnh logo lên: Nhấn Chọn tệp và upload ảnh (nên dùng ảnh nền trong suốt, kích thước khoảng 200x64px).
    • Hoặc dùng chữ (tiêu đề blog) thay cho ảnh: bỏ chọn Hình ảnh thay cho văn bản.
  • Nhấn Lưu.

Nếu bạn không muốn hiển thị ảnh mà vẫn giữ icon mèo mặc định, không cần chỉnh sửa gì.

b) Cấu hình menu đa cấp

Menu chính nằm trong khu vực Main Menu, sử dụng widget PageList1. Đây là menu động hỗ trợ 3 cấp độ với cú pháp đặc biệt.

Cách tạo menu cấp 1 (mục cha):

  • Vào Bố cục, nhấn Chỉnh sửa trên widget PageList1.
  • Nhấn Thêm liên kết bên ngoài.
  • Nhập Tiêu đề (ví dụ: "Trang chủ", "Sản phẩm", "Tin tức") và URL (ví dụ: / cho trang chủ, hoặc đường dẫn tuyệt đối).
  • Sắp xếp thứ tự bằng cách kéo thả.

Cách tạo menu cấp 2 (dropdown con):

  • Khi thêm liên kết mới, tại ô Tiêu đề, hãy thêm dấu gạch dưới _ vào đầu tiêu đề. Ví dụ: _Sản phẩm A, _Sản phẩm B.
  • URL có thể để # tạm thời hoặc link thật.
  • Đảm bảo các mục cấp 2 nằm ngay sau mục cấp 1 tương ứng trong danh sách.

Cách tạo menu cấp 3 (sub-dropdown):

  • Tương tự, thêm hai dấu gạch dưới __ vào đầu tiêu đề. Ví dụ: __Phần mềm, __Ứng dụng.
  • Các mục này sẽ tự động trở thành menu con cấp 3 của mục cấp 2 gần nhất phía trước.

Ví dụ cấu trúc mong muốn:

text

Trang chủ (/)

Sản phẩm (#)

  _Sản phẩm A (link A)

    __Phần mềm (link A1)

    __Ứng dụng (link A2)

  _Sản phẩm B (link B)

Tin tức (#)

Liên hệ (/p/lien-he.html)

Sau khi thêm xong, nhấn Lưu. Menu sẽ hiển thị dạng dropdown khi rê chuột.

Mẹo: Bạn có thể tạo các trang tĩnh (Pages) từ trình đơn Trang và gán chúng vào menu bằng cách chọn từ danh sách thay vì nhập link tay.

2.2. Slider ảnh tự động (LinkList1)

Slider nằm trong khu vực Main (cột chính) với tiêu đề "Ảnh đẹp". Nó sử dụng widget LinkList1 và hoạt động dựa trên danh sách liên kết.

Cách thay đổi ảnh slider:

1.      Vào Bố cục, tìm widget LinkList1 trong khu vực main-section (thường nằm trên cùng).

2.      Nhấn Chỉnh sửa.

3.      Bạn sẽ thấy danh sách các liên kết mẫu. Mỗi liên kết gồm:

o    Tiêu đề (Tên): không hiển thị ra ngoài, bạn có thể ghi chú nội dung ảnh.

o    URL: đường dẫn ảnh. Quan trọng: URL phải kết thúc bằng đuôi ảnh (jpg, png, gif, webp) và ảnh phải có kích thước đủ lớn (tối thiểu 1200x600).

4.      Để thêm ảnh mới, nhấn Thêm liên kết bên ngoài, nhập tiêu đề và URL ảnh.

5.      Để xóa ảnh, nhấn biểu tượng thùng rác.

6.      Sắp xếp thứ tự bằng kéo thả.

7.      Nhấn Lưu.

Cách lấy đường dẫn ảnh từ Blogger:

  • Vào Bài viết, tạo một bài viết mới hoặc mở bài viết cũ.
  • Tải ảnh lên (chèn ảnh vào bài).
  • Sau khi ảnh được tải, nhấp chuột phải vào ảnh trong chế độ xem trước, chọn Sao chép địa chỉ liên kết ảnh.
  • Dán URL đó vào slider. Địa chỉ thường có dạng: https://blogger.googleusercontent.com/img/b/R29vZ2xl/.../s1600/tenanh.jpg. Bạn có thể thay s1600 thành s1920 để lấy ảnh độ phân giải cao hơn.

Tùy chỉnh tốc độ chạy slider:

  • Tốc độ tự động chuyển ảnh mặc định là 4 giây. Bạn có thể thay đổi bằng cách sửa trong file HTML: tìm dòng setInterval(function() { window.moveSlide(1); }, 4000); và đổi số 4000 thành mili giây mong muốn (ví dụ 3000 = 3 giây).

2.3. Ba ô chức năng (HTML5)

Khu vực main-top-section có widget HTML5 (chỉ hiển thị trên trang chủ) chứa 3 thẻ tính năng. Để sửa nội dung:

1.      Vào Bố cục, tìm HTML5 trong phần Main Top Section.

2.      Nhấn Chỉnh sửa.

3.      Bạn sẽ thấy mã HTML như sau:

html

<div class="features-inner-grid">

  <div class="feature-sub-card">

    <div class="sub-icon"><i class="fa-solid fa-bolt"></i></div>

    <h4>Tốc độ siêu tốc</h4>

    <p>Tối ưu hóa mã nguồn giúp tải trang nhanh chóng...</p>

  </div>

  <!-- hai card tương tự -->

</div>

Bạn có thể:

  • Thay đổi icon bằng cách sửa class fa-solid fa-bolt thành icon Font Awesome khác (danh sách icon tại fontawesome.com).
  • Sửa tiêu đề h4 và nội dung p theo ý muốn.
  • Thêm hoặc bớt card (chú ý giữ cấu trúc feature-sub-card).

Sau khi sửa xong, nhấn Lưu.

2.4. Widget hiển thị bài viết theo nhãn (HTML1, HTML2, HTML3)

Template tích hợp sẵn 3 widget HTML (HTML1, HTML2, HTML3) trong khu vực main-section. Chúng có chức năng tự động lấy bài viết theo nhãn nhờ JavaScript.

Cách sử dụng:

  • Vào Bố cục, tìm widget HTML1 (hoặc 2, 3).
  • Nhấn Chỉnh sửa.
  • Trong ô Nội dung, bạn chỉ cần nhập chính xác tên nhãn (label) mà bạn muốn hiển thị. Ví dụ: nhập Công nghệ.
  • Lưu lại.

Ngay lập tức, widget sẽ hiển thị tối đa 3 bài viết mới nhất thuộc nhãn đó, kèm ảnh đại diện, tiêu đề và đoạn trích. Nếu không có bài viết nào, nó sẽ thông báo.

Lưu ý: Tên nhãn phải nhập chính xác (phân biệt chữ hoa chữ thường). Nên tạo nhãn trước trong bài viết.

Bạn có thể thay đổi số lượng bài viết hiển thị bằng cách tìm trong code: dòng generatePostList('HTML1', 3); – sửa số 3 thành số lượng mong muốn (ví dụ 5). Tuy nhiên cần có kiến thức chỉnh sửa HTML.

2.5. Sidebar – Các widget mặc định

a) Giới thiệu (HTML100)

Widget này hiển thị ảnh đại diện và mô tả ngắn. Để tùy chỉnh:

  • Vào Bố cục, tìm HTML100 trong Sidebar.
  • Nhấn Chỉnh sửa. Bạn sẽ thấy:

html

<img src="https://...png" alt="Profile Picture" />

<p>Tôi thích những gì dễ thương</p>

  • Thay đổi src của ảnh bằng link ảnh của bạn.
  • Sửa nội dung đoạn văn.

b) Chính sách bảo mật (LinkList2)

Đây là danh sách liên kết đơn giản. Bạn có thể thêm, sửa, xóa các liên kết như bình thường. Mỗi liên kết sẽ hiển thị dưới dạng một mục trong sidebar với hiệu ứng hover.

c) Bài viết phổ biến (PopularPosts1)

Widget này không cần chỉnh sửa nhiều. Bạn có thể cấu hình:

  • Vào Chỉnh sửa widget.
  • Chọn Số lượng bài viết (mặc định 5).
  • Bật/tắt Hiển thị hình thu nhỏ.
  • Chọn khoảng thời gian: 7 ngày qua, 30 ngày qua, năm qua, tất cả.

d) Chủ đề tiêu biểu (Label1)

Hiển thị các nhãn dưới dạng danh sách. Bạn có thể chọn hiển thị dạng danh sách hoặc đám mây trong phần chỉnh sửa widget. Nên để dạng danh sách để tiết kiệm diện tích.

2.6. Footer

Footer có 3 widget:

  • Text1: Giới thiệu ngắn.
  • LinkList3: Các liên kết trang (dạng cột).
  • Text100: Bản quyền tự động cập nhật năm.

Bạn có thể tùy chỉnh nội dung các widget này giống như bất kỳ widget HTML/LinkList nào khác. Đặc biệt, bạn có thể thay đổi liên kết "Design by Opsoso" trong Text100 nếu muốn.

Phần 3: Tùy chỉnh nâng cao (Dành cho người biết HTML/CSS)

3.1. Thay đổi màu sắc, font chữ

Template sử dụng hệ thống biến CSS (CSS variables) tập trung ở đầu file. Bạn có thể vào Giao diện → Chỉnh sửa HTML, tìm dòng :root { (khoảng dòng 90-110). Tại đây bạn thấy các biến:

css

:root {

    --primary-color: #3b4252;

    --accent-color: #dd6b20;

    --bg-color: #f4f1ea;

    --text-color: #4a5568;

    --heading-color: #2d3748;

    --border-color: rgba(45, 55, 72, 0.08);

    --card-bg: #fdfdfc;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.04);

    --radius-l: 20px;

    --radius-m: 12px;

    --radius-s: 8px;

}

Bạn có thể thay đổi các giá trị này, ví dụ:

  • Đổi màu chính thành xanh: --primary-color: #2c7da0;
  • Đổi màu nền thành trắng tinh: --bg-color: #ffffff;
  • Bo góc lớn hơn: --radius-l: 30px;

Lưu ý: Phần dark mode có bộ biến riêng bên dưới html[data-theme='dark']. Nếu muốn thay đổi màu dark mode, hãy sửa ở đó.

3.2. Điều chỉnh kích thước ảnh slider

Ảnh slider có chiều cao mặc định 350px (desktop) và 200px (mobile). Bạn có thể sửa trong CSS: tìm .slider-slide img và thay đổi height: 350px; thành giá trị mong muốn (ví dụ 450px). Tương tự cho mobile.

3.3. Kích hoạt hiệu ứng xuất hiện khi cuộn (scroll reveal)

Template đã có class .reveal-on-scroll nhưng chưa có JavaScript kích hoạt. Để dùng, bạn thực hiện:

1.      Thêm class reveal-on-scroll vào bất kỳ phần tử nào bạn muốn (ví dụ: một card, một đoạn văn).

2.      Chèn đoạn script sau vào cuối file HTML (trước </body>):

javascript

<script>

  document.addEventListener('DOMContentLoaded', function() {

    const observer = new IntersectionObserver((entries) => {

      entries.forEach(entry => {

        if (entry.isIntersecting) {

          entry.target.classList.add('is-visible');

        }

      });

    });

    document.querySelectorAll('.reveal-on-scroll').forEach(el => observer.observe(el));

  });

</script>

Các phần tử có class này sẽ mờ dần và trượt lên khi xuất hiện trong khung nhìn.

3.4. Thêm mã theo dõi Google Analytics

  • Vào Cài đặt → Cài đặt tìm kiếm → Google Analytics.
  • Nhập ID theo dõi (dạng G-xxxxxx hoặc UA-xxxxx).
  • Lưu lại.

Hoặc bạn có thể chèn trực tiếp mã Google Tag vào thẻ <head> bằng cách chỉnh sửa HTML.

3.5. Tùy chỉnh số lượng bài viết trên trang chủ

Mặc định, Blog1 hiển thị số bài viết theo cài đặt của Blogger (Cài đặt → Bài đăng trên trang chủ). Bạn có thể thay đổi tại Cài đặt → Định dạng bài đăng → Hiển thị tối đa. Mặc định thường là 7. Bạn có thể tăng lên 10 hoặc 12.

Nếu muốn thay đổi số cột trong grid, bạn chỉnh CSS: .posts-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }. Số 300px là chiều rộng tối thiểu của mỗi thẻ, bạn có thể tăng lên để hiển thị ít cột hơn.

3.6. Sử dụng biểu tượng Font Awesome khác

Template đã nhúng Font Awesome 6.4.2. Bạn có thể sử dụng bất kỳ icon nào từ thư viện miễn phí của họ. Cú pháp:

html

<i class="fa-regular fa-heart"></i> <!-- icon trái tim rỗng -->

<i class="fa-solid fa-camera"></i> <!-- icon máy ảnh -->

Để tìm icon, truy cập Font Awesome Icons. Chọn icon, sao chép class và dán vào thuộc tính class của thẻ <i>.

Phần 4: Xử lý sự cố thường gặp

4.1. Menu không hiển thị dropdown hoặc bị lỗi

  • Kiểm tra lại cú pháp dấu _ và __ ở đầu tiêu đề. Không được có khoảng trắng trước dấu gạch dưới.
  • Đảm bảo các mục con nằm ngay dưới mục cha trong danh sách.
  • Nếu bạn đã chỉnh sửa HTML và xóa mất đoạn JavaScript xây dựng menu, hãy tải lại template gốc.

4.2. Slider không chạy hoặc ảnh không hiển thị

  • Kiểm tra URL ảnh: phải kết thúc bằng đuôi ảnh, không chứa dấu cách, nên dùng ảnh từ nguồn hỗ trợ CORS (Blogger, Imgur, Flickr...).
  • Đảm bảo có ít nhất 1 ảnh.
  • Kiểm tra xem JavaScript có bị lỗi không: mở công cụ phát triển (F12) → Console, xem lỗi đỏ.

4.3. Dark mode không nhớ trạng thái

  • Kiểm tra xem trình duyệt có cho phép localStorage không (hầu hết đều cho phép).
  • Nếu bạn đã xóa đoạn script dark mode, hãy thêm lại:

javascript

<script>

  if (localStorage.getItem('theme') === 'dark') {

    document.documentElement.setAttribute('data-theme', 'dark');

  }

</script>

4.4. Widget HTML1,2,3 không hiển thị bài viết

  • Kiểm tra lại tên nhãn: nhập chính xác, không dấu cách thừa.
  • Đảm bảo có ít nhất 1 bài viết mang nhãn đó và bài viết đã được xuất bản (không ở chế độ nháp).
  • Do cơ chế JSONP, nếu blog của bạn ở chế độ riêng tư hoặc bị chặn truy cập feed, tính năng này sẽ không hoạt động. Hãy đảm bảo blog ở chế độ công khai.

4.5. Giao diện bị vỡ trên điện thoại

  • Kiểm tra lại thẻ meta viewport: phải có <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">. Nếu thiếu, hãy thêm vào thẻ <head>.
  • Đảm bảo bạn không xóa các media query trong CSS.

Phần 5: Mẹo và thủ thuật nâng cao

5.1. Thêm biểu tượng cảm xúc (emoji) vào tiêu đề widget

Bạn có thể thêm emoji trực tiếp vào tiêu đề widget (ví dụ: "📱 Công nghệ", "❤️ Yêu thích"). Blogger hỗ trợ Unicode, emoji sẽ hiển thị đẹp.

5.2. Chèn quảng cáo Google AdSense

  • Vào Bố cục, thêm widget HTML/Javascript vào bất kỳ khu vực nào (sidebar, giữa bài viết, dưới header).
  • Dán mã quảng cáo từ AdSense vào.
  • Hoặc sử dụng tính năng "Quảng cáo" có sẵn của Blogger (Cài đặt → Doanh thu).

5.3. Thay đổi font chữ mặc định

Template dùng Google Fonts Inter và Nunito. Bạn có thể thay bằng font khác:

  • Tìm dòng <link href='https://fonts.googleapis.com/css2?family=Inter...' rel='stylesheet'/> và thay bằng font bạn muốn.
  • Sửa các khai báo font-family trong CSS (tìm font-family: 'Inter', ... và font-family: 'Nunito', ...).

5.4. Tạo trang liên hệ có form

Blogger có sẵn widget Biểu mẫu liên hệ (Contact Form). Bạn có thể thêm nó vào sidebar hoặc tạo một trang riêng:

  • Tạo trang mới (Trang → Trang mới).
  • Chèn widget bằng cách nhấp vào biểu tượng thêm widget trong trình soạn thảo? Thực tế, bạn có thể chèn form liên hệ bằng cách dùng shortcode: <iframe src="https://docs.google.com/forms/..."></iframe> hoặc thêm widget Contact Form vào khu vực sidebar và đặt nó ở vị trí mong muốn.

Template đã có sẵn CSS cho contact form (đã được tùy chỉnh giao diện đồng bộ).

5.5. Sao lưu và khôi phục cài đặt

  • Để sao lưu toàn bộ template kèm nội dung widget, vào Giao diện → Sao lưu/Khôi phục → Tải xuống đầy đủ. File .xml sẽ lưu cả cấu hình widget.
  • Để khôi phục, upload file đó.

Bạn đã hoàn thành việc cài đặt và tùy chỉnh template Opsoso Begin Blogger. Với hướng dẫn chi tiết này, hy vọng bạn có thể tự tin làm chủ giao diện, tạo nên một blog chuyên nghiệp, đẹp mắt và thân thiện với người dùng.

Nếu cần hỗ trợ thêm, hãy truy cập Opsoso.net hoặc để lại bình luận bên dưới bài viết. Chúng tôi luôn sẵn lòng giúp đỡ cộng đồng mã nguồn mở.

Chúc bạn thành công!

Cảm ơn bạn đã đọc bài viết!

Hy vọng bài viết này đã mang lại giá trị cho bạn. Nếu bạn thích nội dung này, hãy chia sẻ với bạn bè hoặc để lại bình luận.

Tags: Blogspot BlogspotV3