Trong thời đại kỹ thuật số ngày nay, giao diện website không chỉ đơn thuần là "bộ mặt" của doanh nghiệp mà còn là cỗ máy thu hút khách hàng, tối ưu hóa công cụ tìm kiếm và mang lại trải nghiệm người dùng (UX) mượt mà nhất. Thấu hiểu được nhu cầu nâng cấp không ngừng đó, chúng tôi tự hào giới thiệu phiên bản theme-congty_v2.xml.
Được xây dựng và phát triển dựa trên nền tảng vững chắc của
bản theme-congty.xml, phiên bản V2 không chỉ là một bản cập nhật nhỏ lẻ
mà là một cuộc "lột xác" toàn diện. Từ cấu trúc mã nguồn cơ bản, tối
ưu hóa SEO chuyên sâu, cho đến ngôn ngữ thiết kế giao diện và bổ sung hàng loạt
tiện ích (widgets) tương tác mới, bản nâng cấp này hứa hẹn sẽ mang lại hiệu suất
vượt trội cho trang web Blogger của bạn.
Hãy cùng điểm qua những nâng cấp đáng giá nhất trên theme-congty_v2.xml
so với phiên bản cũ với một góc nhìn chi tiết và chuyên sâu nhất.
Tối Ưu Hóa SEO & Social Media Tags (Vũ Khí Sắc Bén
Mới)
Sự khác biệt lớn nhất và mang tính chiến lược nhất ở phiên bản
V2 chính là sự xuất hiện của khối mã tối ưu hóa SEO và thẻ Meta (Meta Tags)
chuyên sâu. Ở phiên bản V1 (theme-congty.xml), phần <head> của trang web
chỉ chứa các thẻ cơ bản nhất để hiển thị tiêu đề và liên kết stylesheet. Điều
này vô tình làm hạn chế khả năng cạnh tranh thứ hạng của doanh nghiệp trên
Google. Phiên bản V2 đã khắc phục hoàn toàn điểm yếu này bằng một hệ thống thẻ
hoàn chỉnh:
- Canonical
URL: Ngăn chặn triệt để lỗi trùng lặp nội dung
(Duplicate Content).
- Điều
hướng Robot thông minh: Theme V2 tự động nhận diện trang chủ, bài viết
hoặc trang tĩnh để kích hoạt thẻ.
Đối với các trang không quan trọng, hệ thống tự động gán
nhãn noindex, nofollow`, giúp tiết kiệm ngân sách thu thập dữ liệu (Crawl
Budget) của Googlebot.
- Open
Graph cho Facebook & Zalo: Khi bạn chia sẻ link website lên mạng
xã hội, giao diện cũ thường không bắt được ảnh hoặc tiêu đề chuẩn. V2 đã
tích hợp toàn bộ chuẩn og:title, og:url, og:type và đặc biệt là og:image.
Thậm chí, nếu bài viết của bạn không có ảnh, theme sẽ tự động sử dụng một
hình ảnh mặc định sắc nét làm ảnh đại diện chia sẻ để bài đăng luôn trông
chuyên nghiệp.
- Twitter
Card: Tương tự như Open Graph, V2 bổ sung chuẩn thẻ twitter:card dạng summary_large_image
để tối ưu hóa hiển thị khi link được chia sẻ trên nền tảng X/Twitter.
Cuộc Cách Mạng Về Màu Sắc & Ngôn Ngữ Thiết Kế Giao
Diện
Nếu như phiên bản theme-congty.xml (V1) mang một sắc thái
khá trầm với tông màu chủ đạo là Xám đen (#1a1a1a đến #2d2d2d trên thanh điều
hướng) kết hợp với các điểm nhấn màu Xanh ngọc (#25a186), thì theme-congty_v2.xml
(V2) đã chuyển mình sang một ngôn ngữ thiết kế mang tính "công nghệ"
và đáng tin cậy hơn rất nhiều.
- Thanh
Điều Hướng (Navbar): Thanh Navbar V2 giờ đây khoác lên mình hiệu ứng dải
màu gradient từ Xanh Navy đậm (#0f172a) sang Xám ánh xanh (#1e293b), kết hợp
cùng điểm nhấn là dải Xanh lam (#3b82f6 và #2563eb). Điều này tạo ra một cảm
giác vững chãi, hiện đại và rất phù hợp với các công ty dịch vụ B2B, công
nghệ hoặc tài chính.
- Khu
vực Hero Section: Ở bản cũ, phần giới thiệu Hero nổi bật với dải màu
gradient Đỏ đậm sẫm (#bb4040 đến #350d0d), tạo cảm giác khá mạnh mẽ nhưng
có phần hơi gắt đối với một số lĩnh vực doanh nghiệp. Ở bản V2, khu vực
này đã được thay thế bằng dải gradient Xanh Hoàng Gia (#1e3a8a đến #172554),
giúp giảm sự căng thẳng cho mắt người dùng và làm nổi bật tiêu đề trắng
"Khơi Dậy Tiềm Năng Doanh Nghiệp" một cách thanh lịch nhất.
- Font
chữ và Trình bày: Cả hai phiên bản vẫn giữ nguyên font chữ 'Open
Sans'. Tuy nhiên, kích thước chữ của tiêu đề bài viết (.post-title) ở V2
đã được tinh chỉnh lớn hơn, làm nổi bật cấu trúc phân cấp thông tin, giúp
người dùng dễ dàng theo dõi nội dung chính khi lướt web.
Trải Nghiệm Di Động (Mobile UX) Mượt Mà Với Off-Canvas
Menu
Sự thay đổi lớn về mã lệnh (CSS) trong cách xử lý thanh điều
hướng trên thiết bị di động là một minh chứng cho thấy V2 cực kỳ quan tâm đến
trải nghiệm người dùng smartphone.
- Thiết
kế Menu cũ (V1): Trên điện thoại di động, khi người dùng bấm vào nút
toggle (nút 3 gạch), menu ở bản cũ sẽ trượt xuống (max-height transition)
ngay phía dưới thanh tiêu đề với nền đen (rgba(0,0,0,0.9)). Cách làm này
khá phổ thông nhưng có thể chiếm nhiều diện tích màn hình khi danh sách
menu quá dài.
- Thiết
kế Off-Canvas mới (V2): Phiên bản V2 đã thay thế hoàn toàn phong cách
cũ bằng một menu trượt ngang (Off-Canvas) chuẩn ứng dụng di động. Khi kích
hoạt, menu sẽ mượt mà trượt ra từ lề phải màn hình (right: -300px sang right:
0), với chiều rộng 280px và phủ toàn bộ chiều cao thiết bị (100vh) bằng một
nền trắng sáng sủa, hiện đại.
- Đặc biệt,
nút "Call-to-action" ở mục cuối cùng của menu trên mobile cũng
được bo góc tròn, sử dụng dải gradient nổi bật và đổ bóng (box-shadow),
thúc đẩy tỷ lệ chuyển đổi (Conversion Rate) cho doanh nghiệp.
Bổ Sung Các Tính Năng & Tiện Ích (Widgets) Độc Quyền
Phiên bản V2 không chỉ thay áo mới mà còn được trang bị thêm
các "vũ khí" tương tác mới mạnh mẽ, giúp giữ chân người dùng ở lại
trang web lâu hơn.
Khối Thông Báo Nổi Bật (Announcement Widget)
Nhằm giúp doanh nghiệp nhanh chóng thông báo các chương
trình khuyến mãi, tin tức nóng hổi hoặc sự kiện mới, V2 đã bổ sung một widget HTML5
hoàn toàn mới ngay phía trên phần hiển thị bài viết.
- Khối
thông báo này (.announcement-box) có thiết kế nền xanh dương nhạt thanh lịch
(#eff6ff), viền trái nổi bật và đi kèm một biểu tượng chiếc chuông rung
(animation lắc liên tục để thu hút ánh nhìn).
- Bên cạnh
nội dung text, khối này còn cung cấp nút bấm "Xem chi tiết" với
hiệu ứng hover bắt mắt, một tính năng hoàn toàn vắng bóng trong cấu trúc
đơn giản của V1.
Slider Hình Ảnh Chạy Tự Động Trên Sidebar (Sidebar Image
Slider)
Nếu như thanh bên (Sidebar) của bản V1 chỉ đơn thuần chứa
các bài đăng phổ biến và công cụ tìm kiếm, thì V2 đã tiến xa hơn bằng việc tích
hợp thêm một widget danh sách liên kết (LinkList2) đóng vai trò là một thanh
trượt hình ảnh (Image Slider) sinh động.
- Được
xây dựng kết hợp giữa CSS Scroll Snap (scroll-snap-type: x mandatory) và
mã JavaScript tích hợp sẵn ở cuối file, slider này sẽ tự động chuyển đổi
giữa các hình ảnh sau mỗi chu kỳ 3.5 giây (3500ms) một cách vô cùng mượt
mà.
- Hình ảnh
bên trong slider được xử lý đổ bóng chữ (Caption) với dải gradient đen từ
dưới lên, giúp chữ luôn rõ nét trên mọi nền ảnh, biến sidebar của bạn
thành một không gian quảng cáo (banner ads) tuyệt vời.
Tinh Chỉnh Hoàn Thiện Khu Vực Footer Và Cấu Trúc Tổng
Thể
Khu vực chân trang (Footer) thường là nơi người dùng tìm kiếm
thông tin liên hệ và các liên kết phụ yếu. Cả hai phiên bản đều sở hữu cấu trúc
Footer 3 cột, nhưng V2 lại mang đến độ hoàn thiện cao hơn hẳn:
- Màu
sắc và Tương phản: V1 sử dụng nền chân trang màu Xanh lá sẫm (#0e653c)
hoặc Đen (#1b2b1e) tùy khu vực, tạo ra nét cổ điển. V2 chuyển hẳn sang nền
Xám xanh đen (#0f172a) với chữ màu Xám nhạt (#94a3b8), mang đậm chất công
nghệ và hiện đại.
- Mạng
Xã Hội (Social Icons): Ở cột Footer đầu tiên ("Về OPSOSO"),
V2 đã mạnh tay bổ sung thêm các nút bấm liên kết mạng xã hội dạng icon (.footer-socials)
gồm Facebook (FB), Twitter (TW) và LinkedIn (IN) với hiệu ứng trượt mượt
mà và nền gradient khi người dùng di chuột qua (hover). Phiên bản V1 không
cung cấp các nút này.
- Trình Bày Danh Sách (Link Styles): Các danh sách liên kết trong phần "Liên Kết" và "Liên Hệ" ở V2 được chăm chút tỉ mỉ hơn với các đường viền nét đứt (dashed border) ngăn cách và một biểu tượng ô vuông nhỏ (\25A0) xuất hiện trước mỗi liên kết, giúp giao diện trở nên gọn gàng và phân tách rõ ràng hơn.
Phiên bản theme-congty_v2.xml không chỉ khắc phục những hạn chế về mặt hiển thị của phiên bản V1 mà còn mang đến một hệ sinh thái kỹ thuật hoàn chỉnh hơn. Sự lột xác về màu sắc từ Xanh/Đỏ sang dải gradient Xanh Navy B2B chuyên nghiệp giúp định vị lại thương hiệu của bạn.
Quan trọng hơn cả, việc bổ sung hệ thống Meta Tags SEO và cấu
trúc Off-Canvas Menu di động là những cải tiến mang tính "sống còn" để
giúp trang web của bạn đạt điểm cao hơn trên các công cụ đo lường của Google
(Google PageSpeed, SEO Audits). Với các công cụ mới như Widget Thông Báo và
Slider Hình Ảnh tự động, bạn hoàn toàn có trong tay đầy đủ trang bị để giữ chân
khách hàng và chuyển đổi họ thành doanh thu một cách hiệu quả.
Hãy cập nhật mã nguồn website của bạn sang bản theme-congty_v2.xml ngay hôm nay để không bỏ lỡ những lợi thế tuyệt vời này!
📘 HƯỚNG DẪN SỬ DỤNG
1. GIỚI THIỆU TỔNG QUAN
theme-congty_v2.xml là một template dành cho nền
tảng Blogger (Blogspot), được thiết kế theo phong cách Corporate /
Doanh nghiệp. Template này phù hợp với:
- Trang
web giới thiệu công ty
- Blog
dịch vụ, tư vấn
- Trang
landing page cho sản phẩm
- Website
tin tức nội bộ
✨ Tính năng nổi bật:
- Giao
diện responsive (hiển thị tốt trên mọi thiết bị)
- Thanh
điều hướng (navbar) sticky, có dropdown menu
- Hero
Section với nút kêu gọi hành động (CTA)
- Services
Section – giới thiệu dịch vụ nổi bật
- Features
Section – các đặc điểm sản phẩm/dịch vụ
- Sidebar
thông minh với slider ảnh, tìm kiếm, bài
viết phổ biến, danh mục
- Footer 3
cột + bản quyền
- Tối
ưu SEO (thẻ canonical, meta description, Open Graph, Twitter
Card)
- Hỗ trợ microdata cho
bài viết
- Hiệu ứng
hover, animation mượt mà
- Dễ
dàng tuỳ chỉnh màu sắc, kích thước qua biến CSS
🧩 Cấu trúc thư mục widget
chính:
- Header1 –
Logo và tiêu đề blog
- PageList2 –
Menu chính (thanh navbar)
- Blog1 –
Danh sách bài viết
- HTML1,2,3 –
Hero, Services, Features (chỉ hiện trên trang chủ)
- HTML5 –
Thông báo nổi bật (announcement)
- LinkList2 –
Slider ảnh sidebar
- PopularPosts1 –
Bài viết phổ biến
- BlogSearch1 –
Ô tìm kiếm
- Text1,
LinkList1, HTML4 – Footer 3 cột
2. CÀI ĐẶT TEMPLATE
Bước 1: Tải template về máy
- Bạn
đã có file theme-congty_v2.xml. Nếu chưa, hãy lưu nội dung XML thành
file .xml.
Bước 2: Đăng nhập Blogger
- Truy
cập blogger.com
- Chọn
blog bạn muốn cài đặt.
Bước 3: Vào giao diện Chủ đề (Theme)
- Trong
menu bên trái, chọn Chủ đề (Theme).
Bước 4: Sao lưu theme cũ (khuyến nghị)
- Nhấn
nút Sao lưu / Khôi phục → Tải chủ đề xuống để
lưu lại giao diện cũ.
Bước 5: Tải lên template mới
- Nhấn
nút Sao lưu / Khôi phục → Chọn tệp → chọn
file theme-congty_v2.xml → Tải lên.
- Đợi
vài giây, Blogger sẽ báo thành công.
✅ Kết quả: Giao
diện mới đã được áp dụng. Bạn có thể vào trang chủ để xem.
3. CẤU HÌNH CÁC THÀNH PHẦN CHÍNH
3.1. Logo và tiêu đề (Header)
Vào Bố cục → Header (Tiêu đề blog).
- Nếu
muốn dùng ảnh logo:
Bật mục Thay vì tiêu đề và mô tả, hãy hiển thị ảnh → tải ảnh lên (khuyên dùng kích thước tối đa 600x75px). - Nếu
muốn dùng chữ:
Tắt ảnh, nhập Tiêu đề và Mô tả ngắn.
💡 Template hỗ trợ cả hai
kiểu, nhưng ảnh logo chuyên nghiệp hơn.
3.2. Menu chính (Navbar)
Vào Bố cục → Menu chính (PageList2) → Chỉnh
sửa.
- Thêm
liên kết: Nhập Tiêu đề trang (VD: "Dịch vụ")
và Địa chỉ web (VD: https://blogcuaban.com/p/dich-vu).
- Sắp
xếp: Kéo thả các mục để thay đổi thứ tự.
- Menu
con (dropdown):
Để tạo menu con, bạn cần tạo trang con trước. Trong Blogger, vào Trang → Trang mới → đặt tên, xuất bản. Sau đó quay lại PageList, thêm trang đó và đặt nó nằm dưới một mục cha bằng cách thụt lề (indent).
⚠️ Lưu ý: Mục cuối cùng của menu
sẽ tự động có màu xanh gradient (nút CTA). Bạn có thể sửa trực tiếp trong mã
CSS nếu muốn đổi mục khác.
3.3. Hero Section (Chỉ hiện trên trang chủ)
Vào Bố cục → Hero Section (HTML1) → Chỉnh
sửa.
Nội dung mẫu:
html
<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á.</p>
<a href="#contact"
class="btn">Tư Vấn Ngay</a>
</section>
Bạn có thể:
- Đổi
tiêu đề h1 và đoạn văn p
- Đổi
đường dẫn href của nút CTA (có thể là # hoặc link đến
form liên hệ)
3.4. Services Section – Giới thiệu dịch vụ
Vào Bố cục → Services Section
(HTML2) → Chỉnh sửa.
Mỗi dịch vụ nằm trong <div
class="service-card">. Bạn có thể:
- Thêm/bớt
số lượng thẻ .service-card
- Đổi
icon (emoji hoặc HTML entity)
- Sửa
tiêu đề h3 và mô tả p
Ví dụ thêm dịch vụ thứ 4:
html
<div class="service-card">
<div class="service-icon">🚀</div>
<h3>Tư Vấn
Chiến Lược</h3>
<p>Phân tích
thị trường, định hướng phát triển dài hạn.</p>
</div>
3.5. Features Section – Đặc điểm nổi bật
Vào Bố cục → Features Section
(HTML3) → Chỉnh sửa.
Cấu trúc mỗi đặc điểm:
html
<div class="feature-item">
<h4>✅
Responsive Design</h4>
<p>Tối ưu
cho tất cả thiết bị</p>
</div>
Bạn có thể thay đổi số lượng, nội dung cho phù hợp với sản
phẩm/dịch vụ thực tế.
3.6. Thông báo nổi bật (Announcement)
Vào Bố cục → Thông báo nổi bật
(HTML5) → Chỉnh sửa.
Widget này hiển thị phía trên danh sách bài viết. Bạn có thể:
- Sửa
nội dung thông báo trong <div
class="announcement-text">
- Đổi
link của nút "Xem chi tiết"
- Thay
đổi icon 🔔 thành icon khác (ví dụ: 📢,
⚡)
4. TÙY CHỈNH SIDEBAR
4.1. Slider ảnh
Vào Bố cục → Hình ảnh (LinkList2) → Chỉnh
sửa.
- Mỗi
dòng: Tên trang web = chú thích ảnh, URL trang
web = đường dẫn ảnh.
- Ảnh
nên có kích thước đồng nhất, khuyến nghị 600x400px.
- Slider
tự động chạy mỗi 3.5 giây.
🖼️ Nếu ảnh không hiển thị,
hãy kiểm tra lại đường dẫn (phải là URL ảnh trực tiếp, kết thúc bằng .jpg,
.png, .webp).
4.2. Bài viết phổ biến
Vào Bố cục → Bài đăng phổ biến
(PopularPosts1) → Chỉnh sửa.
Tuỳ chỉnh:
- Số
lượng bài viết: 5 (mặc định), có thể tăng lên 10.
- Hiển
thị hình thu nhỏ: Bật để có ảnh đẹp.
- Hiển
thị đoạn trích: Nên tắt để sidebar gọn gàng.
- Khoảng
thời gian: Chọn "Năm ngoái" hoặc "Mọi thời
gian".
4.3. Tìm kiếm
Vào Bố cục → Tìm kiếm nội dung
(BlogSearch1) → Chỉnh sửa.
Không cần cấu hình gì thêm, nó hoạt động ngay.
4.4. Danh sách trang (nếu cần)
Widget Trang (PageList1) hiện đang ẩn (visible='false').
Nếu muốn dùng, bạn sửa trong Bố cục → kéo widget đó vào
sidebar và bật hiển thị.
5. CẤU HÌNH FOOTER
Footer gồm 3 cột:
5.1. Cột 1 – Về OPSOSO (Text1)
- Vào Bố
cục → Về OPSOSO (Text1) → Chỉnh sửa.
- Nhập
nội dung giới thiệu ngắn gọn.
- Biểu
tượng mạng xã hội (FB, TW, IN) có thể sửa link trong phần mã tùy chỉnh
(xem mục 7.3).
5.2. Cột 2 – Liên Kết (LinkList1)
- Vào Bố
cục → Liên Kết (LinkList1) → Chỉnh sửa.
- Thêm
các liên kết quan trọng: Chính sách bảo mật, Điều khoản sử dụng, Liên hệ,
…
5.3. Cột 3 – Liên Hệ (HTML4)
- Vào Bố
cục → Liên Hệ (HTML4) → Chỉnh sửa.
- Cập
nhật địa chỉ, email, số điện thoại thật của bạn.
5.4. Dòng bản quyền
Dòng chữ © 2026 OPSOSO - Giải pháp mã nguồn mở.
opsoso.net nằm trong <div class="footer-bottom">. Để
sửa:
- Vào Chủ
đề → Chỉnh sửa HTML.
- Tìm
đoạn © 2026 OPSOSO và thay bằng thông tin của bạn.
6. QUẢN LÝ BÀI VIẾT & TRANG
6.1. Bài viết mới
- Vào Bài
đăng → Bài đăng mới.
- Template
hỗ trợ đầy đủ: tiêu đề, nội dung, hình ảnh, nhãn (label), ngày giờ.
- Ảnh
đại diện (featured image) sẽ tự động hiển thị trong danh sách bài viết và
sidebar.
6.2. Trang tĩnh (About, Contact, Services…)
- Vào Trang → Trang
mới.
- Tạo nội
dung giới thiệu công ty, sơ đồ tổ chức, bảng giá,…
- Sau
khi xuất bản, vào Menu chính (PageList2) để thêm link đến
trang đó.
6.3. Nhãn (Label) – phân loại bài viết
- Khi
viết bài, bạn có thể gắn nhãn như "Tin tức", "Dịch vụ",
"Khuyến mãi".
- Các
nhãn này sẽ hiển thị bên dưới mỗi bài viết và trở thành link lọc bài viết
theo chủ đề.
7. TÙY CHỈNH MÀU SẮC & CSS NÂNG CAO
7.1. Sử dụng biến CSS có sẵn
Template có sẵn một biến:
css
<Variable name="header.row.height" ... value="90px"/>
Bạn có thể thay đổi giá trị này trong thẻ <b:skin> nếu
muốn điều chỉnh chiều cao header.
7.2. Đổi màu chủ đạo (xanh dương → màu khác)
Màu chủ đạo của template là xanh #3b82f6 và #2563eb.
Để đổi sang màu cam hoặc đỏ:
- Vào Chủ
đề → Chỉnh sửa HTML.
- Tìm
và thay thế tất cả các mã #3b82f6, #2563eb, #1e293b bằng
mã màu bạn muốn (VD: #ff6600, #e65c00).
7.3. Tuỳ chỉnh biểu tượng mạng xã hội trong footer
Trong widget Text1 (cột 1 footer), bạn có
thể thay đổi:
- Link
Facebook: thay href='#' bằng link thật.
- Chữ
"FB" thành icon FontAwesome hoặc hình ảnh.
Ví dụ dùng icon Unicode: 📘, 🐦, 🔗
7.4. Thay đổi ảnh mặc định Open Graph
Khi bài viết không có ảnh, template dùng ảnh mặc định:
text
https://blogger.googleusercontent.com/img/a/AVvXsEhnN0vn0UWcVo3rV8epyE45AsAOHfbBTmyGPEo0YhZsdqtVYSX-tZd7MBA3GpFrbR-uGjkoykMjR8tLpd6au9ET1x6fybkf-u1HSJhsF3D8w_g3NeMUb-Ys5O2bXe-6uKU9awCqIA9kwUWoYl4twUi3lFZqgQtEs1bDieZvdabJ1728gv_s1i8BdSlZQD3M=s600
Bạn có thể thay bằng logo công ty hoặc ảnh brand bằng cách
tìm dòng này trong mã HTML và sửa link.
8. TỐI ƯU SEO
Template đã tích hợp sẵn các thẻ SEO quan trọng:
8.1. Thẻ canonical
html
<link expr:href='data:view.url.canonical' rel='canonical'/>
Tránh nội dung trùng lặp, giúp Google hiểu đâu là URL chính.
8.2. Robots meta
- Trang
chủ, bài viết, trang tĩnh: index, follow
- Các
trang còn lại (lưu trữ, tìm kiếm): noindex, nofollow
8.3. Meta Description
- Nếu
bạn nhập mô tả trong phần Cài đặt SEO của Blogger, nó sẽ
tự động được dùng làm og:description và twitter:description.
8.4. Open Graph (Facebook, Zalo)
Tự động lấy tiêu đề, ảnh, mô tả. Rất quan trọng khi chia sẻ
link lên mạng xã hội.
8.5. Twitter Card
Hỗ trợ hiển thị ảnh lớn (summary_large_image).
✅ Khuyến nghị thêm:
- Cài đặt Google
Analytics qua Cài đặt → Google Analytics
Property ID.
- Gửi
sitemap (/sitemap.xml) lên Google Search Console.
- Đảm bảo
mỗi bài viết có tiêu đề hấp dẫn và mô tả ngắn gọn.
9. XỬ LÝ SỰ CỐ THƯỜNG GẶP
9.1. Menu không hiển thị trên mobile
- Nguyên
nhân: JavaScript bị lỗi.
- Cách
sửa: Kiểm tra lại trong Bố cục xem widget Menu
chính có tên PageList2 không. Nếu đã xoá hoặc đổi ID, bạn
cần cập nhật lại selector trong script.
9.2. Slider ảnh không chạy tự động
- Kiểm
tra xem có đúng id sidebarImageSlider không.
- Đảm bảo
widget LinkList2 có class slider-container.
- Thử
tăng thời gian chờ trong setInterval từ 3500 lên 5000.
9.3. Ảnh đại diện bài viết không hiển thị trong Popular
Posts
- Bài
viết phải có ảnh đầu tiên hoặc ảnh được gắn thẻ
featured.
- Bạn
có thể dùng thẻ hình ảnh trong nội dung bài viết, template sẽ tự động lấy ảnh
đó.
9.4. Hero, Services, Features không hiển thị
- Các
section này chỉ hiển thị trên trang chủ nhờ điều kiện <b:if
cond='data:view.isHomepage'>.
- Nếu
muốn hiển thị trên trang khác, bạn cần sửa mã XML: thay data:view.isHomepage bằng true (không
khuyến khích).
9.5. Lỗi font chữ không thay đổi
- Template
dùng Google Font Open Sans. Nếu muốn dùng font khác, hãy thay link
font trong thẻ <link href='https://fonts.googleapis.com/...'> và
sửa font-family trong CSS.
10. MẸO & THỦ THUẬT NÂNG CAO
10.1. Thêm hiệu ứng loading cho ảnh
Bạn có thể thêm thuộc tính loading="lazy" vào
thẻ <img> trong các widget HTML để tăng tốc tải trang.
10.2. Chèn Google Maps vào trang Liên hệ
Tạo trang mới, chuyển sang chế độ HTML và nhúng iframe
Google Maps.
10.3. Tạo form liên hệ đơn giản
Dùng widget HTML với nội dung:
html
<form action="https://formspree.io/f/your-id" method="POST">
<input type="text"
name="name" placeholder="Họ tên" required>
<input type="email"
name="email" placeholder="Email" required>
<textarea name="message"
placeholder="Nội dung"></textarea>
<button type="submit">Gửi</button>
</form>
10.4. Thay đổi tốc độ chạy slider
Tìm trong thẻ <script> cuối trang:
javascript
setInterval(function() { ... }, 3500);
Sửa 3500 thành số mili giây mong muốn (3000 = 3
giây, 5000 = 5 giây).
10.5. Thêm breadcrumb (đường dẫn điều hướng)
Breadcrumb không có sẵn, nhưng bạn có thể thêm bằng cách
chèn mã JavaScript vào widget HTML hiển thị trên tất cả trang.
11. CẬP NHẬT VÀ BẢO TRÌ
11.1. Sao lưu định kỳ
Mỗi khi bạn sửa nhiều CSS hoặc thêm widget phức tạp, hãy
vào Chủ đề → Sao lưu / Khôi phục → Tải
chủ đề xuống để lưu lại bản sao.
11.2. Theo dõi lỗi từ Google Search Console
Đăng ký blog với Google Search Console để phát hiện lỗi
crawl, ảnh bị hỏng, hay tốc độ tải trang chậm.
11.3. Cập nhật template (nếu có phiên bản mới)
So sánh file XML mới với cũ, hoặc tải lên bản mới sau khi đã
sao lưu cũ.
theme-congty_v2.xml là một template mạnh mẽ, hiện đại và dễ tuỳ chỉnh dành cho Blogger. Với hướng dẫn trên, bạn hoàn toàn có thể:
- Cài đặt
thành công template
- Cấu
hình logo, menu, sidebar, footer
- Tuỳ
chỉnh màu sắc, nội dung các section
- Tối
ưu SEO và xử lý lỗi cơ bản
Hãy tận dụng các widget có sẵn và đừng ngại sửa mã HTML/CSS
để biến template này thành website chuyên nghiệp đúng thương hiệu của bạn.
Chúc bạn thành công! 🚀
Tài liệu được biên soạn bởi OPSOSO – Giải pháp mã nguồn mở.
Nếu cần hỗ trợ thêm, hãy truy cập opsoso.net hoặc gửi email về opsoso.net@gmail.com.