Hướng dẫn bắt đầu và cài đặt Plus Ui v3

Vừa mua mẫu thiết kế xong? Hãy bắt đầu thôi.

Để tải xuống giao diện, bạn cần thực hiện mua hàng thông qua Gumroad. Nếu bạn đã mua giao diện bằng các phương thức khác hoặc muốn hỏi điều gì đó trước khi mua hàng, vui lòng gửi email đến contact[at]fineshopdesign[dot]com.

Table of Contents

Download Files

Hãy chắc chắn rằng bạn đã tải xuống tất cả các tệp cần thiết từ Gumroad sau khi mua hàng. Nếu bạn chưa tải xuống, hãy làm theo các bước sau:

Via Email receipt:

  1. Hãy mở email xác nhận của bạn. Nhấp vào nút Xem nội dung để đến trang tải xuống sản phẩm.
  2. Nếu bạn không nhận được email xác nhận, vui lòng kiểm tra thư mục thư rác. Nếu vẫn không tìm thấy, vui lòng liên hệ với chúng tôi.
  3. Trước khi được chuyển hướng đến trang tải xuống, bạn có thể được yêu cầu nhập địa chỉ email. Chỉ cần nhập email bạn đã sử dụng khi thanh toán, và bạn sẽ có thể truy cập trang tải xuống.

Thông qua tài khoản Gumroad:

  1. Ngoài ra, bạn có thể tạo tài khoản Gumroad bằng địa chỉ email mà bạn đã sử dụng để mua sản phẩm trước đó.
  2. Với tài khoản Gumroad, bạn có thể truy cập các sản phẩm đã mua bất cứ lúc nào từ Thư viện của mình.

Tải xuống tệp .ZIP của phiên bản mới nhất và giải nén.

Nếu bạn đã mua mẫu giao diện chính thức nhưng không phải qua Gumroad, vui lòng liên hệ với chúng tôi.

Thông tin hữu ích

Trước khi bắt đầu hướng dẫn cài đặt giao diện, bạn nên biết về các cài đặt cơ bản của Blogger, chẳng hạn như cách tùy chỉnh hoặc chỉnh sửa HTML. Bạn có thể cần mở các cài đặt này nhiều lần khi tùy chỉnh blog với giao diện tùy chỉnh như Plus UI.

Trang thiết kế giao diện

Từ trang Thiết kế giao diện, chúng ta có thể chỉnh sửa các cài đặt cơ bản như màu sắc/nền và độ dài. Các giao diện mặc định cho phép chúng ta thêm CSS tùy chỉnh hoặc thay đổi kiểu chữ. Giao diện của chúng tôi không cho phép thêm CSS tùy chỉnh và thay đổi kiểu chữ thông qua trang này do một số hạn chế.

Các bước để truy cập Trang thiết kế giao diện:

  1. Truy cập Bảng điều khiển Blogger.
  2. Điều hướng đến Chủ đề và nhấp vào nút Tùy chỉnh.

    Mẹo!
    Ngoài ra, bạn có thể điều hướng đến Bố cục và nhấp vào liên kết Thiết kế chủ đề.

    Bạn hiện đang ở trang Thiết kế chủ đề.
  3. Trang này nên có 3 menu, đó là Nền, Nâng cao và Tiện ích ở bên trái và bản xem trước trang chủ blog ở bên phải.
  4. Bằng cách nhấp vào tab Nâng cao, bạn có thể chọn thành phần bạn muốn chỉnh sửa từ menu thả xuống.

Chỉnh sửa HTML

Tính năng này cho phép bạn toàn quyền chỉnh sửa giao diện, cho phép chúng ta sửa đổi mã XML của giao diện. Mã XML này có thể được coi là mã nguồn vì nó chứa các cài đặt và nội dung dưới dạng mã đánh dấu giao diện Blogger hợp lệ được hiển thị thành HTML khi trang web được truy cập. Mã XML này thường chứa các thẻ giao diện Blogger, thẻ HTML, nhận xét và nội dung văn bản bao gồm CSS và JS.

Bạn cũng có thể cài đặt giao diện bằng cách ghi đè mã XML hiện có bằng mã XML của giao diện mới. Hãy nhớ rằng, phương pháp này sẽ đặt lại các cài đặt và widget của giao diện cũ về cài đặt và widget mặc định của giao diện mới.

Các bước để truy cập Trình chỉnh sửa XML giao diện:

  1. Truy cập Bảng điều khiển Blogger.
  2. Nhấp vào biểu tượng bên cạnh nút Tùy chỉnh.
  3. Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển hướng đến trang chỉnh sửa.
Làm thế nào để truy cập trực tiếp vào một widget có ID cụ thể?

Để cải thiện quá trình chỉnh sửa, Blogger cung cấp tính năng cho phép chuyển trực tiếp đến một widget cụ thể, bạn có thể nhấn vào đó. Nhấp vào biểu tượng, sau đó ID của widget sẽ được hiển thị, hãy chọn widget bạn muốn chỉnh sửa.

Cài đặt trên thiết bị di động

Về cơ bản, tính năng này được sử dụng để xác định giao diện của blog khi truy cập qua thiết bị di động. Phiên bản dành cho thiết bị di động được đánh dấu bằng ?m=1 ở cuối URL và không thể xóa được.

Hầu hết các giao diện tùy chỉnh hiện nay đều hỗ trợ responsive, thậm chí một số giao diện cao cấp còn hỗ trợ Adaptive Layout, do đó không cần thiết phải thiết lập cho thiết bị di động nữa. Chúng tôi khuyên bạn nên chọn giao diện dành cho máy tính để bàn khi hiển thị trên thiết bị di động.

  1. Trong Bảng điều khiển Blogger, hãy nhấp vào Giao diện.
  2. Nhấp vào biểu tượng bên cạnh nút Tùy chỉnh.
  3. Nhấp vào Cài đặt di động, trong tùy chọn 'Bạn muốn hiển thị chủ đề Máy tính để bàn hoặc Di động trên thiết bị di động?', hãy chọn Máy tính để bàn.
  4. Nhấp vào Lưu

Cài đặt giao diện

Có hai cách để cài đặt giao diện, chúng tôi khuyên bạn nên sử dụng phương pháp thứ hai nếu bạn đang cài đặt một phiên bản giao diện cụ thể lần đầu tiên.

Cần thời gian!
Chúng tôi khuyên bạn nên cài đặt giao diện nếu bạn có đủ thời gian, bạn không nên bỏ mặc blog của mình chỉ sau khi cài đặt giao diện. Một vài tùy chỉnh cần được thực hiện ngay sau khi cài đặt giao diện. Vui lòng liên hệ với chúng tôi nếu bạn gặp khó khăn ở bất kỳ đâu.

Tải lên XML

Cách dễ nhất để cài đặt giao diện Blogger là tải trực tiếp tệp .XML lên:

  1. Trong menu Chủ đề, hãy nhấp vào biểu tượng bên cạnh biểu tượng Tùy chỉnh nút.
  2. Nhấp vào Khôi phục.
  3. Chọn tệp .XML mà bạn muốn tải lên, nhấp vào Tải lên rồi kiểm tra các thay đổi trên blog của bạn bằng cách nhấp vào Xem Blog hoặc làm mới trang blog của bạn trực tiếp.

Phương pháp này sẽ giữ lại các widget trong giao diện cũ, giao diện cuối cùng có thể khác với bản demo, hãy sử dụng phương pháp Ghi đè XML để cài đặt giao diện một cách sạch sẽ.

Ghi đè XML

Cách được khuyến nghị nhất để cài đặt giao diện tùy chỉnh là ghi đè trực tiếp mã XML của giao diện cũ, nhưng như đã đề cập ở trên, phương pháp này sẽ đặt lại tất cả các cài đặt và widget trong giao diện cũ và thay thế chúng bằng các cài đặt và widget tích hợp sẵn từ giao diện mới.

Cảnh báo!
Chúng tôi đặc biệt khuyến nghị bạn sao lưu giao diện trước đó trước khi sử dụng phương pháp này.

Xóa giao diện trước đó

Để đảm bảo Blogger không gộp giao diện cũ và giao diện mới, trước tiên chúng ta cần áp dụng một giao diện trống. Chúng ta làm như vậy để chắc chắn rằng không có gì bị gộp chung với giao diện mới.

  1. Sao chép đoạn mã chủ đề trống sau:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='clean-install.xml' b:templateVersion='0.0.1' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/><head><b:if cond='false'><b:skin><![CDATA[]]></b:skin></b:if></head><body><b:section id='_' maxwidgets='1' showaddelement='false'/></body></html>
    
  2. Đi đến Trình chỉnh sửa HTML của Blogger.
  3. Thay thế tất cả mã trong chủ đề trước đó, nhấp chuột phải › Chọn tất cả (⌘ + A).
  4. Nhấn ⌘ + V để dán toàn bộ mã đã sao chép trước đó.
  5. Lưu các thay đổi bằng cách nhấp vào biểu tượng ở góc trên bên phải của Trình chỉnh sửa HTML.

Áp dụng giao diện mới

Vì chúng ta đã xóa giao diện cũ bằng giao diện trống, giờ bạn có thể sử dụng tùy chọn Khôi phục để tải lên giao diện mới, điều này sẽ hữu ích nếu bạn đang sử dụng thiết bị di động. Hoặc bạn có thể sử dụng phương pháp sau:

  1. Mở tệp .XML từ thư mục đã giải nén bằng bất kỳ ứng dụng Soạn thảo văn bản nào.
  2. Sao chép tất cả mã giao diện xuất hiện, nhấn ⌘ + A › ⌘ + C để sử dụng các lệnh nhanh.
  3. Đi đến Trình chỉnh sửa HTML của Blogger.
  4. Thay thế tất cả mã trong giao diện cũ, nhấp chuột phải › Chọn tất cả (⌘ + A).
  5. Nhấn ⌘ + V để dán toàn bộ mã .XML đã sao chép trước đó.
  6. Lưu chủ đề bằng cách nhấp vào biểu tượng ở góc trên bên phải của Trình chỉnh sửa HTML.

Các bước tiếp theo

Sau khi cài đặt mẫu thành công, bạn cần tùy chỉnh mẫu để phù hợp với blog của mình. Ví dụ: bạn cần tự chỉ định biểu tượng favicon cho blog, thêm thông tin cho thẻ meta, tùy chỉnh văn bản mặc định, tùy chỉnh widget, v.v.

Khuyến nghị

Chúng tôi khuyên bạn nên thực hiện tùy chỉnh ban đầu ngay sau khi cài đặt mẫu, cũng như đọc các hướng dẫn sau đây để biết các phương pháp tốt nhất.

  1. Thiết lập cơ bản: Những việc cần làm ngay sau khi cài đặt giao diện, bao gồm:
    • Thêm biểu tượng favicon: Bắt đầu từ phiên bản v3, bạn cần thêm biểu tượng favicon cho blog của mình theo cách thủ công, khác với các phiên bản cũ hơn.
    • Thiết lập thẻ meta: Mẫu tự động thêm các thẻ meta chung bao gồm opengraph và twitter card cho bạn. Trong một số thẻ meta, chúng tôi sử dụng văn bản và URL hình ảnh mặc định, do đó bạn cần thay thế chúng bằng của riêng mình.
    Hướng dẫn: Thu thập thông tin để đảm bảo bạn tuân thủ các quy tắc tốt nhất khi sử dụng giao diện nhằm tránh các lỗi và hành vi không mong muốn.
    • Tỷ lệ và kích thước hình ảnh được khuyến nghị: Sử dụng tỷ lệ và kích thước hình ảnh được khuyến nghị cho các vị trí khác nhau để đảm bảo hình ảnh không bị cắt xén và phù hợp với vị trí đặt.
    • Tối ưu hóa: Tối ưu hóa blog và bài đăng của bạn để tránh các sự cố không mong muốn.

    Bạn có thể đọc Hướng dẫn và thiết lập cơ bản để biết thông tin và tài liệu chi tiết.
  2. Google Adsense: Giao diện sẽ tự động tải mã Google Adsense nếu blog của bạn được kết nối với tài khoản Google Adsense từ mục Thu nhập của blog.

    Bạn có thể đọc Google Adsense để biết thông tin và tài liệu chi tiết.
  3. Google Analytics: Giao diện sẽ tự động tải mã script Google Analytics nếu ID đo lường của Google Analytics đã được thêm vào thông qua Cài đặt Blog.

    Bạn có thể đọc Google Analytics để biết thông tin và tài liệu chi tiết.
  4. Thiết lập trang: Thiết lập các trang cơ bản bao gồm:
    • Liên hệ: Bạn nên tạo một trang liên hệ cho blog của mình để người dùng có thể dễ dàng liên hệ với bạn.
    • Sơ đồ trang web (tùy chọn): Trang sơ đồ trang web hiển thị danh sách các bài đăng và trang của blog của bạn một cách có tổ chức. Bạn có thể tạo một trang sơ đồ trang web, mặc dù điều này là tùy chọn. Lưu ý rằng chúng ta đang nói về trang sơ đồ trang web chứ không phải sơ đồ trang web XML. Sơ đồ trang web XML được Blogger tự động tạo và cập nhật tại /sitemap.xml và /sitemap-pages.xml trong thư mục gốc của blog.

Trước khi bắt đầu sử dụng bất kỳ tính năng nào của giao diện, chúng tôi khuyên bạn nên đọc tài liệu hướng dẫn về tính năng đó trước. Nếu không có tài liệu hướng dẫn nào cho một tính năng cụ thể, vui lòng liên hệ với chúng tôi.

Related Posts

Đăng nhận xét