Theme Blogspot: Opsoso cho doanh nghiệp

Xin chào cộng đồng mã nguồn mở và những người đam mê Blogger!

Tôi là Opsoso (opsoso.net), một nhà phát triển đã dành nhiều năm tâm huyết với nền tảng Blogspot/Blogger của Google. Hôm nay, tôi rất vui mừng được chia sẻ với các bạn một sản phẩm tâm huyết, được đóng gói trong file theme-congty.xml: Opsoso Enterprise Theme. Đây không chỉ là một giao diện thông thường, mà là một bộ giải pháp toàn diện được thiết kế để biến những hạn chế vốn có của Blogspot thành lợi thế chuyên nghiệp, giúp bất kỳ doanh nghiệp nào cũng có thể sở hữu một website ấn tượng, hiệu quả mà không cần ngân sách lớn cho hosting hay lập trình phức tạp.

Blogspot thường bị gắn mác là "nền tảng blog cá nhân" với các template đơn điệu, thiếu tính chuyên nghiệp. Opsoso Enterprise Theme được sinh ra để thay đổi hoàn toàn nhận định đó. Triết lý của tôi là:

Tận dụng tối đa nền tảng miễn phí, ổn định: Sử dụng hạ tầng của Google để có tốc độ tải nhanh, thời gian hoạt động (uptime) gần như tuyệt đối và không giới hạn băng thông.
Mang đến sự chuyên nghiệp đẳng cấp: Thiết kế không thua kém bất kỳ website doanh nghiệp nào được xây dựng trên WordPress hay các CMS trả phí.
Trao quyền kiểm soát cho người dùng: Cung cấp một template dễ cài đặt, dễ tùy chỉnh ngay trong giao diện kéo thả quen thuộc của Blogger, dù bạn không biết một dòng code.

File theme-congty.xml bạn đang có chính là hiện thân của triết lý đó. Hãy cùng tôi đi sâu vào phân tích những gì tôi đã xây dựng.

Template được xây dựng với cấu trúc HTML5 hiện đại và CSS3 mạnh mẽ, tập trung vào trải nghiệm người dùng (UX) và giao diện người dùng (UI).

Bố Cục Header Độc Đáo (header-wrapper-row): Thay vì thiết kế header và menu xếp chồng thông thường, tôi tách chúng thành hai cột (header-col-60 và navbar-col-40). Điều này cho phép logo và thông tin công ty chiếm ưu thế bên trái, trong khi menu điều hướng chính trở nên nổi bật và trang trọng ở bên phải. Trên desktop, menu được hiển thị như một thanh gradient sang trọng với hiệu ứng bo tròn và hover tinh tế, tạo cảm giác như một ứng dụng cao cấp.
Hệ Thống Điều Hướng Thông Minh (Navbar): Thanh menu (professional-navbar) được lập trình với khả năng responsive linh hoạt. Trên desktop, nó hiển thị đầy đủ. Trên mobile, nó chuyển thành menu "hamburger" tiêu chuẩn với hiệu ứng chuyển động mượt mà, đi kèm một lớp phủ (navbar-overlay) để tập trung trải nghiệm người dùng. JavaScript đi kèm nhẹ nhàng xử lý việc mở/đóng menu một cách hoàn hảo.
Cấu Trúc Nội Dung Linh Hoạt (main-container): Khu vực chính sử dụng CSS Grid với layout 1fr 300px, tạo ra một cột nội dung chính rộng rãi cho bài viết và một sidebar cố định 300px cho các widget phụ trợ. Trên mobile, layout này chuyển đổi mượt mà thành một cột duy nhất (grid-template-columns: 1fr), đảm bảo nội dung luôn dễ đọc.

Một điểm khác biệt lớn của theme này là trang chủ được thiết kế có chủ đích để chuyển đổi khách truy cập thành khách hàng tiềm năng, thay vì chỉ hiển thị danh sách bài viết.

Hero Section Nổi Bật: Một khu vực trực quan với hình nền gradient mạnh mẽ, tiêu đề lớn (font-size: 48px) và lời kêu gọi hành động (Call-to-Action) rõ ràng. Đây là nơi gây ấn tượng đầu tiên và truyền tải thông điệp cốt lõi của doanh nghiệp.
Services Section (Khu Vực Dịch Vụ): Được trình bày dưới dạng lưới card (services-grid) với 3 cột. Mỗi thẻ dịch vụ (service-card) có icon riêng biệt, tiêu đề và mô tả ngắn gọn, kèm hiệu ứng hover nâng lên (transform: translateY(-8px)) tạo cảm giác tương tác. Đây là nơi giới thiệu ngắn gọn những gì doanh nghiệp bạn làm tốt nhất.
Features Section (Tính Năng Nổi Bật): Một khu vực tập trung liệt kê các ưu điểm của công ty bạn hoặc chính template này (như Thiết kế Responsive, Hiệu suất cao, Bảo mật). Cách trình bày dạng bullet point này rất hiệu quả để xây dựng lòng tin.

Lưu ý quan trọng: Các section Hero, Services, Features này chỉ hiển thị trên trang chủ nhờ điều kiện <b:if cond='data:view.isHomepage'>. Điều này đảm bảo các trang bài viết riêng lẻ hay trang label vẫn giữ được bố cục tập trung vào nội dung.

Template tái định nghĩa hoàn toàn cách hiển thị bài viết trong widget Blog1.

Thẻ Bài Viết (.post): Mỗi bài viết được đặt trong một "card" với nền trắng, bóng đổ tinh tế, viền mỏng và góc bo. Hiệu ứng hover làm card nâng nhẹ lên, tạo cảm giác sống động.
Tiêu Đề Bài Viết (.post-title): Được thiết lập cỡ chữ 30px (tăng 25% so với thông thường), màu đen tuyền và font-weight đậm, giúp tiêu đề trở thành điểm nhấn đầu tiên, tối ưu cho SEO và thu hút sự chú ý.
Phân Tách Rõ Ràng: Các phần meta (ngày đăng), nội dung, label và nút "Đọc tiếp" được bố trí khoa học, giúp người đọc dễ dàng nắm bắt thông tin.

Thay vì sidebar đơn điệu, tôi đã thiết kế lại các widget thông dụng:

PopularPosts1 (Bài Viết Phổ Biến): Hiển thị dưới dạng danh sách có hình thu nhỏ (item-thumbnail). Nếu bài viết không có ảnh, một placeholder với logo "Opsoso" sẽ xuất hiện, đảm bảo tính thẩm mỹ đồng đều.
BlogSearch1 (Tìm Kiếm): Ô tìm kiếm được thiết kế với viền bo tròn và hiệu ứng focus rõ ràng.
LabelList (Chuyên Mục/Label): Các label không còn hiển thị dạng danh sách thông thường mà được chuyển thành các "badge" hoặc "tag" với nền sáng, có đếm số bài và hiệu ứng hover đổi màu gradient đẹp mắt. Đây là một cải tiến lớn về mặt hình ảnh.

Footer (.footer) được chia thành 3 cột (footer-column) linh hoạt, chứa các widget Text, LinkList và HTML. Nó cung cấp đầy đủ thông tin liên hệ, liên kết hữu ích và bản quyền, tạo nên sự tin cậy và hoàn chỉnh cho website. Phần footer-bottom tách biệt với màu nền đậm hơn để nhấn mạnh thông điệp bản quyền.

Tối Ưu Kỹ Thuật & Trải Nghiệm Người Dùng

Responsive Tuyệt Đối: Mọi thành phần, từ navbar, grid layout đến các card, đều được kiểm soát chặt chẽ thông qua các media query (đặc biệt là @media (max-width: 768px)). Website sẽ hiển thị hoàn hảo trên mọi kích thước màn hình.
Hiệu Suất Cao: Mã CSS được viết gọn gàng, chỉ sử dụng một font chữ Google Fonts (Open Sans) để giảm request. Hình ảnh được đảm bảo max-width: 100% và height: auto. JavaScript tối thiểu chỉ phục vụ cho menu mobile, giúp trang tải cực nhanh.
SEO Cấu Trúc: Cấu trúc HTML hợp lý với các thẻ <h1>, <h2>, <h3> được sử dụng đúng mục đích (tiêu đề blog, tiêu đề bài viết, tiêu đề widget...). Đường dẫn liên kết rõ ràng. Đây là nền tảng vững chắc để Google đánh giá cao nội dung của bạn.
Dễ Dàng Tùy Biến: Toàn bộ màu sắc chủ đạo (ví dụ: #25a186 - màu xanh ngọc chủ đạo, #4facfe - màu xanh trong gradient) được đặt làm biến trong CSS. Bạn có thể dễ dàng tìm và thay đổi chúng để phù hợp với bảng màu thương hiệu của mình. Các section HTML trên trang chủ có thể được chỉnh sửa nội dung trực tiếp trong các widget HTML.

Hướng Dẫn Cài Đặt & Sử Dụng Cơ Bản

Chuẩn Bị: Vào trang quản trị Blogger, vào phần "Chủ đề", nhấp vào "Sao lưu" để lưu lại theme hiện tại của bạn.
Cài Đặt: Nhấp vào nút "Khôi phục" > "Chọn tệp", tìm và chọn file theme-congty.xml bạn đã tải về, sau đó nhấp "Tải lên". Toàn bộ code và cấu hình sẽ được áp dụng ngay lập tức.
Tùy Chỉnh Cơ Bản:
- Logo & Tiêu Đề: Vào phần "Bố cục", tìm widget "Header1" (trong section header) để upload logo và đổi tiêu đề blog.
- Menu Điều Hướng: Widget "PageList2" (trong section navbar-section) chính là menu chính. Bạn có thể thêm/xóa/sửa các trang tại đây.
- Nội Dung Trang Chủ: Các widget HTML1, HTML2, HTML3 tương ứng với Hero, Services, Features. Nhấp vào "Chỉnh sửa" trên từng widget để thay đổi văn bản, liên kết cho phù hợp với doanh nghiệp bạn.
- Thông Tin Footer: Chỉnh sửa nội dung trong các widget Text1, LinkList1, HTML4 ở khu vực footer để cập nhật thông tin liên hệ và liên kết.

Opsoso Enterprise Theme (theme-congty.xml) là kết quả của quá trình nghiên cứu, thấu hiểu những khó khăn của doanh nghiệp nhỏ và tận dụng tối đa sức mạnh tiềm ẩn của nền tảng Blogspot. Nó không đơn thuần là "một template miễn phí khác", mà là một bộ công cụ chiến lược được đóng gói sẵn, giúp bạn:

Tiết kiệm tối đa chi phí vận hành website.
Xây dựng hình ảnh chuyên nghiệp ngay từ giây phút đầu tiên.
Quản lý nội dung đơn giản với giao diện quen thuộc của Blogger.
Có một nền tảng chuẩn SEO để phát triển nội dung và thu hút khách hàng.

Hãy cùng nhau đưa Opsoso Enterprise Theme trở thành lựa chọn hàng đầu cho website doanh nghiệp trên nền tảng Blogspot.

Tải xuống, cài đặt và trải nghiệm sự khác biệt ngay hôm nay!

Một số hình ảnh của template:

Hướng Dẫn Chi Tiết Sử Dụng Và Tùy Chỉnh Theme

Phần 1: Giới Thiệu Tổng Quan Và Cài Đặt

1.1. Tổng quan về theme

Theme "Công ty" được xây dựng dựa trên nền tảng Blogger với các điểm nổi bật:

Bố cục rõ ràng: Header kết hợp menu ngang, các section nổi bật trên trang chủ (Hero, Services, Features), khu vực nội dung chính (blog) và sidebar, footer nhiều cột.
Thiết kế hiện đại: Sử dụng font Open Sans, màu sắc chủ đạo xanh lá (#25a186), hiệu ứng hover, đổ bóng (box-shadow) và card (thẻ) cho bài viết.
Tính năng động: Sử dụng các widget mặc định của Blogger (Blog, PopularPosts, PageList, HTML,...) và cấu trúc section linh hoạt.
Responsive: Giao diện tự động thích ứng với mọi kích thước màn hình (điện thoại, máy tính bảng, máy tính để bàn).
Tối ưu hóa cho doanh nghiệp: Trang chủ được thiết kế như một Landing Page với các phần giới thiệu dịch vụ, tính năng, kêu gọi hành động.

1.2. Cài đặt theme lên Blogger

Để bắt đầu, bạn cần tải file theme-congty.xml về máy và thực hiện các bước sau:

Đăng nhập vào tài khoản Blogger của bạn.
Vào trang quản trị của blog cần cài đặt theme.
Chọn mục Chủ đề (Theme) ở thanh menu bên trái.
Tại góc trên bên phải, nhấp 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 (Backup/Restore).
Trong cửa sổ pop-up, nhấp vào nút Chọn tệp (Choose file) và tìm đến file theme-congty.xml trên máy tính của bạn.
Nhấp vào nút Tải lên (Upload).

Lưu ý quan trọng:

Việc tải lên một theme mới sẽ ghi đè hoàn toàn giao diện cũ của bạn. Hãy chắc chắn bạn đã sao lưu theme cũ nếu cần.
Sau khi tải lên thành công, bạn có thể vào Xem blog để chiêm ngưỡng giao diện mới.

Phần 2: Cấu Trúc Theme Và Các Thành Phần Chính

Để chỉnh sửa theme hiệu quả, bạn cần hiểu rõ cấu trúc của nó. File theme-congty.xml được tổ chức theo thứ tự logic.

2.1. Sơ đồ cấu trúc tổng thể

<!DOCTYPE html>
<html><head>    <!-- Chứa các thẻ meta, tiêu đề, link font, và đặc biệt là thẻ <b:skin> chứa toàn bộ CSS -->
</head><body>    <!-- 1. HEADER & NAVIGATION (Header và Menu) -->
    <div class='header-wrapper-row'>
        <div class='header-col-60'> <!-- Cột bên trái chứa logo/tiêu đề blog -->
            <b:section class='header' id='header'/>
        </div>
        <div class='navbar-col-40'> <!-- Cột bên phải chứa menu -->
            <b:section class='navbar-section' id='navbar-section'/>
        </div>
    </div>

    <!-- 2. HERO, SERVICES, FEATURES SECTIONS (Chỉ hiển thị trên trang chủ) -->    <b:if cond='data:view.isHomepage'>        <b:section class='hero-section-wrapper' id='hero-section-wrapper'/>        <b:section class='services-section-wrapper' id='services-section-wrapper'/>        <b:section class='features-section-wrapper' id='features-section-wrapper'/>    </b:if>
    <!-- 3. MAIN CONTENT & SIDEBAR (Nội dung chính và thanh bên) -->    <div class='main-container'>        <b:section class='main' id='main'/>        <b:section class='sidebar' id='sidebar'/>    </div>
    <!-- 4. FOOTER (Chân trang) -->    <footer class='footer'>        <div class='footer-content'>            <b:section class='footer-column' id='footer-1'/>            <b:section class='footer-column' id='footer-2'/>            <b:section class='footer-column' id='footer-3'/>        </div>        <div class='footer-bottom'/>    </footer>
    <!-- 5. JAVASCRIPT -->    <script> ... </script></body></html>

2.2. Giải thích các khu vực Section quan trọng

<b:section>: Đây là "vùng chứa" các widget trên Blogger. Bạn có thể thêm, xóa, sắp xếp widget trong các section này thông qua Bố cục (Layout) trong Blogger Dashboard.
header: Chứa widget Header (tiêu đề blog, logo) và có thể thêm các widget khác như Image.
navbar-section: Chứa widget PageList (danh sách trang) để tạo menu điều hướng chính.
hero-section-wrapper, services-section-wrapper, features-section-wrapper: Các section đặc biệt chỉ hiển thị trên trang chủ. Mỗi section mặc định chứa một widget HTML với nội dung được thiết kế sẵn.
main: Section quan trọng nhất, chứa widget Blog để hiển thị danh sách bài viết và từng bài viết chi tiết.
sidebar: Khu vực thanh bên, chứa các widget như PopularPosts, BlogSearch, Label (nhãn),...
footer-1, footer-2, footer-3: Ba cột ở chân trang, thường chứa các widget Text, LinkList, HTML để hiển thị thông tin công ty, liên kết nhanh, thông tin liên hệ.

Phần 3: Tùy Chỉnh Giao Diện Qua Blogger Dashboard (Dành Cho Người Mới)

Đây là cách dễ nhất để thay đổi nội dung mà không cần động đến mã code.

3.1. Thay đổi Logo và Tiêu đề Blog

Vào Bố cục (Layout).
Tìm section Header (thường nằm ở trên cùng).
Nhấp vào Chỉnh sửa (Edit) trên widget Header.
Một cửa sổ pop-up hiện ra. Bạn có thể:
- Chọn "Hình ảnh": Tải lên logo của công ty. Khi có logo, tiêu đề blog (dạng chữ) có thể bị thay thế hoặc hiển thị kèm, tùy thuộc vào lựa chọn "Đặt hình ảnh thay cho tiêu đề".
- Chỉnh sửa "Tiêu đề" và "Mô tả": Thay đổi tên công ty và slogan.
- Trong theme này, phần header được bố trí đặc biệt với header-col-60. Nếu bạn chỉ có logo và muốn nó nằm gọn trong cột này, hãy đảm bảo logo có kích thước phù hợp.

3.2. Tạo và chỉnh sửa Menu điều hướng

Menu chính được tạo từ widget PageList trong section navbar-section.

Vào Bố cục.
Tìm section navbar-section và nhấp Chỉnh sửa trên widget Menu chính (PageList).
Trong cửa sổ pop-up:
- Tiêu đề (Title): Bạn có thể để trống hoặc đặt tên, nhưng thường menu không cần tiêu đề.
- Thêm liên kết (Add a link): Nhấp vào "Thêm liên kết" để tạo các mục menu.
- Mỗi liên kết bạn cần nhập:
  - Tên trang (Page name): Chữ hiển thị trên menu (ví dụ: "Trang chủ", "Giới Thiệu", "Dịch Vụ").
  - Địa chỉ trang (Page URL): Đường dẫn đến trang đó. Bạn có thể nhập URL của một trang tĩnh do Blogger tạo ra (ví dụ: /p/gioi-thieu.html) hoặc URL tuyệt đối (https://...). Để tạo liên kết đến một phần trong trang (như #services), bạn cần chỉnh sửa trực tiếp mã HTML (xem Phần 4).
Sắp xếp thứ tự các mục menu bằng cách kéo thả.
Nhấp Lưu.

3.3. Tùy chỉnh nội dung các Section trên Trang chủ

Các phần Hero, Services, Features được tạo bằng widget HTML. Bạn có thể dễ dàng thay đổi văn bản, hình ảnh (emoji), và liên kết.

Ví dụ: Thay đổi nội dung phần "Hero Section"

Vào Bố cục.
Trong phần Hero Section, nhấp Chỉnh sửa trên widget Hero Section (HTML).

Bạn sẽ thấy mã HTML như thế này:

<section class="hero-section">
    <h1>Khơi Dậy Tiềm Năng Doanh Nghiệp</h1>
    <p>Giải pháp chiến lược toàn diện giúp doanh nghiệp của bạn bứt phá và phát triển bền vững trong kỷ nguyên số.</p>
    <a href="#contact" class="btn">Tư Vấn Ngay</a>
</section>

Bạn có thể:
- Thay đổi dòng chữ trong thẻ <h1> thành slogan của bạn.
- Sửa đoạn văn trong thẻ <p>.
- Đổi liên kết của nút Tư Vấn Ngay. Ví dụ: href="https://yourwebsite.com/lien-he" hoặc href="/p/lien-he.html".
- Lưu ý: Nếu muốn thêm ảnh nền cho hero section, bạn sẽ cần chỉnh sửa CSS (Phần 4).

Tương tự, bạn có thể chỉnh sửa nội dung trong widget HTML của Services Section và Features Section. Hãy xem cấu trúc HTML của chúng trong file gốc để biết cách thêm/xóa một service-card hoặc feature-item.

3.4. Quản lý bài viết và sidebar

Bài viết (Posts): Đây là phần cốt lõi của Blogger. Bạn tạo bài viết mới qua mục Bài đăng (Posts). Theme sẽ tự động hiển thị chúng dưới dạng các card đẹp mắt ở trang chủ (nếu có nhiều bài) hoặc trang lưu trữ.
Sidebar: Trong Bố cục, bạn có thể thêm widget vào section sidebar. Một số widget hữu ích:
- PopularPosts: Hiển thị bài viết phổ biến (đã được tùy chỉnh giao diện trong theme).
- BlogSearch: Ô tìm kiếm.
- Label: Hiển thị danh sách nhãn (chủ đề) dạng đám mây hoặc danh sách.
- HTML: Để thêm nội dung tùy chỉnh như quảng cáo, hình ảnh, video,...

3.5. Tùy chỉnh nội dung Footer

Ba cột footer tương ứng với ba section footer-1, footer-2, footer-3.

Cột 1 (footer-1): Mặc định là widget Text với tiêu đề "Về OPSOSO". Bạn có thể chỉnh sửa để giới thiệu ngắn về công ty mình.
Cột 2 (footer-2): Mặc định là widget LinkList với tiêu đề "Liên Kết". Bạn có thể thêm/xóa các liên kết nhanh (Trang chủ, Tính năng, Liên hệ). Lưu ý, các liên kết #features và #contact là liên kết neo (anchor link) để cuộn đến các phần tương ứng trên cùng một trang. Để chúng hoạt động, bạn cần đảm bảo các phần đó có id tương ứng (ví dụ: <section id="features">).
Cột 3 (footer-3): Mặc định là widget HTML với tiêu đề "Liên Hệ", chứa thông tin địa chỉ, email, số điện thoại. Bạn chỉ cần sửa trực tiếp nội dung đó.

Phần 4: Tùy Chỉnh Nâng Cao - Can Thiệp Vào Mã HTML & CSS

Để thay đổi giao diện một cách sâu sắc (màu sắc, kích thước, hiệu ứng, bố cục), bạn cần chỉnh sửa trực tiếp mã nguồn của theme.

Cách truy cập để chỉnh sửa HTML:

Vào Chủ đề (Theme).
Nhấp vào nút Chỉnh sửa HTML (Edit HTML) ở góc dưới bên phải của hình ảnh đại diện theme.

Cảnh báo: Hãy cực kỳ cẩn thận khi chỉnh sửa HTML. Một sai sót nhỏ có thể làm hỏng toàn bộ giao diện. Luôn sao lưu theme trước khi thay đổi.

4.1. Làm việc với thẻ <b:skin> (CSS)

Toàn bộ mã CSS của theme nằm trong thẻ <b:skin><![CDATA[ ... ]]></b:skin>. Đây là nơi bạn thay đổi "diện mạo" của website.

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

Màu chủ đạo (primary color) của theme là #25a186 (xanh lá) và một vài màu gradient.

Ví dụ: Đổi màu chủ đạo sang xanh dương (#007bff).

Tìm trong CSS các dòng có chứa #25a186.
Bạn sẽ thấy nó xuất hiện ở nhiều nơi: màu chữ khi hover, màu nền của nút, màu border-bottom của widget title, màu gradient trong navbar mobile,...

Hãy thay thế lần lượt các giá trị này. Ví dụ:

/* Tìm dòng này */
.navbar-link:hover {    color: #25a186;  /* Đổi thành #007bff */
}
/* Tìm dòng này */.read-more {    border: 1px solid #25a186; /* Đổi thành #007bff */}.read-more:hover {    background: #25a186; /* Đổi thành #007bff */}
/* Tìm dòng này trong .widget-title */.widget-title {    border-bottom: 2px solid #25a186; /* Đổi thành #007bff */}

Điều chỉnh kích thước

Ví dụ: Bạn muốn tăng kích thước chữ tiêu đề bài viết trên trang chủ.
- Tìm selector .post-title. Trong file, nó được định nghĩa:
  css
```
.post-title {
    font-size: 30px; /* Tang 25% tu 24px */
    font-weight: 700;
    ...
}
```
- Bạn có thể tăng font-size lên 36px hoặc giảm xuống 24px tùy ý.
Ví dụ: Thay đổi chiều cao của thanh navbar (phần menu).
- Ở đầu file CSS, có một nhóm Group description="Header Layout Conf" khai báo biến (variable) nhưng chưa được sử dụng triệt để. Tuy nhiên, chiều cao thực tế của navbar được định nghĩa ở class .navbar-container:
  css
```
.navbar-container {
    ...
    height: 70px; /* Thay đổi giá trị này, ví dụ: 90px */
}
```
- Lưu ý: Trên mobile, chiều cao sẽ tự động điều chỉnh.

4.2. Tùy chỉnh cấu trúc HTML và các thẻ Blogger (<b:...>)

Thay đổi số lượng chữ trong đoạn trích (snippet)

Trong file, tại phần hiển thị bài viết trên trang chủ, có dòng code:

<b:eval expr='data:post.body snippet { length: 200 }'/>

Dòng này có nghĩa là sẽ lấy 200 ký tự đầu tiên của bài viết làm đoạn trích. Bạn có thể thay đổi con số 200 thành 300 hoặc 100 để điều chỉnh độ dài.

Thêm class CSS tùy chỉnh vào bài viết

Giả sử bạn muốn bài viết đầu tiên trên trang chủ có một màu nền đặc biệt. Bạn có thể thêm một điều kiện để gán class.

Tìm vòng lặp hiển thị bài viết: <b:loop values='data:posts' var='post'>.
Bên trong thẻ <div class='post'>, bạn có thể thêm:
xml
```
<div class='post <b:if cond='data:post.isFirstPost'>first-post</b:if>'>
```
Đoạn code này sẽ kiểm tra nếu bài viết là bài đầu tiên, nó sẽ thêm class first-post vào thẻ div.

Sau đó, bạn có thể vào phần CSS và thêm các quy tắc cho class này:

.post.first-post {
    background-color: #e8f5e9;
    border-left: 5px solid #25a186;
}

Tạo menu thả xuống (Dropdown) phức tạp hơn

Trong theme, menu đã có sẵn cấu trúc cho dropdown (thẻ <ul class='navbar-dropdown'> bên trong <li class='navbar-item'>), nhưng nó chưa được kích hoạt vì widget PageList mặc định không hỗ trợ menu đa cấp. Để có dropdown, bạn cần can thiệp thủ công bằng HTML và CSS.

Cách tạo menu "Dịch Vụ" với các mục con:

Trong phần HTML của widget PageList (hoặc bạn có thể thay thế nó bằng một widget HTML để dễ dàng tùy chỉnh menu hơn), hãy tìm <li class='navbar-item'> tương ứng với menu "Dịch Vụ".

Sửa nó thành:

<li class='navbar-item'>
    <a class='navbar-link' href='#'>Dịch Vụ</a> <!-- Không cần href chính -->
    <ul class='navbar-dropdown'>
        <li><a class='navbar-dropdown-item' href='/p/tu-van.html'>Tư Vấn Chiến Lược</a></li>
        <li><a class='navbar-dropdown-item' href='/p/tiep-thi-so.html'>Tiếp Thị Số</a></li>
        <li><a class='navbar-dropdown-item' href='/p/ung-dung.html'>Ứng Dụng Mobile</a></li>
    </ul>
</li>

CSS cho dropdown đã có sẵn trong theme, vì vậy nó sẽ hoạt động ngay lập tức.

4.3. Tinh chỉnh JavaScript

Theme có một đoạn JavaScript nhỏ ở cuối file để xử lý menu trên mobile (nút hamburger).

<script>
    //<![CDATA[
    document.addEventListener('DOMContentLoaded', function() {
        var toggle = document.getElementById('navbarToggle');
        var menu = document.getElementById('navbarMenu');
        var overlay = document.getElementById('navbarOverlay');
        
        if (toggle) {
            toggle.addEventListener('click', function() {
                this.classList.toggle('active');
                menu.classList.toggle('active');
                overlay.classList.toggle('active');
            });

            var links = menu.querySelectorAll('.navbar-link');            links.forEach(function(link) {                link.addEventListener('click', function() {                    toggle.classList.remove('active');                    menu.classList.remove('active');                    overlay.classList.remove('active');                });            });
            // Close menu when clicking on overlay            if (overlay) {                overlay.addEventListener('click', function() {                    toggle.classList.remove('active');                    menu.classList.remove('active');                    overlay.classList.remove('active');                });            }        }    });    //]]></script>

Bạn có thể mở rộng nó để thêm các hiệu ứng khác, ví dụ như cuộn mượt mà (smooth scroll) khi nhấp vào các liên kết neo.

Thêm smooth scroll:

Thêm vào bên trong DOMContentLoaded:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

Đoạn code này sẽ bắt tất cả các thẻ a có href bắt đầu bằng # và cuộn đến phần tử tương ứng một cách mượt mà.

Phần 5: Các Thủ Thuật Và Mẹo Hay

5.1. Sử dụng biến (Variable) trong CSS để dễ dàng thay đổi

Ở đầu file CSS, đã có một biến được khai báo trong group Header Layout Conf:

/*
<Group description="Header Layout Conf">
    <Variable name="header.row.height" description="Chieu cao Header va Menu" type="length" default="90px" min="60px" max="200px" value="90px"/>
</Group>
*/

Tuy nhiên, biến này chưa được sử dụng. Để tận dụng nó, bạn cần thay thế các giá trị cứng (như height: 70px trong .navbar-container) bằng biến này. Cú pháp là:

.navbar-container {
    height: $(header.row.height);
}

Sau đó, khi bạn muốn thay đổi chiều cao, bạn chỉ cần sửa giá trị value="90px" trong khai báo Variable ở trên. Điều này giúp việc quản lý theme dễ dàng hơn.

5.2. Tối ưu hóa theme cho SEO

Thẻ tiêu đề (Title Tag): Theme đã sử dụng <title><data:view.title.escaped/></title>, tự động lấy tiêu đề của trang hiện tại (rất tốt cho SEO).

Thẻ mô tả (Meta Description): Bạn nên thêm thẻ mô tả vào phần <head>:

<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>    <meta content='Mô tả mặc định cho blog của bạn ở đây' name='description'/>
</b:if>

Thẻ Heading (H1, H2, H3): Theme sử dụng hợp lý:
- H1 là tiêu đề blog (trên trang chủ) hoặc tiêu đề bài viết (trang bài viết).
- H2 là tiêu đề của từng bài viết trong trang danh sách, tiêu đề các section (Services, Features).
- H3 là tiêu đề các widget ở sidebar và footer.
  Hãy đảm bảo khi bạn tạo bài viết, bạn chỉ sử dụng một thẻ H1 duy nhất và phân cấp các thẻ heading còn lại hợp lý.

5.3. Xử lý lỗi thường gặp

Menu không hiển thị đúng trên mobile: Đảm bảo rằng đoạn JavaScript hoạt động. Kiểm tra console trình duyệt (F12) xem có lỗi gì không.
Hình ảnh không hiển thị: Kiểm tra lại đường dẫn trong widget Image hoặc trong nội dung bài viết. Đối với PopularPosts, nếu bài viết không có ảnh đại diện, nó sẽ hiển thị chữ "Opsoso" như một placeholder. Bạn có thể đổi chữ này trong CSS tại class .no-image.
Khoảng trắng bất thường: Có thể do thiếu thẻ đóng hoặc CSS bị xung đột. Hãy sử dụng công cụ "Kiểm tra phần tử" (Inspect Element) trên trình duyệt để xác định nguyên nhân.

Qua hướng dẫn chi tiết này, hy vọng bạn đã nắm được cách thức hoạt động của theme, từ việc cài đặt cơ bản, tùy chỉnh nội dung qua Dashboard, cho đến việc can thiệp sâu vào mã nguồn HTML, CSS và JavaScript để tạo ra một giao diện hoàn toàn độc đáo, phù hợp với thương hiệu của riêng bạn.

Chúc bạn thành công với Opsoso.net và tạo ra một website ấn tượng!

MENU

Theme Blogspot: Opsoso cho doanh nghiệp

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

Hướng Dẫn Chi Tiết Sử Dụng Và Tùy Chỉnh Theme

Phần 1: Giới Thiệu Tổng Quan Và Cài Đặt

Phần 2: Cấu Trúc Theme Và Các Thành Phần Chính

Phần 3: Tùy Chỉnh Giao Diện Qua Blogger Dashboard (Dành Cho Người Mới)

Phần 4: Tùy Chỉnh Nâng Cao - Can Thiệp Vào Mã HTML & CSS

Phần 5: Các Thủ Thuật Và Mẹo Hay

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 Chi Tiết Sử Dụng Và Tùy Chỉnh Theme

Phần 1: Giới Thiệu Tổng Quan Và Cài Đặt

Phần 2: Cấu Trúc Theme Và Các Thành Phần Chính

Phần 3: Tùy Chỉnh Giao Diện Qua Blogger Dashboard (Dành Cho Người Mới)

Phần 4: Tùy Chỉnh Nâng Cao - Can Thiệp Vào Mã HTML & CSS

Phần 5: Các Thủ Thuật Và Mẹo Hay

Bài viết liên quan