Opsoso_news_v3: Giao Diện Tin Tức Chuyên Đại Cho Nền Tảng Blogger - Miễn phí tất cả chức năng

Opsoso.net – Sáng tạo giá trị, định hình phong cách web.

Tải ngay nào!  hoặc tải tại đây

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

1. Giới thiệu về Theme Opsoso News v3

Theme này đặc biệt phù hợp với các trang tin tức, tạp chí, blog công nghệ, kinh doanh hoặc bất kỳ website nào cần trình bày nội dung dạng danh sách và bài viết chuyên nghiệp.

Trong hướng dẫn này, tôi sẽ đi qua từng bước để bạn có thể cài đặt, cấu hình và sử dụng tất cả các tính năng của theme một cách hiệu quả.

2. Yêu cầu hệ thống và cách cài đặt

2.1. Yêu cầu

• Một tài khoản Blogger (blogspot.com) đã được tạo.

• Quyền truy cập vào mục Chủ đề trong trang quản trị Blogger.

• File theme opsoso_news_v3.xml (bạn đã có).

2.2. Cài đặt theme

1. Đăng nhập vào Blogger, chọn blog của bạn.

2. Vào menu bên trái, chọn Chủ đề.

3. Nhấn vào nút mũi tên xuống bên cạnh nút Tùy chỉnh, chọn Sao lưu để lưu lại theme hiện tại (phòng trường hợp muốn khôi phục).

4. Nhấn vào nút Chỉnh sửa HTML (hoặc nếu có nút Khôi phục thì nhấn vào đó để tải file lên).

5. Trong cửa sổ mới, nhấn Chọn tệp và chọn file opsoso_news_v3.xml từ máy tính.

6. Nhấn Tải lên và chờ vài giây. Nếu không có lỗi, bạn sẽ thấy thông báo thành công.

7. Sau khi tải lên, bạn có thể nhấn Xem blog để kiểm tra giao diện mới.

Lưu ý: Nếu bạn đã có dữ liệu (bài viết, nhãn) trước đó, tất cả vẫn được giữ nguyên. Theme chỉ thay đổi giao diện hiển thị.

3. Tổng quan giao diện

Sau khi cài đặt, blog của bạn sẽ có cấu trúc như sau:

3.1. Thanh trên cùng (Top Bar)

• Hiển thị ngày tháng hiện tại (theo định dạng Việt Nam).

• Các biểu tượng mạng xã hội (Facebook, X (Twitter), Instagram, YouTube…).

• Có thể thay đổi liên kết và thêm bớt mạng xã hội thông qua widget LinkList trong bố cục.

3.2. Header và Menu

• Logo (có thể là hình ảnh hoặc text) được lấy từ widget Header.

• Menu điều hướng (dạng danh sách liên kết) do widget LinkList đảm nhiệm.

• Biểu tượng kính lúp để mở ô tìm kiếm toàn màn hình.

3.3. Breaking News (Tin nóng)

• Chỉ xuất hiện ở trang chủ.

• Hiển thị một dòng chữ chạy ngang (marquee) với các tiêu đề tin nóng.

• Bạn có thể cấu hình các tin này qua widget LinkList đặc biệt.

3.4. Khu vực nội dung chính

• Hero (bài viết nổi bật): Chiếm toàn bộ chiều rộng, hiển thị ảnh lớn, tiêu đề, tác giả và ngày đăng. Được lấy từ widget FeaturedPost.

• Các mục theo nhãn: Theme hỗ trợ hiển thị các bài viết thuộc một nhãn cụ thể (ví dụ: Công nghệ, Kinh doanh, Sức khỏe). Mỗi mục có tiêu đề và nút “Xem thêm” dẫn đến trang nhãn.

• Danh sách bài viết mới nhất: Ở các trang như nhãn, trang chủ (nếu không có hero) hoặc kết quả tìm kiếm, bài viết sẽ hiển thị dạng lưới (grid) với ảnh, tiêu đề, ngày tháng.

• Sidebar (cột bên phải): Chứa các widget như đăng ký nhận tin, bài viết xem nhiều, danh sách chuyên mục, biểu mẫu liên hệ…

3.5. Footer

• Chia làm 3 cột, có thể thêm các widget như Giới thiệu, Liên kết nhanh, Chính sách.

• Hiển thị bản quyền và năm hiện tại.

4. Tùy chỉnh màu sắc

Theme sử dụng bảng màu có thể thay đổi trực tiếp qua Trình chỉnh sửa màu của Blogger.

Các bước thực hiện:

1. Vào Chủ đề → nhấn Tùy chỉnh.

2. Chọn tab Nâng cao → Màu sắc.

3. Bạn sẽ thấy các nhóm màu:

   • Primary Color: Màu chủ đạo (mặc định đỏ #e63946) – dùng cho các điểm nhấn như badge, nút, border.

   • Secondary Color: Màu phụ (mặc định xanh đậm #1d3557) – dùng cho nền top bar, footer.

   • Background Color: Màu nền tổng thể (mặc định be nhạt #f5f2e9).

   • Text Dark: Màu chữ chính (gần đen).

   • Text Muted: Màu chữ mờ (xám).

4. Nhấp vào từng ô màu để chọn màu sắc mong muốn. Thay đổi sẽ được áp dụng ngay lập tức.

5. Nhấn Áp dụng cho blog để lưu.

Ví dụ: Bạn muốn đổi màu chủ đạo thành cam (#f39c12), chỉ cần chọn ô Primary Color và nhập mã cam.

5. Cấu hình các widget quan trọng

5.1. Widget Header (Logo)

• Widget này nằm trong section header-section.

• Nếu bạn muốn hiển thị logo bằng hình ảnh:

  1. Vào Bố cục → nhấn Chỉnh sửa vào widget Header.

  2. Chọn Ảnh từ máy tính hoặc nhập URL ảnh logo.

  3. Bỏ chọn Thu nhỏ ảnh để vừa khung nếu muốn ảnh giữ nguyên kích thước.

  4. Nhấn Lưu.

• Nếu không dùng ảnh, tiêu đề blog sẽ được hiển thị dưới dạng chữ.

5.2. Widget Social Links (Top Bar)

• Widget này thuộc section top-social, loại LinkList.

• Để thay đổi các liên kết mạng xã hội:

  1. Vào Bố cục → tìm widget Social Links → nhấn Chỉnh sửa.

  2. Trong danh sách, bạn có thể thêm, sửa hoặc xóa các liên kết.

  3. Tên nhập tên mạng xã hội (ví dụ: Facebook, X, Instagram). Tên này sẽ quyết định biểu tượng hiển thị (dùng Font Awesome). Các tên được hỗ trợ tự động: Facebook, X (Twitter), Instagram, YouTube, LinkedIn.

  4. Địa chỉ liên kết nhập URL đầy đủ (ví dụ: https://facebook.com/trangcuaban).

  5. Nhấn Lưu.

5.3. Widget Menu điều hướng

• Widget LinkList trong section nav-section tạo menu chính.

• Tương tự như social links, bạn thêm các liên kết mong muốn. Lưu ý:

  • Để liên kết đến trang chủ, nhập / (dấu gạch chéo).

  • Để liên kết đến trang nhãn, nhập /search/label/Tên%20nhãn (ví dụ: /search/label/Công%20nghệ).

  • Có thể thêm các trang tĩnh bằng URL đầy đủ.

5.4. Widget Breaking News

• Nằm trong section breaking-news-section, loại LinkList với tiêu đề “TIN NÓNG”.

• Các liên kết bạn thêm vào đây sẽ chạy ngang trong khung breaking news.

• Mỗi liên kết gồm tên (tiêu đề tin) và URL (đường dẫn bài viết).

• Có thể thêm bao nhiêu tùy thích, chúng sẽ tự động chạy.

5.5. Widget Featured Post (Hero)

• Widget FeaturedPost trong section hero-section hiển thị bài viết nổi bật.

• Cách chọn bài viết nổi bật:

  1. Vào Bố cục → nhấn Chỉnh sửa trên widget Featured News.

  2. Tại mục Chọn bài viết, bạn có thể chọn một bài viết cụ thể từ danh sách thả xuống, hoặc chọn Sử dụng bài viết gần đây nhất.

  3. Nhấn Lưu.

• Hero sẽ hiển thị ảnh đại diện của bài viết, tiêu đề, tác giả và ngày đăng. Nếu bài viết không có ảnh, ảnh mặc định sẽ được sử dụng.

5.6. Các mục theo nhãn (Label Sections)

Đây là tính năng đặc biệt của theme: bạn có thể tạo nhiều mục riêng cho từng nhãn, mỗi mục hiển thị 4 bài viết mới nhất của nhãn đó.

Cách tạo một mục “Tin Công Nghệ”:

1. Vào Bố cục → nhấn Thêm tiện ích trong khu vực main-label-sections (chỉ xuất hiện ở trang chủ).

2. Chọn loại HTML/JavaScript.

3. Đặt tiêu đề (ví dụ: “Tin Công Nghệ”).

4. Trong phần nội dung, bạn chỉ cần nhập tên nhãn (ví dụ: Công nghệ). Không cần nhập bất kỳ mã HTML nào.

5. Nhấn Lưu.

6. Lặp lại cho các nhãn khác (Kinh doanh, Sức khỏe…).

Theme tự động tải 4 bài viết thuộc nhãn đó và hiển thị dạng lưới. Nút “Xem thêm” sẽ tự động trỏ đến trang nhãn tương ứng.

Lưu ý: Tên nhãn bạn nhập phải chính xác với nhãn đã gán trong bài viết. Ví dụ: nếu bài viết có nhãn "Công nghệ" thì nhập Công nghệ, không nhập "công nghệ" viết thường nếu nhãn viết hoa.

5.7. Widget Sidebar

a. Widget Đăng ký nhận tin (HTML)

• Widget HTML1 trong sidebar mặc định là form đăng ký newsletter.

• Bạn có thể thay đổi nội dung form bằng cách chỉnh sửa widget, nhưng nên giữ lại cấu trúc cơ bản (input, button) để đảm bảo giao diện.

• Để tích hợp dịch vụ gửi email thực tế, bạn cần thay thế button bằng mã theo dõi của dịch vụ (ví dụ: Mailchimp).

b. Widget Xem nhiều nhất (PopularPosts)

• Hiển thị các bài viết phổ biến dựa trên số lượt xem (nếu blog bạn có bật tính năng thống kê).

• Bạn có thể tùy chỉnh số lượng bài hiển thị (mặc định 10) và có hiển thị ảnh hay không.

• Cách chỉnh sửa: Vào Bố cục → nhấn Chỉnh sửa trên widget Xem nhiều nhất → điều chỉnh các tùy chọn.

c. Widget Chuyên mục (Label)

• Hiển thị danh sách các nhãn dưới dạng list.

• Có thể bật/tắt hiển thị số lượng bài viết.

• Để thay đổi kiểu hiển thị (list hoặc cloud), bạn cần chỉnh sửa mã HTML (không khuyến khích người mới). Mặc định là dạng list đẹp với hiệu ứng neumorphism.

d. Widget Biểu mẫu liên hệ (ContactForm)

• Cho phép độc giả gửi tin nhắn trực tiếp đến email của bạn.

• Khi có tin nhắn mới, bạn sẽ nhận được email thông báo qua địa chỉ email quản trị Blogger.

• Widget này hoạt động ngay mà không cần cấu hình thêm.

e. Các widget khác

Bạn có thể thêm bất kỳ widget nào khác (Text, LinkList, Image…) vào sidebar. Chúng sẽ tự động mang phong cách neumorphism.

5.8. Footer

Footer được chia làm 3 section: footer-1, footer-2, footer-3. Bạn có thể thêm widget vào từng section tùy ý.

• footer-1: Mặc định là widget Text giới thiệu về blog. Bạn có thể thay đổi nội dung.

• footer-2: Widget LinkList “Liên kết nhanh”. Thêm các liên kết quan trọng.

• footer-3: Widget LinkList “Chính sách”. Thêm các trang điều khoản, bảo mật.

Bản quyền và năm hiện tại được cập nhật tự động qua JavaScript.

6. Tính năng đặc biệt

6.1. Tìm kiếm toàn màn hình (Search Overlay)

• Khi nhấn vào biểu tượng kính lúp trên header, một overlay tìm kiếm sẽ xuất hiện.

• Nhập từ khóa và nhấn Enter để tìm kiếm.

• Để đóng, nhấn nút X hoặc phím Escape.

• Tính năng này hoạt động ngay lập tức, không cần cấu hình.

6.2. Nút Tải thêm bài viết (Load More)

• Ở trang chủ, trang nhãn, hoặc trang kết quả tìm kiếm, bạn sẽ thấy nút Tải thêm bài viết ở cuối danh sách.

• Khi nhấn, các bài viết tiếp theo sẽ được tải bằng AJAX và thêm vào cuối trang mà không làm mới toàn bộ.

• Nút này hoạt động dựa trên cơ chế phân trang của Blogger. Bạn không cần làm gì thêm.

6.3. Hiển thị bài viết theo nhãn động (JavaScript)

• Như đã đề cập ở mục 5.6, các mục “Tin theo nhãn” sử dụng JavaScript để gọi dữ liệu từ feed của Blogger.

• Script loadLabelPosts được định nghĩa sẵn trong theme, tự động lấy 4 bài viết mới nhất cho mỗi nhãn.

• Ảnh đại diện được xử lý để hiển thị chất lượng cao (thay tham số s72-c thành w640).

6.4. Hiệu ứng Neumorphism

• Các khung, thẻ bài viết, nút bấm đều có bóng đổ kép (sáng và tối) tạo cảm giác nổi hoặc lõm.

• Khi hover, các phần tử có thể thay đổi bóng đổ để tạo hiệu ứng tương tác.

7. Hướng dẫn sử dụng các tính năng nâng cao

7.1. Tạo thêm mục “Tin theo nhãn” với số bài viết khác

Mặc định mỗi mục hiển thị 4 bài. Nếu muốn thay đổi số lượng, bạn cần sửa mã JavaScript.

1. Vào Chủ đề → Chỉnh sửa HTML.

2. Tìm đoạn code có chứa max-results=4 trong hàm loadLabelPosts (dòng khoảng 65).

3. Thay số 4 bằng số lượng bạn muốn (ví dụ: 6).

4. Lưu theme.

Ngoài ra, nếu bạn muốn thêm một mục mới mà không cần vào bố cục, bạn có thể sao chép một widget HTML hiện có và thay đổi nội dung (tên nhãn) trong phần cài đặt.

7.2. Sử dụng ảnh đại diện chất lượng cao

Theme đã tự động chuyển đổi kích thước ảnh từ thumbnail mặc định của Blogger (thường rất nhỏ) sang kích thước lớn hơn (640px chiều rộng). Điều này đảm bảo ảnh hiển thị sắc nét trên màn hình Retina.

Nếu bạn muốn thay đổi kích thước, hãy tìm trong code dòng:

javascript

img = img.replace(/\/(s|w)[0-9]+[a-zA-Z0-9-]*(?=\/)/, '/w640');

Thay w640 bằng kích thước mong muốn (ví dụ: w800).

7.3. Tùy chỉnh nội dung Breaking News

Bạn có thể thay đổi tốc độ chạy chữ bằng cách sửa thuộc tính scrollamount của thẻ <marquee>. Tìm trong widget LinkList3:

html

<marquee behavior='scroll' direction='left' scrollamount='3'>...</marquee>

Tăng hoặc giảm giá trị scrollamount để điều chỉnh tốc độ.

7.4. Thêm hiệu ứng khi hover menu

Mặc định menu có hiệu ứng bóng đổ inset khi hover. Nếu muốn thay đổi, bạn có thể tìm đến class nav ul li a:hover trong phần CSS và điều chỉnh.

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

8.1. Các mục “Tin theo nhãn” không hiển thị bài viết

• Kiểm tra lại tên nhãn: nhập đúng chính tả, có dấu hay không dấu tùy theo cách bạn gán nhãn.

• Đảm bảo có ít nhất một bài viết mang nhãn đó đã được xuất bản.

• Kiểm tra console trình duyệt (F12) xem có lỗi JavaScript không. Nếu có lỗi, có thể do tên nhãn chứa ký tự đặc biệt hoặc do feed bị chặn.

8.2. Nút Load More không hoạt động

• Nút này chỉ hoạt động khi bạn đang ở chế độ xem danh sách (trang chủ, nhãn, tìm kiếm). Nếu ở trang bài viết đơn lẻ, nút sẽ không xuất hiện.

• Kiểm tra xem có nhiều hơn số bài viết hiển thị trên một trang hay không. Nếu chỉ có 1 trang, nút sẽ không hiện.

• Đảm bảo theme không bị xung đột với các widget khác. Thử tắt một số widget để kiểm tra.

8.3. Ảnh bài viết không hiển thị trong mục “Xem nhiều nhất”

• Widget PopularPosts yêu cầu bài viết phải có thumbnail (ảnh đại diện). Nếu bài viết không có ảnh, nó sẽ hiển thị placeholder (nếu có) hoặc không hiển thị ảnh.

• Bạn có thể thêm ảnh vào bài viết bằng cách chèn ảnh đầu tiên trong nội dung.

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

Theme đã được tối ưu cho mobile. Tuy nhiên, nếu có vấn đề, hãy kiểm tra lại phần <meta name="viewport" content="width=device-width, initial-scale=1.0"> trong thẻ <head>. Nó đã có sẵn.

Chúc bạn thành công và có những trải nghiệm tuyệt vời với Opsoso News v3!

---

Tài liệu được viết bởi Opsoso.net – Chuyên cung cấp các giải pháp theme Blogger chất lượng