Theme Blogger miễn phí đầy đủ chức năng: Opsoso Neumorphism

Là một lập trình viên đã dành hàng nghìn giờ trong thế giới mã nguồn mở, tôi luôn tin rằng sức mạnh lớn nhất của công nghệ không nằm ở những thuật toán phức tạp hay những nền tảng độc quyền, mà nằm ở khả năng kết nối, chia sẻ và cùng nhau kiến tạo. Mỗi dòng code được công khai, mỗi dự án được "mở" ra, là một viên gạch góp phần xây dựng nên một tương lai kỹ thuật số bình đẳng và sáng tạo hơn. Hôm nay, với tinh thần ấy, tôi xin chia sẻ với cộng đồng một sản phẩm tâm huyết – Opsoso Neumorphism Theme – không chỉ là một giao diện Blogger, mà là một tuyên ngôn về cái đẹp tinh tế trong thiết kế web, được xây dựng dựa trên nền tảng vững chắc của mã nguồn mở và sự tối ưu hóa kỹ thuật nghiêm ngặt.

Lịch sử thiết kế giao diện người dùng (UI) là một hành trình không ngừng tìm kiếm sự cân bằng giữa chức năng và thẩm mỹ, giữa trừu tượng và cụ thể. Nếu Minimalism (tối giản) thập kỷ trước chinh phục chúng ta bằng sự gọn gàng, tinh khiết và tập trung tuyệt đối vào nội dung, thì Material Design của Google sau đó đã mang lại một bước đột phá: một ngôn ngữ thiết kế dựa trên vật lý thực, với các lớp giấy, bóng đổ rõ ràng và chuyển động có ý nghĩa. Nó tạo ra một thế giới kỹ thuật số trực quan, dễ đoán.

Tuy nhiên, bản năng con người luôn khao khát sự liên kết với thế giới thực. Chúng ta muốn chạm, cảm nhận độ lồi lõm, và nhận phản hồi vật lý. Neumorphism (hay Soft UI) ra đời như một sự giao thoa đầy nghệ thuật, khéo léo lấp đầy khoảng trống đó. Nó không phủ nhận các nguyên tắc của Material Design mà phát triển chúng theo một hướng khác: thay vì các lớp giấy phẳng với bóng đổ rõ ràng, Neumorphism tạo ra ảo giác rằng các phần tử UI – nút bấm, thẻ, thanh tìm kiếm – được đúc chìm hoặc nổi lên từ chính bề mặt nền. Hiệu ứng này đạt được thông qua việc sử dụng đồng thời hai lớp bóng sáng (light shadow) và bóng tối (dark shadow) với cùng một độ lệch, trên một nền có màu trung tính. Kết quả là một giao diện mềm mại, mịn màng, tạo cảm giác “ấm” và gần gũi, như thể bạn có thể chạm vào màn hình và cảm nhận được kết cấu.

Opsoso Neumorphism theme được sinh ra từ sự đam mê với xu hướng thiết kế đầy tính nghệ thuật này. Nhưng với tư cách một lập trình viên mã nguồn mở, tôi hiểu rằng một thiết kế đẹp phải đi đôi với một bộ mã sạch, hiệu quả và dễ tiếp cận. Đó là lý do theme này không dừng lại ở vẻ ngoài, mà được xây dựng bài bản trên nền tảng Google Layouts Version 3 – khung bố cục hiện đại nhất và mạnh mẽ nhất của Blogger.

Mở tệp opsoso_neumorphism.xml, chúng ta có thể thấy ngay triết lý thiết kế được áp dụng một cách nhất quán. Toàn bộ giao diện được xây dựng xung quanh một bảng màu biến số (CSS variables) được định nghĩa rõ ràng trong phần <b:skin>:

:root {
    --bg-color: #e2e8f0;
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --primary-color: #4f46e5;
    --text-color: #334155;
}

Màu nền --bg-color là tông xám xanh nhạt trung tính, tạo nền tảng hoàn hảo cho hiệu ứng Neumorphism. Hai màu bóng --shadow-light (trắng) và --shadow-dark (xám xanh đậm) là chìa khóa. Chúng được sử dụng trong các lớp box-shadow để tạo hiệu ứng "nổi" và "chìm". Ví dụ điển hình là lớp .neo-shadow:

.neo-shadow {
    box-shadow: 9px 9px 16px var(--shadow-dark), -9px -9px 16px var(--shadow-light);
}

Đoạn mã trên áp dụng hai lớp bóng: một lớp bóng tối ở góc dưới phải (9px 9px) và một lớp bóng sáng ở góc trên trái (-9px -9px). Điều này khiến phần tử trông như thể được chiếu sáng từ góc trên trái, tạo cảm giác nổi lên. Ngược lại, lớp .neo-shadow-inset sử dụng inset để đảo ngược hiệu ứng, làm phần tử như bị đúc chìm vào bề mặt.

Sự tinh tế còn thể hiện ở các trạng thái tương tác. Nút bấm (.neo-button-hover:hover) khi được di chuột qua sẽ chuyển từ trạng thái "nổi" sang "chìm", mô phỏng hành động nhấn vật lý:

.neo-button-hover:hover {
    box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
}

Tính nhất quán này được áp dụng xuyên suốt: từ các .sidebar-box, .neo-input cho đến các nút trong slider và thậm chí là nút tùy chỉnh theme nổi ở góc màn hình (#theme-customizer-btn). Mỗi tương tác đều mang lại một phản hồi hình ảnh rõ ràng, làm tăng đáng kể trải nghiệm người dùng (UX).

Là một dự án mã nguồn mở, tính bền vững và khả năng bảo trì là ưu tiên hàng đầu. Opsoso Neumorphism không sử dụng các "mẹo" hack phức tạp hay can thiệp sâu vào hệ thống Blogger. Thay vào đó, nó tôn trọng và tận dụng tối đa cấu trúc chuẩn của nền tảng này thông qua Google Layouts Version 3 (được khai báo trong thẻ <html> với b:layoutsversion='3').

Layouts Version 3 mang lại những lợi ích to lớn:

Quản Lý Widget Linh Hoạt: Người dùng có thể kéo thả, thêm/xóa các tiện ích (<b:widget>) một cách trực quan trong trang Bố cục của Blogger mà không cần động đến mã XML. Cấu trúc phần <b:section> và <b:widget> trong file rõ ràng, cho phép tùy biến vô hạn.
Hỗ Trợ Đầy Đủ Các Widget Gốc: Theme được thiết kế để hiển thị hoàn hảo mọi widget mặc định của Blogger, từ Blog, FeaturedPost, PopularPosts, Label, Profile đến ContactForm. Mỗi widget đều có bộ <b:includable> được tùy chỉnh để phù hợp với phong cách Neumorphism, đảm bảo tính đồng bộ tuyệt đối.
Tốc Độ và Hiệu Suất: Cấu trúc sạch sẽ, loại bỏ mã thừa, cùng với việc sử dụng hệ thống lưới linh hoạt (flexbox) và các lớp tiện ích kiểu Tailwind CSS được viết tay (container, flex, rounded-xl,...) giúp trang tải nhanh chóng. Điều này không chỉ tốt cho người dùng mà còn là yếu tố SEO quan trọng.

Một ví dụ về tính tối ưu là cách theme xử lý ảnh đại diện bài viết. Trong widget Blog1, code kiểm tra tuần tự: ưu tiên featuredImage, sau đó đến thumbnailUrl, và cuối cùng mới hiển thị một placeholder SVG nếu không có ảnh. Điều này đảm bảo trải nghiệm hình ảnh luôn tốt nhất. Hơn nữa, trong phần Custom Label Posts Section (một tính năng độc đáo của theme), có logic JavaScript thông minh để tối ưu hóa đường dẫn ảnh từ các nguồn Blogger và Google Photos, đảm bảo ảnh luôn có chất lượng cao (/s1600/).

Tinh thần mã nguồn mở thúc đẩy sự sáng tạo và quyền tự chủ. Opsoso Neumorphism được đóng gói với hàng loạt tính năng cho phép người dùng, dù ít hay nhiều kinh nghiệm kỹ thuật, đều có thể làm chủ blog của mình.

Thiết Kế Đáp Ứng Toàn Diện (Responsive Design): Sử dụng các media query (@media), giao diện tự động thích ứng hoàn hảo từ desktop đến mobile. Các lớp sm:, md:, lg: trong CSS cho phép kiểm soát chi tiết cách hiển thị trên các kích thước màn hình khác nhau.
Hỗ Trợ SEO Mạnh Mẽ: Theme tích hợp đầy đủ thẻ <meta> cho Open Graph và Twitter Cards, cũng như dữ liệu cấu trúc Schema.org (JSON-LD) cho BlogPosting. Điều này giúp bài viết hiển thị đẹp mắt và giàu thông tin khi được chia sẻ lên mạng xã hội, đồng thời giúp công cụ tìm kiếm hiểu rõ cấu trúc nội dung.
Hệ Thống Menu Đa Cấp Thông Minh: Thay vì phụ thuộc vào các widget phức tạp, theme sử dụng một widget LinkList đơn giản kết hợp với JavaScript nhẹ nhàng để xây dựng menu đa cấp. Chỉ cần đặt tiền tố _ cho mục con và __ cho mục cháu, hệ thống sẽ tự động tổ chức thành menu dropdown với hiệu ứng chuyển động mượt mà.
Bảng Tùy Chỉnh Theme Trực Tuyến: Đây là một tính năng đặc biệt thể hiện tư duy lập trình hướng đến người dùng. Một nút bấm Neumorphism cố định ở góc màn hình cho phép mở bảng tùy chọn, nơi người dùng có thể thay đổi font chữ Heading và Body ngay lập tức. Lựa chọn được lưu trữ cục bộ (localStorage) để ghi nhớ cho các lần truy cập sau.
Slider Trang Chủ Động: Một widget LinkList khác được biến thành slider hình ảnh chuyên nghiệp với điều hướng, chấm chỉ mục và tự động chuyển slide. Dữ liệu (tiêu đề, link) được nhập một cách linh hoạt thông qua cú pháp Tiêu đề|URL trong tên link.

Việc phát hành Opsoso Neumorphism dưới dạng một tệp XML miễn phí, với toàn bộ mã nguồn có thể đọc được, là một hành động có chủ đích. Trong suốt sự nghiệp, tôi đã học được vô số điều từ những dự án mã nguồn mở của người khác – từ một snippet CSS nhỏ đến cả một framework lớn. Đây là cách tôi “trả nợ” cho cộng đồng.

Mã nguồn mở mang lại sự minh bạch. Bất kỳ ai cũng có thể kiểm tra code, đảm bảo không có gì độc hại hay theo dõi ẩn. Nó trao quyền kiểm soát. Nếu bạn muốn thay đổi màu sắc, điều chỉnh bóng, hay thêm một tính năng riêng, bạn hoàn toàn có thể làm được. File XML này chính là điểm bắt đầu. Nó thúc đẩy học hỏi và sáng tạo. Một blogger mới bắt đầu có thể nghiên cứu cấu trúc này để hiểu cách một theme Blogger hoạt động. Một developer khác có thể fork nó, cải tiến và tạo ra một biến thể của riêng họ, tiếp tục chu kỳ đóng góp.

Opsoso Neumorphism không đơn thuần là một “lớp áo” đẹp cho blog. Nó là sự kết tinh của một tầm nhìn thiết kế hiện đại (Neumorphism), được xây dựng trên một nền tảng kỹ thuật vững chắc (Blogger Layouts V3), và được trao tặng với tinh thần cộng tác của mã nguồn mở. Nó chứng minh rằng cái đẹp và chức năng có thể song hành, rằng sự tinh tế trong trải nghiệm có thể đạt được ngay cả trên một nền tảng miễn phí, và quan trọng nhất, rằng kiến thức khi được chia sẻ sẽ nhân lên giá trị.

Tôi hy vọng theme này sẽ không chỉ giúp các blogger có một không gian trực tuyến ấn tượng hơn, mà còn truyền cảm hứng cho những người khác trong cộng đồng mã nguồn mở tiếp tục sáng tạo, chia sẻ và cùng nhau xây dựng một hệ sinh thái Internet phong phú, đa dạng và dễ tiếp cận cho tất cả mọi người. Hãy tải về, cài đặt, tùy biến, và nếu bạn cảm thấy hữu ích, hãy chia sẻ lại hành trình của bạn. Bởi vì, như tinh thần mã nguồn mở vẫn luôn nhắc nhở chúng ta: “Đứng trên vai những người khổng lồ, và trở thành bệ đỡ cho những người tiếp theo.”

Demo và Tải về

Bạn có thể trải nghiệm trực tiếp sự mượt mà của giao diện này tại đây hoặc tại đây.

Theme được chia sẻ hoàn toàn miễn phí dưới dạng tệp .xml. Đây là món quà dành cho những ai đang tìm kiếm một không gian viết lách hiện đại, phá cách nhưng vẫn giữ được sự tinh tế và chuyên nghiệp.

Với Opsoso Neumorphism, blog của bạn không chỉ là nơi chia sẻ thông tin, mà còn là một tác phẩm nghệ thuật kỹ thuật số. Hãy tải về, trải nghiệm và cảm nhận sự khác biệt mà phong cách thiết kế này mang lại!

Hướng dẫn sử dụng

1. Giới thiệu

Hướng dẫn này sẽ giúp bạn từng bước cài đặt, cấu hình và tùy chỉnh theme để blog của bạn có một diện mạo chuyên nghiệp và thu hút.

2. Yêu cầu hệ thống

Một tài khoản Blogger (Blogspot) đã kích hoạt.
Quyền truy cập vào mục Theme (Chủ đề) trong bảng điều khiển Blogger.
Kiến thức cơ bản về cách thêm, xóa widget trong Blogger (không bắt buộc nhưng sẽ hữu ích).

3. Cài đặt Theme

Bước 1: Tải file theme

Bạn đã có file opsoso_neumorphism.xml. Hãy lưu file này vào máy tính.

Bước 2: Vào trang quản lý Blogger

Đăng nhập vào tài khoản Blogger của bạn, chọn blog muốn cài đặt theme.

Bước 3: Sao lưu theme hiện tại (khuyến nghị)

Trước khi thay đổi, nên sao lưu theme cũ:

Vào Theme (Chủ đề) → Nhấn vào nút Sao lưu / Khôi phục (Backup / Restore) → Chọn Tải xuống chủ đề đầy đủ (Download full theme). Lưu file này để dự phòng.

Bước 4: Tải lên theme mới

Trong cùng mục Theme, nhấn nút Sao lưu / Khôi phục → Chọn Chọn tệp (Choose file) và chọn file opsoso_neumorphism.xml từ máy tính.
Nhấn Tải lên (Upload).

Sau khi tải lên thành công, theme sẽ tự động áp dụng. Bạn có thể xem trước blog để kiểm tra.

4. Cấu hình chung và các biến màu sắc

Theme sử dụng các biến CSS để bạn dễ dàng tùy chỉnh màu sắc và font chữ thông qua giao diện Blogger.

4.1. Thay đổi màu sắc chủ đạo

Theme có các biến màu được định nghĩa trong phần <b:skin>. Bạn có thể thay đổi chúng bằng cách vào Theme → Tùy chỉnh (Customize) → Nâng cao (Advanced) → Thêm CSS (nếu muốn nhập tay), hoặc đơn giản hơn là sử dụng bảng Theme Customizer (sẽ hướng dẫn ở phần 8).

Các biến chính:

--bg-color: Màu nền tổng thể (mặc định: #e2e8f0).
--text-color: Màu chữ (mặc định: #334155).
--shadow-light: Màu sáng cho đổ bóng (mặc định: #ffffff).
--shadow-dark: Màu tối cho đổ bóng (mặc định: #a3b1c6).
--primary-color: Màu chính dùng cho các nút, liên kết (mặc định: #4f46e5).

4.2. Thay đổi font chữ

Theme hỗ trợ hai font chính: font tiêu đề (Heading) và font nội dung (Body). Các font được nhúng từ Google Fonts:

Heading: Poppins, Oswald, Playfair Display, Roboto Slab, Lobster.
Body: Lato, Roboto, Merriweather, Open Sans, Noto Sans.

Bạn có thể thay đổi font qua bảng Theme Customizer (biểu tượng bánh răng ở góc dưới bên phải màn hình).

4.3. Các lớp CSS tiện ích

Theme định nghĩa nhiều lớp CSS dạng utility (giống Tailwind CSS) để bạn sử dụng khi viết bài hoặc tùy chỉnh. Ví dụ:

neo-shadow: Đổ bóng lớn.
neo-shadow-sm: Đổ bóng nhỏ.
neo-shadow-inset: Đổ bóng nội (inset).
Các lớp spacing: p-4 (padding 1rem), mt-8 (margin-top 2rem), flex, items-center, v.v.
Các lớp typography: text-lg, font-bold, tracking-wider.

Bạn có thể xem đầy đủ trong phần <b:skin> của file XML.

5. Quản lý Menu (Navigation)

Menu trong theme được xây dựng thông qua widget LinkList với tên "Menu Management" (ID: LinkList10). Đây là menu chính hiển thị ở header.

5.1. Cấu trúc menu cơ bản

Vào Bố cục (Layout) → Tìm widget "Menu Management" (thường nằm trong phần Header). Nhấn Chỉnh sửa (Edit).

Bạn sẽ thấy danh sách các liên kết với cấu trúc:

Tên (Text): Tên hiển thị của menu.
Địa chỉ liên kết (Link): URL đích.

Ví dụ:

Home        | /
Menu Item 1 | #
_Submenu Level 1 | #
__Submenu Level 2 | #

5.2. Tạo menu con (dropdown)

Theme hỗ trợ menu đa cấp dựa vào dấu gạch dưới _ ở đầu tên menu:

Một gạch dưới (_Tên menu): Menu con cấp 1.
Hai gạch dưới (__Tên menu): Menu con cấp 2 (cháu).

Quy tắc:

Menu cha phải được đặt ngay trước các menu con của nó trong danh sách.
Không được bỏ trống hoặc có khoảng trắng trước dấu gạch dưới.

Ví dụ thực tế:
Giả sử bạn muốn có menu:

Trang chủ
Sản phẩm
- Điện thoại
- Máy tính bảng
  - iPad
  - Samsung Tab
Liên hệ

Bạn sẽ nhập như sau trong widget LinkList:

Trang chủ          | /
Sản phẩm           | #
_Điện thoại        | /search/label/Điện thoại
_Máy tính bảng     | #
__iPad             | /search/label/iPad
__Samsung Tab      | /search/label/Samsung Tab
Liên hệ            | /p/lien-he.html

Lưu ý: Các dấu gạch dưới sẽ tự động được loại bỏ khi hiển thị menu nhờ JavaScript tích hợp.

5.3. Menu biểu tượng mạng xã hội / liên hệ

Widget "Mail & Info Management" (ID: LinkList11) dùng để hiển thị các biểu tượng liên hệ (Mail, Phone, v.v.). Theme tự động nhận diện tên "Mail", "Phone" để hiển thị icon tương ứng. Bạn có thể thêm các mục khác, nhưng sẽ hiển thị dạng text nếu không có icon.

6. Sử dụng Slider trên trang chủ

Slider chỉ hiển thị trên trang chủ (homepage) và được quản lý qua widget "Homepage Slider" (ID: LinkList12).

6.1. Cấu hình slider

Vào Bố cục → Tìm widget "Homepage Slider" (thường nằm dưới header) → Nhấn Chỉnh sửa.

Widget này sử dụng danh sách liên kết, nhưng có cách hiểu đặc biệt:

Tên (Text): Tiêu đề của slide, có thể kèm theo link (phân cách bằng dấu |). Ví dụ: Công nghệ mới 2025|https://example.com.
Địa chỉ liên kết (Link): Đường dẫn ảnh (image URL). Bạn nên dùng ảnh chất lượng cao, kích thước tối thiểu 1200x600px.

Ví dụ:

Slide 1|https://google.com    | https://images.unsplash.com/photo-1
Slide 2                         | https://images.unsplash.com/photo-2

Nếu không có | trong tiêu đề, nút "Xem chi tiết" sẽ không có link (hoặc link mặc định #).

6.2. Tùy chỉnh hiệu ứng

Slider tự động chuyển ảnh sau mỗi 5 giây, có nút điều hướng và dấu chấm tròn. Bạn không cần cấu hình thêm.

7. Hiển thị bài viết theo nhãn (Label Posts)

Theme có một widget đặc biệt ở trang chủ: HTML1 với tiêu đề "Thông báo" (bạn có thể đổi tên). Widget này cho phép hiển thị bài viết thuộc một nhãn cụ thể.

7.1. Cách thiết lập

Vào Bố cục → Tìm widget HTML1 (có thể nằm trong phần "Custom Label Posts Section").
Nhấn Chỉnh sửa.
Trong ô Nội dung (Content), nhập tên nhãn bạn muốn hiển thị. Ví dụ: tin-cong-nghe.
Lưu lại.

Widget sẽ tự động tìm và hiển thị bài viết mới nhất (mặc định 1 bài) thuộc nhãn đó. Giao diện hiển thị dạng card với ảnh, tiêu đề, mô tả, ngày tháng, và nút đọc tiếp.

7.2. Tùy chỉnh số lượng bài viết

Hiện tại, mã JavaScript trong widget cứng max-results=1. Nếu muốn hiển thị nhiều hơn, bạn cần sửa lại file XML:

Tìm đoạn ?alt=json&max-results=1 trong widget HTML1.
Đổi 1 thành số lượng mong muốn (ví dụ 3).
Lưu theme.

7.3. Ghi chú

Nếu nhãn không tồn tại hoặc không có bài viết, widget sẽ hiển thị thông báo phù hợp.
Ảnh được tối ưu kích thước từ Blogger và YouTube.

8. Tùy chỉnh giao diện với Theme Customizer

Theme tích hợp một bảng tùy chỉnh (Theme Customizer) cho phép bạn thay đổi font chữ ngay trên blog mà không cần vào lại phần thiết lập.

8.1. Sử dụng Customizer

Nhìn vào góc dưới bên phải màn hình, bạn sẽ thấy một nút tròn có biểu tượng bánh răng.
Nhấn vào nút đó để mở bảng Customize Theme.
Trong bảng, bạn có thể chọn font cho tiêu đề (Heading) và font cho nội dung (Body) từ dropdown.
Thay đổi sẽ áp dụng ngay lập tức và được lưu vào localStorage của trình duyệt, nghĩa là khi bạn quay lại blog sau, lựa chọn vẫn còn.

8.2. Giới hạn

Customizer chỉ ảnh hưởng đến font chữ. Nếu muốn thay đổi màu sắc, bạn vẫn phải vào Theme → Tùy chỉnh → Nâng cao → Thêm CSS để ghi đè biến CSS. Ví dụ:

:root {
  --primary-color: #ff5722;
  --bg-color: #f0f0f0;
}

9. Các Widget Sidebar

Sidebar bên phải (hoặc bên dưới trên mobile) chứa nhiều widget hữu ích. Dưới đây là hướng dẫn sử dụng từng cái.

9.1. Bài đăng nổi bật (FeaturedPost1)

Widget này hiển thị một bài viết nổi bật theo phong cách đặc biệt (ảnh lớn, overlay, hiệu ứng hover).

Cách chọn bài viết: Vào Bố cục → Chỉnh sửa widget "Bài đăng nổi bật".
Trong phần cài đặt, bạn có thể chọn Sử dụng bài viết gần đây nhất (Use most recent post) hoặc nhập ID bài viết cụ thể.
Nếu muốn chọn bài viết cố định, hãy lấy ID bài viết từ URL khi chỉnh sửa bài (ví dụ: bài viết có URL .../2025/02/bai-viet.html?m=1 thì ID thường nằm trong phần cài đặt bài viết, hoặc dùng công cụ như Blogger ID Finder).

9.2. Hình ảnh (Image1)

Widget hiển thị một hình ảnh tùy ý (có thể chèn link).

Bạn có thể tải ảnh lên hoặc nhập URL ảnh từ bên ngoài.
Nên dùng ảnh có tỷ lệ phù hợp (ví dụ 16:9) để hiển thị đẹp.

9.3. Liên hệ với tôi (ContactForm2)

Đây là form liên hệ mặc định của Blogger, được tùy biến giao diện theo phong cách Neumorphism.

Không cần cấu hình gì thêm, nó tự động gửi email đến địa chỉ email của tài khoản Blogger (phải được xác thực).
Người dùng điền tên, email, tin nhắn và nhấn gửi.

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

Hiển thị danh sách bài viết được xem nhiều nhất (dựa trên thống kê của Blogger).

Bạn có thể cài đặt số lượng bài viết (mặc định 5) và khoảng thời gian (tất cả thời gian, 30 ngày qua, v.v.) trong phần chỉnh sửa widget.
Theme hiển thị dạng danh sách đánh số thứ tự.

9.5. Tìm kiếm bài viết (BlogSearch1)

Ô tìm kiếm với giao diện Neumorphism. Khi nhập từ khóa, nó sẽ chuyển hướng đến trang kết quả tìm kiếm của Blogger.

9.6. Người sở hữu (Profile1)

Hiển thị thông tin tác giả blog (avatar, tên, tiểu sử, vị trí).

Thông tin này được lấy từ hồ sơ Google của bạn. Bạn có thể chỉnh sửa trong phần Cài đặt → Hồ sơ người dùng.
Widget sẽ hiển thị ảnh đại diện, tên, vị trí (nếu có) và phần "Giới thiệu về tôi".

9.7. Khám phá chủ đề (Label1)

Hiển thị các nhãn (label) dưới dạng đám mây (cloud) hoặc danh sách.

Trong cài đặt widget, bạn có thể chọn kiểu hiển thị: Cloud hoặc List.
Có thể hiển thị số lượng bài viết bên cạnh mỗi nhãn.

10. Tối ưu SEO

Theme đã tích hợp sẵn các thẻ meta quan trọng và dữ liệu có cấu trúc (Schema.org) để hỗ trợ SEO tốt hơn.

10.1. Open Graph và Twitter Card

Trong phần <head>, bạn sẽ thấy các thẻ:

og:title, og:url, og:image cho Facebook, LinkedIn.
twitter:card, twitter:title, twitter:image cho Twitter.
Các thẻ này tự động lấy thông tin từ bài viết (tiêu đề, ảnh đại diện, mô tả) nên bạn không cần làm gì thêm.

10.2. JSON-LD (Schema.org)

Đối với trang bài viết, theme chèn một đoạn script JSON-LD khai báo BlogPosting với các thuộc tính: headline, description, image, datePublished, dateModified, author, publisher. Điều này giúp Google hiểu rõ nội dung và hiển thị rich snippet trên kết quả tìm kiếm.

10.3. Canonical URL

Theme có script nhỏ để loại bỏ tham số ?m=1 khỏi URL, giúp tránh nội dung trùng lặp.

11. Khắc phục sự cố thường gặp

11.1. Menu không hiển thị đúng cấp

Kiểm tra lại danh sách liên kết trong Menu Management xem có dấu gạch dưới đúng cấu trúc không. Đảm bảo menu cha nằm trước menu con.
Nếu menu vẫn không thành dropdown, thử làm mới cache trình duyệt hoặc kiểm tra bảng điều khiển (Console) xem có lỗi JavaScript không.

11.2. Slider không chạy

Đảm bảo widget Homepage Slider có ít nhất một mục.
Kiểm tra URL ảnh có hoạt động không (có thể mở trực tiếp trên trình duyệt).
Nếu slider dừng sau vài giây, có thể do script bị xung đột. Hãy thử tắt các widget không cần thiết.

11.3. Bài viết theo nhãn không hiển thị

Kiểm tra tên nhãn trong widget HTML1 phải chính xác (phân biệt hoa thường, dấu cách). Ví dụ: "Tin công nghệ" khác "tin-cong-nghe".
Đảm bảo có bài viết thuộc nhãn đó đã được xuất bản.
Nếu vẫn không được, kiểm tra bảng điều khiển (Console) để xem lỗi fetch feed.

11.4. Theme Customizer không lưu lựa chọn

Tính năng này dùng localStorage, nên nếu trình duyệt ở chế độ ẩn danh (incognito) hoặc chặn localStorage, nó sẽ không hoạt động.
Thử dùng trình duyệt khác hoặc bỏ chặn.

11.5. Giao diện bị vỡ trên mobile

Theme đã được thiết kế responsive, nhưng nếu bạn thêm nội dung quá rộng (ảnh, bảng) có thể làm vỡ layout. Hãy dùng các lớp CSS có sẵn như overflow-x-auto cho bảng, hoặc dùng ảnh có kích thước phù hợp.

Nếu bạn gặp bất kỳ vấn đề gì trong quá trình sử dụng, hãy để lại bình luận trên blog Opsoso.net hoặc liên hệ trực tiếp để được hỗ trợ.

MENU

Theme Blogger miễn phí đầy đủ chức năng: Opsoso Neumorphism

Mục lục bài viết

Demo và Tải về

Hướng dẫn sử dụng

1. Giới thiệu

2. Yêu cầu hệ thống

3. Cài đặt Theme

4. Cấu hình chung và các biến màu sắc

5. Quản lý Menu (Navigation)

6. Sử dụng Slider trên trang chủ

7. Hiển thị bài viết theo nhãn (Label Posts)

8. Tùy chỉnh giao diện với Theme Customizer

9. Các Widget Sidebar

10. Tối ưu SEO

11. Khắc phục sự cố thường gặp

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

Về chúng tôi

LIÊN HỆ

CHÍNH SÁCH BẢO MẬT

MENU

Mục lục bài viết

Demo và Tải về

Hướng dẫn sử dụng

1. Giới thiệu

2. Yêu cầu hệ thống

3. Cài đặt Theme

4. Cấu hình chung và các biến màu sắc

5. Quản lý Menu (Navigation)

6. Sử dụng Slider trên trang chủ

7. Hiển thị bài viết theo nhãn (Label Posts)

8. Tùy chỉnh giao diện với Theme Customizer

9. Các Widget Sidebar

10. Tối ưu SEO

11. Khắc phục sự cố thường gặp

Bài viết liên quan

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