Opsoso ValueCreation - Mẫu template miễn phí cho doanh nghiệp / nhà sản xuất sản phẩm

Tôi là nhà phát triển đứng sau theme opsoso_ValueCreation.xml dành cho Blogger. Hãy cùng tôi mổ xẻ từng lớp da – thịt – xương của theme để bạn không chỉ biết “chỉnh sửa” mà còn hiểu “tại sao lại sửa được như vậy”.

Theme ValueCreation được sinh ra với mục tiêu: càng ít đụng đến mã nguồn càng tốt. Chính vì thế, tôi đã đóng gói toàn bộ nội dung trang chủ vào 6 tiện ích HTML riêng biệt:

Widget ID	Vị trí	Chức năng
`HTML1`	Hero Section	Ảnh nền, tiêu đề, mô tả, nút CTA
`HTML2`	About Section	Giới thiệu công ty, hình ảnh, số liệu
`HTML6`	Product Intro	Tiêu đề và mô tả cho phần sản phẩm
`HTML3`	Social Proof	Danh sách đối tác
`HTML4`	Contact	Form liên hệ, thông tin văn phòng
`HTML5`	Footer Brand	Dòng chữ thương hiệu và slogan

Tất cả đều là widget kiểu HTML/JavaScript thuần túy, nội dung nằm trong thẻ <b:widget-setting name='content'> và được bao bọc bởi CDATA. Nghĩa là: bạn vào Bố cục → nhấn “Chỉnh sửa” ở tiện ích tương ứng → sửa nội dung trong ô “Nội dung” → lưu lại. Vậy là xong!

Hướng dẫn tinh chỉnh từng khu vực – Không cần biết code!

🟦 Hero Section (HTML1)

Đây là ấn tượng đầu tiên. Mặc định, tôi chọn ảnh văn phòng hiện đại từ Unsplash. Bạn muốn đổi ảnh khác?
Cách làm: Sao chép URL ảnh mới, tìm dòng <img src="..."> và dán đè lên URL cũ.
Muốn đổi tiêu đề “Kiến tạo Giá trị Bền vững & Uy tín”? Cứ gõ chữ mới vào giữa thẻ <h1>.
Thay nút “Khám phá sản phẩm” thành “Xem ngay”? Sửa text và đường dẫn trong thuộc tính href.

💡 Mẹo nâng cao: Nếu bạn thích video làm nền, hãy thay toàn bộ <div class="hero-media"> bằng thẻ <video autoplay loop muted>.

🟧 About Section (HTML2)

Phần này gồm ảnh bên trái, nội dung bên phải, và hai con số thống kê.

Đổi ảnh đội nhóm: Tìm <img src="..."> trong .about-img.
Sửa số liệu: 500+ đối tác, 99% hài lòng – bạn có thể nâng lên 1000+, 100% tùy ý.
Thêm dòng giới thiệu: Muốn kể dài hơn? Cứ thêm <p> mới bên dưới .about-desc.

Lưu ý: Nếu muốn ảnh nằm phải, chữ trái, hãy hoán đổi thứ tự hai <div> trong .about-flex.

🟩 Product Intro (HTML6)

Tiện ích nhỏ này chỉ chứa tiêu đề “Sản phẩm nổi bật” và mô tả.
Bạn có thể đổi thành “Dịch vụ của chúng tôi” hoặc “Dự án tiêu biểu”.
Thậm chí, bạn có thể thêm một nút “Xem tất cả” bằng cách chèn <a href="..."> ngay sau </p>.

🟨 Social Proof (HTML3)

Bốn cái tên Microsoft, Intel, Apple, Nvidia chỉ là ví dụ. Hãy thay bằng đối tác thật của bạn.
Bạn cũng có thể tăng số lượng brand-item lên 6, 8, tùy thích – CSS grid sẽ tự động chia cột.
Muốn chèn logo bằng hình ảnh? Thay chữ bằng <img src="logo.png"> và chỉnh CSS bỏ border.

🟪 Contact Section (HTML4)

Đây là phần dễ “phá cách” nhất.

Thông tin văn phòng: Sửa địa chỉ, điện thoại, email trong các <span>.
Form liên hệ: Theme hiện dùng action="#", nghĩa là chưa gửi đi đâu cả. Để form hoạt động, bạn cần tích hợp Google Form, hoặc thay action bằng URL xử lý của dịch vụ thứ ba.
Màu sắc: Nếu muốn đổi màu nền xanh thành màu khác, hãy sửa thuộc tính background của .contact-info trong CSS – nhưng thực tế bạn không cần vào <b:skin>, chỉ cần thêm style='background: #yourcolor;' vào thẻ <div class='contact-info'>.

🟫 Footer Brand (HTML5)

Tiện ích này vừa hiển thị logo, vừa hiển thị dòng chữ phụ.
Dòng chữ phụ lấy từ trường Nội dung của widget. Bạn chỉ việc vào chỉnh sửa và gõ bất cứ thông điệp nào bạn muốn.

Làm chủ menu đa cấp – Chỉ với dấu gạch dưới

Menu là nỗi ám ảnh của nhiều người dùng Blogger vì phải can thiệp JavaScript. Với theme này, bạn không cần viết một dòng script nào. Hãy làm theo hướng dẫn sau:

Vào Bố cục → Chỉnh sửa tiện ích “Menu”.
Trong danh sách link, bạn thêm các mục với quy tắc đặt tên:
- Sản phẩm → mục cha.
- _Điện thoại → menu con (cấp 2) của mục trước đó.
- __iPhone → menu cháu (cấp 3) của mục _Điện thoại.
Lưu lại. JavaScript phía dưới sẽ tự động xây dựng cây thả xuống.

Giải thích kỹ thuật: Script lặp qua từng <li>, đọc text. Nếu bắt đầu bằng _, nó sẽ được chuyển vào dropdown của mục cha gần nhất. Dấu __ cho biết đó là cấp 3. Tất cả đều được CSS xử lý hover, animation mượt mà.

CSS – “Cởi trói” sức sáng tạo bằng biến và class tiện ích

Theme sử dụng biến CSS tập trung ngay đầu <b:skin>:

:root {
  --primary: #1e3a8a;
  --accent: #ca8a04;
  --bg-light: #f9fafb;
  --text-main: #111827;
  --text-muted: #4b5563;
  --white: #ffffff;
  --transition: all 0.3s ease;
}

Muốn đổi từ xanh dương sang xanh lá? Chỉ cần sửa --primary: #1e3a8a; thành --primary: #0b5e42;. Toàn bộ giao diện (header, nút, footer) sẽ biến đổi ngay lập tức.

Ngoài ra, tôi còn định nghĩa một loạt class “tiện ích” kiểu Tailwind CSS:
.text-center, .text-muted, .text-accent, .font-bold, .uppercase, .bg-white, .bg-light...
Bạn có thể sử dụng chúng bất cứ đâu trong nội dung widget HTML mà không cần viết thêm CSS.

Ví dụ: Muốn một dòng chữ thật to, màu vàng, in đậm, canh giữa:
<h2 class='text-accent font-bold text-center' style='font-size:3rem;'>Chào mừng</h2>

JavaScript – Những hiệu ứng bạn có thể kiểm soát

Phần script ở cuối file làm ba nhiệm vụ:

🎬 Observer hiệu ứng cuộn

Tất cả phần tử có class fade-in sẽ mờ dần và trượt lên khi xuất hiện trong viewport.
Bạn muốn thêm hiệu ứng mới? Hãy tạo một class CSS khác, ví dụ slide-left, rồi sửa observer để thêm class visible.
Hoặc đơn giản hơn: copy đoạn fade-in và đổi tên, sau đó dùng trong widget HTML.

🧩 Menu tự động

Script này ẩn menu gốc (display:none), xử lý dấu _, __ và hiển thị lại.
Bạn có muốn menu luôn hiện từ đầu? Xóa dòng style='display:none' trong <ul class='nav-menu' ...>. Nhưng khi đó menu sẽ hiện ra với tất cả mục thô, chưa được phân cấp. Tôi khuyên bạn để nguyên.

📌 Header đổi màu khi cuộn

Khi scroll xuống quá 50px, header chuyển từ trong suốt sang trắng đục.
Bạn có thể điều chỉnh ngưỡng này bằng cách sửa số 50 trong window.scrollY > 50.
Muốn header luôn trong suốt? Xóa toàn bộ sự kiện scroll hoặc comment nó lại.

Thêm section mới mà không chạm vào code

Bạn muốn có thêm một phần “Đội ngũ lãnh đạo” hay “Chứng chỉ” mà theme chưa có?
Rất đơn giản:

Vào Bố cục, thêm tiện ích HTML/JavaScript mới ở vị trí mong muốn.

Đặt tiêu đề tùy ý, rồi trong phần Nội dung, hãy viết HTML với các class có sẵn:

<section class="section-padding bg-white">
  <div class="container text-center">
    <h3 class="section-title">Đội ngũ của chúng tôi</h3>
    <div class="product-grid" style="grid-template-columns: repeat(3,1fr);">
      <div class="product-card">...</div>
      <div class="product-card">...</div>
      <div class="product-card">...</div>
    </div>
  </div>
</section>

Lưu lại. Thế là bạn đã có một section mới hoành tráng, ăn khớp hoàn hảo với thiết kế tổng thể.

Tối ưu SEO và hiệu suất

Theme đã được trang bị thẻ meta động: tiêu đề trang, mô tả, og:title, og:description tự động lấy từ dữ liệu blog.
Bạn chỉ cần vào Cài đặt → Mô tả meta và nhập vài dòng giới thiệu.

Về hiệu suất:

Font Inter được tải qua preconnect và display=swap.
Ảnh trong bài viết được resize tự động bằng hàm resizeImage.
Lazy loading? Bạn có thể thêm thuộc tính loading='lazy' vào thẻ <img> trong các widget HTML.

Theme opsoso_ValueCreation.xml không phải là một bản thiết kế cứng nhắc. Nó là bộ khung thông minh với những mảnh ghép nội dung linh hoạt – các tiện ích HTML/JavaScript. Tôi đã cố gắng giảm thiểu tối đa rào cản kỹ thuật, nhưng đồng thời cũng mở ra vô số cánh cửa sáng tạo cho những ai muốn bước xa hơn.

Bạn có thể:

Thay ảnh, sửa chữ mà không cần mở trình soạn thảo code.
Tạo menu phức tạp chỉ bằng dấu gạch dưới.
Thay đổi màu sắc toàn cục bằng biến CSS.
Thêm section mới mà không sợ phá vỡ bố cục.

Tất cả chỉ bằng Bố cục và một chút tư duy “lego”.

Nếu bạn đã đọc đến đây, tôi tin bạn hoàn toàn đủ khả năng tự biến theme này thành một website độc nhất, phản ánh đúng thương hiệu và cá tính của bạn. Hãy bắt tay vào thử nghiệm ngay – và nếu có vướng mắc, bạn luôn có thể quay lại file XML, tìm kiếm từ khóa và tự mày mò. Đó mới là niềm vui thực sự của người làm web.

– Opsoso.net, người viết theme, cũng từng là người dùng không biết gì về code.

– Tải theme tại đây.

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

Mục lục

Giới thiệu tổng quan
Cài đặt theme
Cấu trúc theme và các thành phần chính
Tùy chỉnh Header và Menu
Tùy chỉnh Hero Section
Tùy chỉnh About Section
Tùy chỉnh Product Grid (Bài viết)
Tùy chỉnh Social Proof Section
Tùy chỉnh Contact Section
Tùy chỉnh Footer
Quản lý màu sắc và font chữ
Tạo menu dropdown đa cấp
Hiệu ứng và Animation
Xử lý sự cố thường gặp
Kết luận

1. Giới thiệu tổng quan

Theme này đặc biệt thích hợp để xây dựng landing page cho sản phẩm hoặc giới thiệu công ty với giao diện chuyên nghiệp, tốc độ tải nhanh nhờ tối ưu mã nguồn.

2. Cài đặt theme lên Blogspot

Bước 1: Tải file XML

Bạn đã có file opsoso_ValueCreation.xml. Hãy giữ file này cẩn thận.

Bước 2: Đăng nhập Blogger

Truy cập https://www.blogger.com và đăng nhập bằng tài khoản Google của bạn.

Bước 3: Vào phần Chủ đề (Theme)

Trên bảng điều khiển, chọn blog bạn muốn cài theme.
Ở menu bên trái, chọn Chủ đề (Theme).

Bước 4: Sao lưu theme cũ (nếu cần)

Nhấn vào nút Tùy chỉnh bên cạnh theme hiện tại, chọn Sao lưu hoặc bạn có thể tải theme hiện tại về bằng cách nhấn vào biểu tượng ba chấm và chọn Tải xuống.

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

Trong trang Chủ đề, nhấn vào nút mũi tên xuống (⬇️) ở góc trên bên phải (cạnh nút Tùy chỉnh).
Chọn Tải lên.
Chọn file opsoso_ValueCreation.xml từ máy tính của bạn.
Nhấn Tải lên.

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

Lưu ý: Nếu blog của bạn đã có dữ liệu (bài viết, nhãn, trang), theme mới sẽ tự động hiển thị chúng. Các widget (tiện ích) sẽ được sắp xếp lại theo bố cục của theme.

3. Cấu trúc theme và các thành phần chính

Theme được chia thành nhiều khu vực (section) riêng biệt, mỗi khu vực là một widget HTML hoặc widget Blog. Dưới đây là sơ đồ tổng quan:

+-------------------+
|      Header       |  (logo, menu, nút CTA)
+-------------------+
|   Hero Section    |  (chỉ hiển thị ở trang chủ)
+-------------------+
|   About Section   |
+-------------------+
| Product Grid      |  (danh sách bài viết dạng grid)
+-------------------+
| Social Proof      |  (chỉ trang chủ)
+-------------------+
|   Contact Form    |  (chỉ trang chủ)
+-------------------+
|      Footer       |
+-------------------+

Các widget được khai báo trong theme bằng thẻ <b:section> và <b:widget>. Bạn có thể dễ dàng thêm, sửa nội dung bằng cách vào Bố cục (Layout) trên Blogger.

Các widget quan trọng:

Header1: Hiển thị logo và tên blog.
LinkList1 (Menu): Quản lý menu chính.
LinkList3 (Header CTA): Nút kêu gọi hành động ở header.
HTML1 (Hero Section): Nội dung hero.
HTML2 (About Section): Nội dung giới thiệu.
Blog1 (Main Content): Hiển thị danh sách bài viết (dạng grid ở trang chủ, dạng đầy đủ ở trang bài viết).
HTML3 (Social Proof): Phần đối tác.
HTML4 (Contact Section): Form liên hệ.
HTML5 (Footer Logo): Thông tin thương hiệu ở footer.
LinkList2 (Footer Menu): Menu phụ ở footer.
LinkList4 (Footer Social): Các icon mạng xã hội.

4. Tùy chỉnh Header và Menu

4.1. Thay đổi Logo

Vào Bố cục (Layout).
Tìm widget Header (thường nằm ở trên cùng).
Nhấn Chỉnh sửa.
Bạn có thể thay đổi tiêu đề blog hoặc tải lên hình ảnh logo (nếu muốn dùng ảnh thay vì text). Theme hiện tại hiển thị logo dạng text với định dạng: OPSOSO. (dấu chấm màu vàng).

Nếu muốn dùng ảnh, trong phần chỉnh sửa, chọn Thay vì tiêu đề, hãy dùng ảnh và tải ảnh lên.

4.2. Tùy chỉnh menu chính

Menu chính được quản lý bởi widget LinkList1 (Menu). Để thêm/sửa mục menu:

Vào Bố cục > Tìm widget Menu (thường ở dưới logo) > Nhấn Chỉnh sửa.
Bạn sẽ thấy danh sách các liên kết. Mỗi liên kết có hai trường: Tên và Địa chỉ liên kết.
Bạn có thể thêm mới, xóa hoặc sắp xếp lại theo ý muốn.

Cách tạo menu cơ bản:

Ví dụ bạn muốn menu gồm: Trang chủ, Sản phẩm, Giới thiệu, Liên hệ.

Tên: Trang chủ - Địa chỉ: /
Tên: Sản phẩm - Địa chỉ: /p/san-pham.html (hoặc link trang tĩnh)
Tên: Giới thiệu - Địa chỉ: /p/gioi-thieu.html
Tên: Liên hệ - Địa chỉ: /p/lien-he.html

Lưu ý: Để tạo dropdown (menu thả xuống), bạn cần đặt tên đặc biệt. Xem hướng dẫn chi tiết ở phần menu dropdown.

4.3. Nút CTA (Call to Action) ở header

Nút "Hợp tác ngay" ở góc phải header được quản lý bởi widget LinkList3 (Header Button).

Vào Bố cục > chỉnh sửa widget này.
Bạn có thể thay đổi tên nút và link đích.
Ví dụ: muốn nút "Liên hệ ngay" dẫn đến trang liên hệ, sửa Tên thành "Liên hệ ngay", Địa chỉ thành "/p/lien-he.html".

5. Tùy chỉnh Hero Section (chỉ trang chủ)

Hero section là phần banner lớn đầu tiên, chỉ hiển thị trên trang chủ. Nội dung được lưu trong widget HTML1 (Hero Content).

Cách chỉnh sửa:

Vào Bố cục > tìm widget Hero Content > nhấn Chỉnh sửa.
Bạn sẽ thấy một khung HTML. Đây là nội dung của hero.

Ví dụ nội dung mặc định:

<section id="hero" class="hero">
    <div class="hero-media">
        <div class="hero-overlay"></div>
        <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2000" alt="Bureau"/>
    </div>
    
    <div class="container relative z-20">
        <div class="hero-content fade-in">
            <h1 class="hero-title">
                Kiến tạo Giá trị <br/><span>Bền vững & Uy tín</span>
            </h1>
            <p class="hero-desc">
                Chúng tôi cung cấp những giải pháp sản phẩm hàng đầu, đồng hành cùng sự phát triển vượt trội của doanh nghiệp bạn.
            </p>
            <div class="hero-btns">
                <a href="#products" class="btn-primary">Khám phá sản phẩm</a>
                <a href="#about" class="btn-secondary">Tìm hiểu thêm</a>
            </div>
        </div>
    </div>
</section>

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

Ảnh nền: Thay URL trong thẻ <img src="...">.
Tiêu đề: Sửa nội dung trong <h1>.
Mô tả: Sửa <p class="hero-desc">.
Nút bấm: Sửa text và link của hai nút.

Ví dụ tùy chỉnh cho một công ty công nghệ:

<h1 class="hero-title">
    Giải pháp số <br/><span>Cho tương lai</span>
</h1>
<p class="hero-desc">
    Chúng tôi mang đến những công nghệ tiên tiến nhất, giúp doanh nghiệp của bạn bứt phá.
</p>
<div class="hero-btns">
    <a href="#products" class="btn-primary">Xem giải pháp</a>
    <a href="#contact" class="btn-secondary">Liên hệ tư vấn</a>
</div>

6. Tùy chỉnh About Section

Phần giới thiệu nằm trong widget HTML2 (About Content). Nó có cấu trúc hai cột: ảnh và text.

Cách chỉnh sửa:

Vào Bố cục > chỉnh sửa widget About Content.
Bạn sẽ thấy mã HTML tương tự:

<section id="about" class="section-padding bg-white">
    <div class="container">
        <div class="about-flex">
            <div class="about-img fade-in">
                <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=1000" alt="Team"/>
            </div>
            <div class="about-text fade-in">
                <p class="about-label">Về OPSOSO</p>
                <h3 class="about-title">Xây dựng niềm tin từ <span class="text-accent">Sự tận tâm</span></h3>
                <p class="about-desc">
                    Với hơn 10 năm kinh nghiệm trong ngành, OPSOSO tự hào là đơn vị dẫn đầu...
                </p>
                <div class="stats-grid">
                    <div class="accent-card">
                        <h4>500+</h4>
                        <p>Đối tác lớn</p>
                    </div>
                    <div class="accent-card">
                        <h4>99%</h4>
                        <p>Hài lòng</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bạn có thể:

Thay ảnh: Đổi URL trong thẻ <img src="...">.
Sửa nhãn: Thay nội dung <p class="about-label">.
Sửa tiêu đề: Trong <h3>.
Sửa mô tả: Trong <p class="about-desc">.
Điều chỉnh số liệu thống kê: Sửa số và mô tả trong các thẻ <h4> và <p> bên trong .stats-grid.

Ví dụ cho một cửa hàng thời trang:

<p class="about-label">Về Fashion Store</p>
<h3 class="about-title">Phong cách <span class="text-accent">Đẳng cấp</span></h3>
<p class="about-desc">
    Chúng tôi tự hào mang đến những bộ sưu tập thời trang cao cấp, được thiết kế bởi các nhà tạo mốt hàng đầu.
</p>
<div class="stats-grid">
    <div class="accent-card">
        <h4>10000+</h4>
        <p>Khách hàng</p>
    </div>
    <div class="accent-card">
        <h4>500+</h4>
        <p>Mẫu mã</p>
    </div>
</div>

7. Tùy chỉnh Product Grid (danh sách bài viết)

Đây là phần quan trọng nhất, hiển thị các bài viết dưới dạng grid sản phẩm. Nó được quản lý bởi widget Blog1 (Main Content). Theme đã tùy chỉnh để hiển thị bài viết dạng card đẹp mắt.

7.1. Cách hoạt động

Ở trang chủ (data:view.isHomepage), các bài viết sẽ hiển thị dưới dạng grid (lưới) với ảnh đại diện, tiêu đề, đoạn trích và nút "Xem chi tiết".
Ở trang bài viết riêng lẻ, nội dung đầy đủ của bài viết sẽ hiển thị.

7.2. Tạo bài viết để hiển thị lên grid

Để có sản phẩm hiển thị, bạn cần tạo bài viết mới:

Vào Bài đăng > Bài đăng mới.
Nhập tiêu đề (ví dụ: "Áo sơ mi nam cao cấp").
Viết nội dung mô tả sản phẩm.
Quan trọng: Thêm ảnh đại diện bằng cách chèn ảnh vào bài viết. Ảnh đầu tiên trong bài viết sẽ được lấy làm ảnh đại diện. Nếu không có ảnh, theme sẽ dùng ảnh mặc định (từ Unsplash).
Xuất bản bài viết.

7.3. Tùy chỉnh tiêu đề phần sản phẩm

Phần tiêu đề "Sản phẩm nổi bật" nằm trong widget HTML6 (Product Section Header) ở trang chủ.

Vào Bố cục > chỉnh sửa widget Product Section Header.
Bạn có thể thay đổi tiêu đề và mô tả.

Ví dụ:

<div class="text-center" style="margin-bottom:4rem;">
    <h3 class="section-title">Dịch vụ của chúng tôi</h3>
    <p class="text-muted" style="max-width:640px; margin:0 auto;">Chúng tôi cung cấp đa dạng các dịch vụ chất lượng cao, đáp ứng mọi nhu cầu của bạn.</p>
</div>

7.4. Số lượng bài viết hiển thị

Mặc định, Blogger hiển thị số bài viết tùy theo cài đặt trong Cài đặt > Định dạng > Hiển thị tối đa. Bạn có thể thay đổi con số đó. Theme sẽ tự động chia grid.

8. Tùy chỉnh Social Proof Section

Phần này hiển thị logo các đối tác hoặc thương hiệu, chỉ xuất hiện trên trang chủ. Nó nằm trong widget HTML3 (Social Proof Content).

Cách chỉnh sửa:

Vào Bố cục > chỉnh sửa widget Social Proof Content.
Nội dung mặc định:

<section id="social-proof" class="social-section">
    <div class="container text-center">
        <h3 class="font-bold" style="font-size:2.25rem; margin-bottom:1rem;">Đối tác Tin cậy</h3>
        <p style="color:#d1d5db; font-size:1.1rem;">Chúng tôi đồng hành cùng những thương hiệu hàng đầu thế giới.</p>
        <div class="brand-grid">
            <div class="brand-item">Microsoft</div>
            <div class="brand-item">Intel</div>
            <div class="brand-item">Apple</div>
            <div class="brand-item">Nvidia</div>
        </div>
    </div>
</section>

Bạn có thể thay các thương hiệu bằng tên công ty của bạn, hoặc thay bằng logo ảnh. Ví dụ muốn hiển thị logo ảnh, bạn sửa:

<div class="brand-grid">
    <div class="brand-item"><img src="url-logo-1.png" alt="Logo 1" style="max-width:100px;"></div>
    <div class="brand-item"><img src="url-logo-2.png" alt="Logo 2"></div>
    ...
</div>

9. Tùy chỉnh Contact Section

Phần liên hệ với form và thông tin, chỉ hiển thị trên trang chủ. Nội dung trong widget HTML4 (Contact Content).

Cách chỉnh sửa:

Vào Bố cục > chỉnh sửa widget Contact Content.
Mã HTML khá dài, gồm hai phần: thông tin bên trái và form bên phải.

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

Thông tin công ty: địa chỉ, số điện thoại, email.
Form liên hệ: hiện tại form chỉ là mẫu, chưa có chức năng gửi mail thực sự. Để form hoạt động, bạn cần tích hợp Google Form hoặc dịch vụ form khác.

Ví dụ tùy chỉnh thông tin:

<div style="display:flex; align-items:center; gap:15px;">
    <span style="background:var(--accent); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;">📍</span>
    <span>456 Đường XYZ, Quận 2, TP. HCM</span>
</div>
<div style="display:flex; align-items:center; gap:15px;">
    <span style="background:var(--accent); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;">📞</span>
    <span>+84 987 654 321</span>
</div>

Nếu muốn form hoạt động thực sự, bạn có thể thay thẻ <form> bằng mã nhúng từ Google Form. Ví dụ:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf.../viewform?embedded=true" width="100%" height="600" frameborder="0" marginheight="0" marginwidth="0">Đang tải…</iframe>

10. Tùy chỉnh Footer

Footer gồm ba cột: logo + mô tả, menu phụ, và các icon mạng xã hội.

10.1. Logo và mô tả (widget HTML5)

Vào Bố cục > chỉnh sửa widget Footer Brand.
Nội dung text ở đây sẽ hiển thị dưới logo (ví dụ: "Xin chào! Mừng bạn đến với Opsoso.net").

Bạn có thể thay bằng mô tả ngắn về công ty.

10.2. Menu phụ (widget LinkList2)

Widget này chứa các liên kết phụ ở footer (thường là các trang chính sách, điều khoản).
Chỉnh sửa tương tự menu chính.

10.3. Social links (widget LinkList4)

Quản lý các icon mạng xã hội. Mỗi item là một icon với tên viết tắt (FB, LN, INS...).
Bạn có thể thay đổi tên và link. Tên sẽ hiển thị trong icon (có thể thay bằng icon font nếu muốn).

Để thay icon bằng Font Awesome, bạn cần nhúng thư viện và sửa code trong widget, nhưng theme hiện tại dùng text đơn giản. Nếu muốn nâng cấp, bạn có thể thêm thư viện icon và sửa class.

11. Quản lý màu sắc và font chữ

Theme sử dụ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 bằng cách chỉnh sửa các giá trị này.

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

Mở file XML, tìm đoạn :root trong <b:skin>:

:root {
    --primary: #1e3a8a; /* Màu xanh chủ đạo (đầu trang, nút) */
    --accent: #ca8a04;  /* Màu vàng nhấn (span, nút primary) */
    --bg-light: #f9fafb; /* Màu nền sáng */
    --text-main: #111827; /* Màu chữ chính */
    --text-muted: #4b5563; /* Màu chữ phụ */
    --white: #ffffff;
    --transition: all 0.3s ease;
}

Bạn có thể thay đổi mã màu (hex) để phù hợp với thương hiệu của mình. Ví dụ muốn màu cam làm chủ đạo:

--primary: #c2410c;  /* cam đậm */
--accent: #f97316;   /* cam sáng */

11.2. Thay đổi font chữ

Theme dùng Google Fonts Inter. Nếu muốn đổi font, bạn cần:

Thay link import trong <head>: tìm dòng <link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap' rel='stylesheet'/> và thay Inter bằng font bạn muốn.
Sửa thuộc tính font-family trong body (cũng trong <b:skin>) thành tên font mới.

Ví dụ dùng font Roboto:

body {
    font-family: 'Roboto', sans-serif;
    ...
}

Và thay link import thành: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.

12. Tạo menu dropdown đa cấp

Theme hỗ trợ menu dropdown (thả xuống) lên đến 3 cấp. Cách tạo dựa trên quy tắc đặt tên menu trong widget LinkList1.

12.1. Nguyên tắc đặt tên

Menu cấp 1: Tên bình thường (không có dấu gạch dưới).
Menu cấp 2 (dropdown): Thêm dấu gạch dưới _ ở đầu tên.
Menu cấp 3 (sub dropdown): Thêm hai dấu gạch dưới __ ở đầu tên.

12.2. Ví dụ cụ thể

Giả sử bạn muốn menu như sau:

Trang chủ
Sản phẩm
- Điện thoại
  - iPhone
  - Samsung
- Laptop
Liên hệ

Trong widget LinkList1, bạn cần tạo các mục theo thứ tự:

Tên hiển thị	Địa chỉ liên kết
Trang chủ	/
Sản phẩm	#
_Điện thoại	#
__iPhone	#
__Samsung	#
_Laptop	#
Liên hệ	/p/lien-he.html

Lưu ý:

Mục "Sản phẩm" là cấp 1, nó sẽ là menu cha. Các mục bắt đầu bằng _ sẽ nằm trong dropdown của mục cha trước đó.
Mục "Điện thoại" có một gạch dưới, nó sẽ là menu con cấp 2. Các mục bắt đầu bằng __ (iPhone, Samsung) sẽ nằm trong dropdown của mục "Điện thoại".
Sau khi hết mục con của "Điện thoại", ta lại có mục "_Laptop" (cấp 2) thuộc "Sản phẩm".

Quan trọng: Thứ tự các mục phải đúng: mục cha phải nằm trước các mục con của nó. JavaScript trong theme sẽ tự động xử lý và xây dựng cấu trúc dropdown.

12.3. Kiểm tra kết quả

Sau khi lưu widget, hãy xem trước blog. Di chuột vào menu "Sản phẩm" sẽ thấy dropdown, di chuột vào "Điện thoại" sẽ thấy sub dropdown.

13. Hiệu ứng và Animation

Theme có hai hiệu ứng chính:

13.1. Scroll animation (fade-in)

Các phần tử có class fade-in sẽ mờ dần và trượt lên khi xuất hiện trong viewport. JavaScript sẽ thêm class visible khi phần tử được nhìn thấy.

Class fade-in đã được thêm vào các phần tử quan trọng (hero content, about img, about text, product card).
Bạn có thể thêm class này vào bất kỳ phần tử nào khác trong widget HTML để tạo hiệu ứng tương tự.

Ví dụ:

<div class="fade-in">
    Nội dung của tôi sẽ xuất hiện với hiệu ứng.
</div>

13.2. Header thay đổi khi scroll

Khi cuộn trang xuống dưới 50px, header sẽ chuyển từ trong suốt sang nền trắng và đổ bóng đậm hơn. Điều này được xử lý bởi sự kiện scroll trong JavaScript ở cuối file.

Bạn có thể điều chỉnh ngưỡng scroll bằng cách sửa số 50 trong dòng:

if (window.scrollY > 50) { ... }

14. Xử lý sự cố thường gặp

14.1. Menu không hiển thị hoặc không dropdown

Kiểm tra lại tên các mục menu: có dùng đúng dấu gạch dưới _ và __ không? Lưu ý không có khoảng trắng trước dấu gạch dưới.
Đảm bảo widget LinkList1 có chứa ít nhất một mục.
Kiểm tra console trình duyệt (F12) xem có lỗi JavaScript không.

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

Ảnh đầu tiên trong bài viết sẽ được dùng làm ảnh đại diện. Nếu không có ảnh, theme dùng ảnh mặc định từ Unsplash.
Nếu bạn muốn thay ảnh mặc định, tìm dòng <img src='https://images.unsplash.com/...'/> trong widget Blog1 (phần b:else của b:if cond='data:post.featuredImage') và thay URL.

14.3. Các section không hiển thị trên trang chủ

Đảm bảo bạn đang xem trang chủ (homepage). Các section Hero, Social Proof, Contact chỉ hiển thị khi data:view.isHomepage = true.
Kiểm tra các widget này đã được thêm vào đúng section chưa? Vào Bố cục xem có widget nào bị thiếu không.

14.4. Lỗi hiển thị trên điện thoại

Theme đã được thiết kế responsive. Nếu có vấn đề, hãy kiểm tra lại viewport meta tag trong <head>:

<meta content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>

Nếu vẫn lỗi, có thể do nội dung bạn thêm (ảnh quá to, video) làm vỡ layout. Hãy thêm CSS tùy chỉnh để xử lý.

14.5. Muốn thay đổi khoảng cách, kích thước

Bạn có thể chỉnh sửa trực tiếp trong <b:skin>. Ví dụ muốn tăng padding của các section, tìm class .section-padding và sửa padding: 6rem 0; thành giá trị mong muốn.

Một số điểm nổi bật bạn nên khai thác:

Sử dụng menu dropdown đa cấp để tổ chức nội dung khoa học.
Tận dụng các section có sẵn để tạo landing page ấn tượng.
Thay đổi màu sắc qua biến CSS để có diện mạo mới mà không cần sửa nhiều.
Luôn sao lưu theme trước khi chỉnh sửa lớn.

Chúc bạn thành công xây dựng website chuyên nghiệp với theme này!

MENU

Opsoso ValueCreation - Mẫu template miễn phí cho doanh nghiệp / nhà sản xuất sản phẩm

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

Hướng dẫn tinh chỉnh từng khu vực – Không cần biết code!

🟦 Hero Section (HTML1)

🟧 About Section (HTML2)

🟩 Product Intro (HTML6)

🟨 Social Proof (HTML3)

🟪 Contact Section (HTML4)

🟫 Footer Brand (HTML5)

Làm chủ menu đa cấp – Chỉ với dấu gạch dưới

CSS – “Cởi trói” sức sáng tạo bằng biến và class tiện ích

JavaScript – Những hiệu ứng bạn có thể kiểm soát

🎬 Observer hiệu ứng cuộn

🧩 Menu tự động

📌 Header đổi màu khi cuộn

Thêm section mới mà không chạm vào code

Tối ưu SEO và hiệu suất

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

Mục lục

1. Giới thiệu tổng quan

2. Cài đặt theme lên Blogspot

3. Cấu trúc theme và các thành phần chính

4. Tùy chỉnh Header và Menu

5. Tùy chỉnh Hero Section (chỉ trang chủ)

6. Tùy chỉnh About Section

7. Tùy chỉnh Product Grid (danh sách bài viết)

8. Tùy chỉnh Social Proof Section

9. Tùy chỉnh Contact Section

10. Tùy chỉnh Footer

11. Quản lý màu sắc và font chữ

12. Tạo menu dropdown đa cấp

13. Hiệu ứng và Animation

14. Xử lý sự cố thường gặp

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

Hướng dẫn tinh chỉnh từng khu vực – Không cần biết code!

🟦 Hero Section (HTML1)

🟧 About Section (HTML2)

🟩 Product Intro (HTML6)

🟨 Social Proof (HTML3)

🟪 Contact Section (HTML4)

🟫 Footer Brand (HTML5)

Làm chủ menu đa cấp – Chỉ với dấu gạch dưới

CSS – “Cởi trói” sức sáng tạo bằng biến và class tiện ích

JavaScript – Những hiệu ứng bạn có thể kiểm soát

🎬 Observer hiệu ứng cuộn

🧩 Menu tự động

📌 Header đổi màu khi cuộn

Thêm section mới mà không chạm vào code

Tối ưu SEO và hiệu suất

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

Mục lục

1. Giới thiệu tổng quan

2. Cài đặt theme lên Blogspot

3. Cấu trúc theme và các thành phần chính

4. Tùy chỉnh Header và Menu

5. Tùy chỉnh Hero Section (chỉ trang chủ)

6. Tùy chỉnh About Section

7. Tùy chỉnh Product Grid (danh sách bài viết)

8. Tùy chỉnh Social Proof Section

9. Tùy chỉnh Contact Section

10. Tùy chỉnh Footer

11. Quản lý màu sắc và font chữ

12. Tạo menu dropdown đa cấp

13. Hiệu ứng và Animation

14. Xử lý sự cố thường gặp

Bài viết liên quan