Template Opsoso TABBED v2 – Phong cách đột phá cho Blogger

Hướng dẫn sử dụng Template Opsoso TABBED v2 cho Blogger – Dành cho mọi người

Bài viết này sẽ là cẩm nang toàn tập giúp bạn từ một người mới hoàn toàn có thể tự tay cài đặt, tùy chỉnh và làm chủ template Opsoso TABBED v2. Tôi sẽ hướng dẫn chi tiết từng bước một, kèm theo những giải thích dễ hiểu và các mẹo nhỏ để bạn có thể biến blog của mình trở nên chuyên nghiệp và thu hút hơn.

Mục lục

1. Giới thiệu về Opsoso TABBED v2

2. Những gì bạn cần chuẩn bị

3. Cách cài đặt template lên Blogger

4. Khám phá giao diện và các khu vực chính

5. Tùy chỉnh cơ bản – Không cần động tới code

   • 5.1. Thay đổi Logo và tiêu đề blog

   • 5.2. Cấu hình menu trên cùng (Top Navigation)

   • 5.3. Cấu hình thanh sidebar (Sidebar Icons) và icon

   • 5.4. Tùy chỉnh phần “Khám phá theo chủ đề” (Label Cloud)

   • 5.5. Thay đổi nội dung giới thiệu (HTML Widget)

   • 5.6. Tinh chỉnh footer (phần chân trang)

6. Các tính năng đặc biệt của template

   • 6.1. Chế độ tối (Dark mode) thông minh

   • 6.2. Sidebar tự động ẩn kiểu macOS

   • 6.3. Hiệu ứng card bài viết và ảnh đẹp mắt

   • 6.4. Bộ nút chia sẻ mạng xã hội hiện đại

   • 6.5. Giao diện label dạng lưới (grid) độc đáo

   • 6.6. Tối ưu hóa trên điện thoại di động

7. Tùy chỉnh nâng cao cho người muốn “chuyên sâu”

   • 7.1. Thay đổi màu sắc chủ đạo (chỉ 5 phút)

   • 7.2. Tùy biến icon cho sidebar (thêm/xóa icon theo ý thích)

   • 7.3. Điều chỉnh kiểu dáng label cloud

   • 7.4. Thêm widget mới vào các khu vực

8. Những lưu ý và khắc phục sự cố thường gặp

1. Giới thiệu về Opsoso TABBED v2

Opsoso TABBED v2 là template được thiết kế dành riêng cho nền tảng Blogger, mang phong cách tabbed layout – bố cục dạng thẻ, lấy cảm hứng từ giao diện macOS. Điểm đặc biệt là thanh sidebar được thiết kế như một dock nổi, tự động ẩn hiện mượt mà, giúp tối đa hóa không gian đọc. Template tích hợp sẵn chế độ dark/light mode, bộ nút chia sẻ mạng xã hội, hiệu ứng hover hiện đại và đặc biệt là phần hiển thị label (nhãn) dạng lưới hình chữ nhật liền mạch, rất trực quan.

Dù bạn là blogger viết lách, chia sẻ kiến thức, hay chạy tin tức, template này đều đáp ứng tốt nhờ bố cục rõ ràng, dễ điều hướng và thân thiện với người đọc.

2. Những gì bạn cần chuẩn bị 

Trước khi bắt đầu, hãy chắc chắn bạn có:

• Một tài khoản Blogger và một blog đã được tạo (nếu chưa, hãy tạo mới tại blogger.com).

• File template opsoso_TABBED_v2.xml (chính là file tôi đã cung cấp).

• Một trình duyệt web (Chrome, Firefox, Edge,…) và kết nối internet ổn định.

• Tinh thần thoải mái và một tách cà phê (tùy chọn) 😊.

3. Cách cài đặt template lên Blogger

Quy trình cài đặt rất đơn giản, bạn làm theo các bước sau:

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

2. Chọn blog bạn muốn áp dụng template.

3. Vào mục Chủ đề (Theme) ở thanh menu bên trái.

4. Tại góc trên bên phải, nhấn vào nút Sao lưu (Backup) để tải về bản sao template cũ (phòng khi cần khôi phục).

5. Sau đó, nhấn vào nút Chỉnh sửa HTML (Edit HTML).

6. Một cửa sổ hiện ra với toàn bộ mã HTML của template hiện tại. Hãy xóa toàn bộ mã cũ đi (Ctrl+A → Delete).

7. Mở file opsoso_TABBED_v2.xml bằng trình soạn thảo văn bản (Notepad, VS Code,…), bôi đen toàn bộ nội dung, sao chép (Ctrl+C).

8. Quay lại cửa sổ Blogger, dán (Ctrl+V) nội dung vừa sao chép vào.

9. Nhấn Lưu chủ đề (Save theme).

Vậy là xong! Bạn đã cài đặt thành công template mới. Hãy vào Xem blog để chiêm ngưỡng kết quả.

4. Khám phá giao diện và các khu vực chính 

Sau khi cài đặt, blog của bạn sẽ có bố cục như sau:

• Header (Đầu trang): Gồm logo, ô tìm kiếm, menu điều hướng trên cùng và nút chuyển đổi dark mode.

• Sidebar (Thanh bên trái): Là các icon điều hướng chính, được thiết kế dạng dock nổi.

• Content (Vùng nội dung chính): Hiển thị danh sách bài viết (dạng card), label cloud, widget giới thiệu.

• Footer (Chân trang): Thông tin bản quyền và credit.

Mỗi khu vực đều có thể tùy chỉnh thông qua các widget trong phần Bố cục (Layout) của Blogger. Điều này cực kỳ thuận tiện cho người không chuyên.

5. Tùy chỉnh cơ bản – Không cần động tới code

Tôi đã thiết kế template để bạn có thể thay đổi mọi thứ qua giao diện kéo thả của Blogger. Dưới đây là hướng dẫn chi tiết từng phần.

5.1. Thay đổi Logo và tiêu đề blog

Template sử dụng widget Header để hiển thị logo và tiêu đề. Bạn có thể thay đổi như sau:

• Vào Bố cục (Layout).

• Tìm khu vực Site Logo (nằm trong phần header).

• Nhấn vào Chỉnh sửa trên widget Header.

• Tại đây, bạn có thể:

  • Chọn ảnh đại diện: Tải lên logo của bạn (kích thước khuyến nghị: chiều cao 60px, chiều rộng tự động).

  • Thay thế tiêu đề bằng ảnh?: Chọn “Có” nếu muốn dùng ảnh thay cho chữ.

  • Mô tả ngắn: Nhập mô tả blog (sẽ hiển thị bên dưới tiêu đề nếu bạn chọn hiển thị kiểu chữ và ảnh cùng nhau).

• Nhấn Lưu để hoàn tất.

Mẹo: Nếu bạn muốn tiêu đề blog là chữ (không dùng ảnh), hãy bỏ chọn “Thay thế tiêu đề bằng ảnh”. Tiêu đề sẽ hiển thị với gradient màu tím-xanh rất đẹp.

5.2. Cấu hình menu trên cùng (Top Navigation)

Menu trên cùng nằm ngay bên phải logo, dùng để chứa các liên kết quan trọng như Điều khoản, Chính sách, Liên hệ.

• Vào Bố cục → khu vực Top Menu.

• Nhấn Chỉnh sửa trên widget LinkList.

• Bạn sẽ thấy danh sách các liên kết mặc định. Hãy thay đổi:

  • Tên liên kết: Nhập tên bạn muốn hiển thị (ví dụ: “Trang chủ”, “Giới thiệu”).

  • Địa chỉ liên kết: Nhập URL đầy đủ (ví dụ: https://tenblog.blogspot.com/p/gioi-thieu.html).

• Bạn có thể thêm nhiều liên kết bằng cách nhấn Thêm liên kết.

• Nhấn Lưu.

Menu này sẽ tự động hiển thị trên màn hình máy tính; trên điện thoại nó sẽ ẩn đi để tiết kiệm không gian (bạn vẫn có thể dùng sidebar để điều hướng).

5.3. Cấu hình thanh sidebar (Sidebar Icons) và icon

Đây là phần độc đáo nhất của template. Sidebar được xây dựng từ widget LinkList trong khu vực Sidebar Icons.

Cách thay đổi:

• Vào Bố cục → Sidebar Icons → Chỉnh sửa.

• Bạn sẽ thấy danh sách các mục (mặc định: Home, Trend, User).

• Mỗi mục gồm tên và URL. Bạn có thể sửa tên, sửa URL theo ý muốn. Ví dụ:

  • Tên: Home – URL: / (trang chủ)

  • Tên: Khám phá – URL: https://tenblog.blogspot.com/search

  • Tên: Liên hệ – URL: https://tenblog.blogspot.com/p/lien-he.html

• Sau khi lưu, các icon sẽ tự động hiển thị với biểu tượng tương ứng dựa trên tên bạn đặt. Cụ thể:

  • Home → icon ngôi nhà (fa-house)

  • Trend → icon ngọn lửa (fa-fire)

  • User → icon người dùng (fa-user)

  • Nếu tên không khớp các từ khóa trên, icon mặc định là tia chớp (fa-bolt).

Lưu ý: Bạn có thể xem danh sách icon gợi ý trong comment của file template (dòng bắt đầu bằng DANH SÁCH ICON GỢI Ý). Muốn gán icon khác, bạn cần sửa một chút code – tôi sẽ hướng dẫn ở phần nâng cao.

5.4. Tùy chỉnh phần “Khám phá theo chủ đề” (Label Cloud)

Phần này hiển thị tất cả nhãn (label) của blog dưới dạng lưới ô vuông rất đẹp. Để quản lý:

• Vào Bố cục → khu vực Main Content → tìm widget Label (tiêu đề “Khám phá theo chủ đề”) → Chỉnh sửa.

• Bạn có thể thay đổi:

  • Tiêu đề: Nhập tiêu đề bạn muốn (ví dụ: “Chủ đề nổi bật”).

  • Cách sắp xếp: Theo thứ tự bảng chữ cái (ALPHA) hoặc theo tần suất (FREQUENCY).

  • Hiển thị: Chọn “Cloud” để hiển thị dạng lưới (đây là kiểu mặc định của template).

  • Hiển thị số lượng bài viết: Nên chọn “Có” để người đọc biết mỗi chủ đề có bao nhiêu bài.

Widget này tự động lấy tất cả nhãn bạn đã gán cho bài viết, không cần thêm thao tác nào.

5.5. Thay đổi nội dung giới thiệu (HTML Widget)

Ở trang chủ, có một khung giới thiệu với tiêu đề “Giới thiệu”. Bạn có thể thay đổi nội dung này:

• Vào Bố cục → Main Content → tìm widget HTML (tiêu đề “Giới thiệu”) → Chỉnh sửa.

• Trong ô Nội dung, bạn có thể viết bất kỳ điều gì: giới thiệu bản thân, thông báo, quảng cáo, v.v.

• Bạn có thể dùng mã HTML cơ bản như <b>in đậm</b>, <a href="...">liên kết</a> để tạo phong phú.

• Nhấn Lưu.

5.6. Tinh chỉnh footer (phần chân trang)

Footer hiển thị thông tin bản quyền và dòng chữ “Phát triển cùng với cộng đồng”. Bạn có thể thay đổi:

• Vào Bố cục → Footer Content → chỉnh sửa widget Text.

• Thay đổi nội dung trong ô Nội dung (ví dụ: “Mọi quyền được bảo lưu”).

• Dòng chữ “Thiết kế bởi Opsoso.net” nằm cố định, không thay đổi qua widget – nếu muốn sửa bạn cần can thiệp code (xem phần nâng cao).

6. Các tính năng đặc biệt của template 

6.1. Chế độ tối (Dark mode) thông minh

Template tích hợp nút chuyển đổi sáng/tối ở góc phải header. Khi người dùng nhấn vào, giao diện sẽ chuyển sang màu tối hoặc sáng mượt mà. Quan trọng hơn, lựa chọn này được lưu vào trình duyệt, nếu họ quay lại sau, chế độ vẫn được giữ nguyên.

Bạn không cần cấu hình gì thêm, nó hoạt động ngay lập tức.

6.2. Sidebar tự động ẩn kiểu macOS

Sidebar bên trái sẽ tự động ẩn sau 1 giây nếu bạn không di chuột vào. Khi bạn di chuột về phía mép trái màn hình, nó lập tức trượt ra. Cơ chế này giúp tối đa hóa không gian nội dung, đồng thời tạo cảm giác sang trọng như trên máy Mac.

Nếu bạn muốn sidebar luôn hiện, có thể tắt tính năng này bằng cách sửa code (xem phần nâng cao). Tuy nhiên, tôi khuyên bạn nên giữ nguyên vì nó rất tiện lợi.

6.3. Hiệu ứng card bài viết và ảnh đẹp mắt

Mỗi bài viết trên trang chủ được hiển thị dưới dạng card với ảnh đại diện, tiêu đề, đoạn trích và nút “Đọc thêm”. Khi rê chuột, card sẽ phóng to nhẹ và ảnh phóng to bên trong, tạo hiệu ứng chiều sâu. Nếu bài viết không có ảnh, template tự động lấy ảnh ngẫu nhiên từ picsum.photos, đảm bảo giao diện luôn đẹp.

6.4. Bộ nút chia sẻ mạng xã hội hiện đại

Cuối mỗi bài viết, bạn sẽ thấy các nút chia sẻ lên Facebook, X (Twitter), LinkedIn, Telegram và nút sao chép liên kết. Các nút này có màu sắc thương hiệu và hiệu ứng hover đẹp. Trên điện thoại, chúng thu gọn lại chỉ còn icon, tiết kiệm diện tích.

6.5. Giao diện label dạng lưới (grid) độc đáo

Thay vì hiển thị tag dạng “đám mây” rối mắt, tôi đã thiết kế các label dưới dạng lưới các ô hình chữ nhật liền mạch. Mỗi ô có tên label, số lượng bài và icon thẻ. Khi hover, ô sáng lên với viền primary và một thanh màu tím trượt lên. Đây là điểm nhấn giúp người đọc dễ dàng khám phá nội dung theo chủ đề.

6.6. Tối ưu hóa trên điện thoại di động

Template được viết theo tư duy responsive, tức là tự động điều chỉnh để hiển thị đẹp trên mọi kích thước màn hình. Trên điện thoại, sidebar sẽ ẩn hẳn (thay vào đó bạn dùng menu top hoặc tính năng tìm kiếm), các card chuyển thành dạng cột dọc, ô tìm kiếm mở rộng, chữ to dễ đọc. Bạn hãy thử xem blog trên điện thoại để thấy sự khác biệt.

7. Tùy chỉnh nâng cao cho người muốn “chuyên sâu”

Nếu bạn đã quen thuộc với một chút HTML/CSS, bạn có thể thay đổi sâu hơn để blog mang dấu ấn cá nhân.

7.1. Thay đổi màu sắc chủ đạo (chỉ 5 phút)

Màu sắc chính của template được định nghĩa bằng các biến CSS ở đầu file. Bạn chỉ cần vào Chỉnh sửa HTML của template, tìm đoạn :root { và thay đổi các giá trị:

• --primary: màu tím chủ đạo (mặc định #6366f1). Đổi thành mã màu bạn thích, ví dụ #ff5722 (cam).

• --secondary: màu phụ (mặc định #a855f7). Đổi để tạo gradient header.

• --text-main: màu chữ chính.

• --text-sub: màu chữ phụ.

• ...

Sau khi sửa, nhấn Lưu và xem kết quả. Rất đơn giản phải không?

7.2. Tùy biến icon cho sidebar (thêm/xóa icon theo ý thích)

Như đã nói, icon sidebar được gán tự động dựa trên tên link. Nếu bạn muốn gán icon khác (ví dụ: mục “Khoá học” dùng icon fa-graduation-cap), hãy làm như sau:

1. Vào Chỉnh sửa HTML template.

2. Tìm đoạn code bắt đầu bằng <!-- DANH SÁCH ICON GỢI Ý --> và phần <b:loop values='data:links' var='link'> bên dưới.

3. Trong vòng lặp đó, bạn thấy dòng:

   html

   <b:with value='data:link.name == "Home" ? "fa-house" : (data:link.name == "Trend" ? "fa-fire" : (data:link.name == "User" ? "fa-user" : "fa-bolt"))' var='icon'>

   Đây là biểu thức điều kiện gán icon. Bạn có thể thêm điều kiện cho tên mới, ví dụ:

   html

   <b:with value='data:link.name == "Home" ? "fa-house" : (data:link.name == "Trend" ? "fa-fire" : (data:link.name == "User" ? "fa-user" : (data:link.name == "Khóa học" ? "fa-graduation-cap" : "fa-bolt")))' var='icon'>

   (Lưu ý: tên phải viết chính xác như trong widget LinkList).

4. Lưu template.

7.3. Điều chỉnh kiểu dáng label cloud

Bạn có thể thay đổi số cột, chiều cao ô, màu sắc hover của label bằng cách sửa các class CSS trong phần <b:skin>. Ví dụ:

• Muốn mỗi hàng có 5 ô thay vì tự động fill, sửa .label-cloud { grid-template-columns: repeat(5, 1fr); }.

• Muốn đổi màu thanh trượt bên trái, sửa background: var(--primary); trong .label-item::before.

7.4. Thêm widget mới vào các khu vực

Template có sẵn các section: main-area (vùng nội dung chính), footer-section (chân trang). Bạn có thể thêm bất kỳ widget nào (Popular Posts, HTML, Text,…) bằng cách:

• Vào Bố cục.

• Nhấn Thêm tiện ích con ở khu vực bạn muốn.

• Chọn loại widget và cấu hình.

Ví dụ, thêm widget “Popular Posts” vào cuối main-area để hiển thị bài viết phổ biến.

8. Những lưu ý và khắc phục sự cố thường gặp

Opsoso TABBED v2 là kết tinh của nhiều tháng làm việc miệt mài, với mong muốn mang lại một trải nghiệm đọc blog tuyệt vời nhất. Tôi hy vọng qua bài hướng dẫn chi tiết này, bạn đã có thể tự tin cài đặt và tùy chỉnh template để phù hợp với phong cách riêng. Nếu có bất kỳ thắc mắc hay góp ý nào, đừng ngần ngại để lại bình luận trên blog của tôi hoặc liên hệ trực tiếp qua email.

Chúc bạn thành công và có những bài viết thật hay trên hành trình blogging của mình!