15/10/2019

Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template)

Trong nội dung này, mình sẽ sử dụng chung 1 Template để thực hành thôi nhé.

bạn vào Link bên dưới tải Theme sau đó giải nén ra
https://drive.google.com/file/d/1AguVAWgyc9PGG-GsHty7AQaIsw5jxjKN/view?usp=sharing

Sau khi giải nén, bạn sẽ thấy folder có tên: Arlina Blogger Template.
Bạn tìm đến file “Arlina Theme 2017.XML” trong folder con Template.
Đây là file mà chính ta sử dụng để thực hành

Chi tiết các bước như sau:

1. Tải lên Theme cho Blog.

  1. Từ bảng điều khiển của Blogger. Click vào chủ đề
Nút chủ đề trên Bảng điều khiển Blogger  Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template) thiet ke cv voi blogger 5 1
Nút chủ đề trên Bảng điều khiển Blogger

2. Click vào “Sao lưu/Khôi phục”

Vị trí nút sao lưu/ khôi phục  Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template) thiet ke cv voi blogger 6
Vị trí nút sao lưu/ khôi phục

3. Click “Choose File” và chọn “Alrina Theme 2017.xml” (File được giải nén từ đường dẫn Arlina Blogger Template\Template) → Click “Tải lên”

tải file template dạng XML  Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template) thiet ke cv voi blogger 7
tải file template dạng XML

Nếu bạn làm đúng là file XML không bị lỗi thì màn hình “Sao lưu/ khôi phục” sẽ tự động đóng lại và khi bạn click vào nút “XEM BLOG” trên bảng điều khiển bạn sẽ nhìn thấy kết quả ^_^

Nếu bạn không hiểu cách làm, bạn có thể đọc lại bài này để hiểu cách làm bloger đơn giản nhất:

https://themarketingcorner.org/huong-dan-thiet-ke-cv-online-tren-blogger/

2. Định dạng Header, Footer

Phần này sẽ thay đổi các thành phần như trong hình để phù hợp với nội dung Blog của bạn

Bấm chuột phải vào nút “xem blog” và chọn chế độ “Open link in new tab” để mở Blog xem giao diện ở cửa sổ tab bên cạnh, Chúng ta sẽ refresh trang này để check sự thay đổi của Blog

Giao diện mặc định của Arlina  Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template) Ailine blogger 1

Trong tab của trang điều khuển, mục “CHỦ ĐỀ” bạn click vào “CHỈNH SỬA HTML”. 

Mục đích của phần này là để xác định dòng Code có phần tử bạn muốn thay đổi

Arlina blogger 2  Bài 3. Blogger – Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 2

Bây giờ bạn xác định lần lượt các yếu tố cần thay đổi từ trang chủ 

VD: Thay đổi “Web Tools” thành “Tài liệu”

Mình sẽ demo ví dụ này. Các phần khác các bạn làm tương tự

Click chuột vào vùng chứa HTML, nhấn “Ctrl+F” để mở hộp thoại Search và nhập vào “web tools”. Trường hợp có nhiều chữ “web tools” thì nhấn “Enter” cho đến khi tìm được dòng Code chứa “Web Tools” mình muốn sửa nhé.

Bạn chỉ cần xóa “Web Tools” và đánh vào “Tài liệu” như soạn thảo văn bản thông thường.

Các thư mục con của “Web Tools”. Các thư mục trên thanh Menu như SEO, Tips Blogger,… đều ở khu vực này, bạn có thể sửa cùng một lúc.

Nếu muốn xóa các thư mục con, chỉ cần xóa đoạn Code

Ví dụ: <li><a href=’#’ itemprop=’url’><span itemprop=’name’>Color Picker</span></a></li>

Xóa 1 thư mục con thì xóa dòng Code chứa thư mục đó.

Ví dụ: <li><a href=’http://www.idntheme.com’ itemprop=’url’ target=’_blank’><span itemprop=’name’>Template</span></a></li>

Sau khi thay đổi xong, Click vào “Lưu chủ đề”.

Arlina blogger 3  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 3

3. Cấu hình Sidebar trên blog

Các bạn vào “Bố cục” (layout) → Click “Thêm tiện ích” (Add a Gadget) và chọn các tiện ích bạn muốn thêm trên cửa sổ hiện lên.
Để xóa các tiện ích không cần thiết: “Chỉnh sửa” → Click vào “Xóa bỏ” trong cửa sổ hiện lên như trong hình bên dưới.

Arlina blogger 4  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 4

4. Đăng bài blogspost

Click “Bài đăng” (POST) → “Tạo bài đăng mới” (NEW POST)

Arlina blogger 5  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 5

Nhập tiêu đề bài viết. Blogspot quản lý bài viết dựa vào nhãn, mỗi bài viết bạn sẽ gắn với ít nhất một nhãn có liên quan tới chủ đề bài viết. Tên nhãn nên đặt trùng với tên thư mục. Ví dụ như “tài liệu”

Arlina blogger 6  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 6

Như vậy, tất cả các bài viết được gắn nhãn “Tài liệu” sẽ được hiển thị khi bạn Click vào nhãn “Tài liệu”. Khi Click vào nhãn “Tài liệu” bạn nhớ Copy lại đường URL để liên kết với thư mục “Tài liệu” trên thanh Menu ở bước tiếp theo.

Bạn có thể tìm thấy nhãn “tài liệu” khi Click vào đọc bài viết, bạn sẽ thấy phần nhãn như hình bên dưới:

Arlina blogger 7.1  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 7

Hoặc tại tiện ích “nhãn” bên Sidebar:

Arlina blogger 7.2  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 7

Vậy làm sao để khi Click vào mục “Tài liệu” trên thanh Menu, danh sách tất cả bài viết được gắn nhãn “tài liệu” sẽ hiện ra. Xem tiếp nhé.

Bạn vào mục chỉnh sửa Html, Ctrl+F và tìm “Tài liệu”

Tại vị trí href=’#’: Bạn xóa # và Copy Paste đường link ở Blog khi Click vào nhãn “tài liệu” vào.

Nhấn “Lưu chủ đề”.
Các phần khác các bạn làm tương tự nhé!

Arlina blogger 8  Bài 3. Blogger &#8211; Thiết kế Blog với giao diện có sẵn (Blogger Template) Arlina blogger 8

Bây giờ Blog của bạn đã dần định hình, hãy xây dựng nội dung thật tốt cho nó nhé.
Chúc các bạn thành công!

 

Blogger

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *