Xây Dựng Một Blog Cá Nhân Hoàn Chỉnh Bằng Blogger

May 4, 2018 0

Trải qua các bài học trước giờ đây các bạn đã nắm được những khái niệm cơ bản nhất để tạo một website miễn phí bằng Blogger, cách cài đặt, quản lí cũng như nhiều chức năng khác.

Trong bài này chúng ta sẽ đi vào ví dụ thực tế là Xây dựng một trang Blog cá nhân hoàn chỉnh bằng Blogger miễn phí và có thể ứng dụng trong thực tiễn.

Danh mục bài học:

  1. Tải và cài đặt template Blogger
  2. Tìm hiểu cơ bản về giao diện  của 1 website
  3. Kiểm tra giao diện trước khi sử dụng
  4. Chỉnh sửa giao diện và chức năng của template
  5. Ứng dụng thực tiễn

1. Tải và cài đặt template Blogger

Như đã nói Blogger là mã nguồn được cộng đồng khá ưa chuộng vì vậy mà có rất nhiều nguồn chia sẻ template và các chủ đề liên quan.Bạn có thể dễ dàng search Google với hàng trăm nghìn kết quả, trong bài này, mình đã chuẩn bị sẵn tài liệu cho bạn.

Đầu tiên, hãy xem demo website mà chúng ta sẽ làm: Demo

Ghi chú: Nhiệm vụ của bạn sau bài học này là biến trang web của bạn thành trang demo ở trên, dĩ nhiên mình muốn nói về phần giao diện còn nội dung thì thay bằng nội dung của bạn cũng được.

Bước 1: Download template 

Download template và dữ liệu mẫu: Template

Sau khi click vào link trên bạn tích vào ô vuông nhỏ để xác nhận và chọn “Click here to Continue”

Chờ 7s rồi nhấn “Get Link” sẽ được chuyển đến trang đích.

Ghi chú: Đây là 1 template mình tìm trên internet và đã chỉnh sửa đôi chút để phù hợp với nội dung bài học. Các bạn khi download template Blogger từ các nguồn khác cần chú ý tránh tải virus hoặc các nguồn không được uy tín.

Bước 2: Cài đặt

Ôn lại bài cũ một chút, chắc các bạn vẫn còn nhớ bài học Backup và Restore chứ? Nếu quên hãy xem lại ở link bên dưới nhé.

Thao tác đầu tiên luôn là Backup lại giao diện và nội dung website của bạn đề phòng mọi trường hợp xấu nhất, tiếp theo chúng ta tìm đến file mà bạn đã tải về ở trên và giải nén tập tin ra.

Ghi chú: Cách giải nén: Click chuột phải vào file template đã tải => Extract.

Bây giờ bạn sẽ thấy một thư mục có 2 file: GIAODIEN.XML và NOIDUNG.XML

Chúng ta sẽ Restore phần giao diện trước, trong bài học trước mình có hướng dẫn bạn restore bằng cách “Sao lưu chủ đề” nhưng trong bài này ta sẽ làm bằng cách khác.

Đối với cách Restore tại Menu “Chủ đề” ( trong bài học trước ), giao diện của chúng ta sẽ giữ lại những thay đổi về mặt bố cục website tại Menu “Bố cục”, tức là các sắp xếp về bố cục của bạn ở giao diện cũ sẽ được giữ nguyên.

Tuy nhiên, trong bài này chúng ta sẽ thay đổi tất cả bao gồm cả Bố cục và tạo ra một website hoàn toàn mới , để làm được điều này bạn phải đổi toàn bộ mã nguồn web và thay thế bằng mã nguồn của template mới.

Copy toàn bộ mã nguồn ở file GIAODIEN.xml

Cách làm: Click phải vào file GIAODIEN.XML chọn “Open with Notepad” bấm tổ hợp phím Ctrl + A ( bôi đen toàn bộ nội dung ), Ctrl + C ( Copy toàn bộ nội dung đã bôi đen ).

Tại Menu “Chủ đề” chọn “Chỉnh sửa HTML” bạn bôi đen toàn bộ nội dung code bằng tổ hợp Ctrl + A và chép nội dung đã copy ở trên vào bằng tổ hợp phím Ctrl + V bấm “Lưu chủ đề”.

Bây giờ, quay lại Website đã tạo của bạn mọi thứ đã hoàn toàn thay đổi phải không?

Lưu ý: Bước trên chỉ thực hiện sau khi đã Backup dữ liệu website trước đó, bao gồm nội dung và giao diện.

Như vậy là ta đã hoàn thành việc thay đổi giao diện tiếp đến ta sẽ tải dữ liệu lên để kiểm tra giao diện có hoạt động tốt không. Cách thức sao lưu nội dung bài đăng thì mình không nhắc lại, các bạn sử dụng file NOIDUNG.XML để Restore nhé.

Bây giờ, hãy kiểm tra lại website của bạn xem có giống với giao diện demo ở trên chưa nhé, chúng ta chỉ xét về giao diện, các phần về nội dung, chữ có thể khác.

2. Tìm hiểu cơ bản về giao diện của một website

Đến đây bắt buộc bạn phải biết chút ít về code để có thể chỉnh sửa giao diện, hãy xem hình mẫu ở dưới và nhớ tên các phần của 1 giao diện nhé.

Các thành phần cơ bản của một website

Áp dụng phân tích cho template:

Header: Ta có tên website, thanh menu và một khung tìm kiếm biểu tượng kính lúp.

Body: hiển thị nội dung bài viết với Tiêu đề, thông tin ( tác giả, ngày tháng, nhãn ), ảnh đại diện, vài dòng mô tả, nút “Xem thêm” và các biểu tượng Chia sẻ trên các mạng xã hội.

Widget: Thông tin tác giả, mạng xã hội, Danh mục, Popular ( bài đăng được xem nhiều ).

Footer: About ( thông tin website ), Popular, Labels (Nhãn).

Tùy vào số lượng các thành phần và độ phức tạp mà website được chia làm nhiều loại, đây được xem là một giao diện cơ bản với số lượng phần tử ít, dễ dàng chỉnh sửa, rất phù hợp cho người mới tiếp cận.

3. Kiểm tra template trước khi sử dụng

Khi đã có một website hoàn chỉnh với nội dung và cả giao diện, việc tiếp theo là test các chức năng và hiển thị để đảm bảo website có thể đi vào hoạt động.

Các trang mà mình luôn kiểm tra sau khi cài đặt 1 template đó là: Homepage (trang chủ), Post (bài viết), Page (trang), Category ( hay Labels còn gọi là nhãn/danh mục ).

Template này có cách hiển thị khá đơn giản đó là phần Header, Widget và Footer được giữ nguyên, phần Body ở Homepage và Category giống nhau, nên mình sẽ test các trang Home, Post và Page.

4. Chỉnh sửa giao diện và chức năng của template

Homepage ( Trang chủ )

Header

Mặc định góc trái thường sẽ là nút Home để người dùng trở về trang chủ, hiện nó đang hiển thị là tên web, bạn hãy vào một bài viết bất kì và test xem khi click vào nút này nó có trở lại trang chủ không nhé.

Bạn có thể chỉnh sửa Tiêu đề hoặc thay bằng một ảnh đại diện như web demo tại Menu “Bố cục” =>Header=>”Chỉnh sửa”.

Menu:

Tiếp theo là thanh menu: do template đã được mình chỉnh sửa nên bạn có thể sử dụng ngay, bạn hãy test lại bằng cách click chọn xem có nút nào bị lỗi không nhé.

Bước này bắt buộc ta sẽ đụng đến code nhưng bạn yên tâm là nó rất đơn giản:

Vào phần code của website, bạn click vào khung code nhấn tổ hợp phím “Ctrl + F”, một khung nhỏ ở góc phải xuất hiện, bạn nhập vào “liên hệ” và bấm “Enter”.

Chú ý đoạn code như trong ảnh:

Chắc bạn cũng nhận ra phần chữ đen là phần hiển thị trên Website còn phần chữ đỏ chính là đường dẫn ( URL ) của nút đó, hãy thay đổi các tên nhãn phù hợp với Blog của bạn và thay đổi URL  luôn nhé.

Ghi chú:

Cách đổi URL: tại trang chủ website bạn nhìn ở widget bên phải phần Danh mục, click phải vào danh mục mà bạn muốn lấy URL chọn “Sao chép địa chỉ liên kết”.

Lấy đường dẫn (link) của Nhãn tại Danh mục ở Widget

Nếu không có Danh mục của bạn ở Widget có nghĩa là chưa có bài viết nào thuộc danh mục này được xuất bản, hãy đăng một nội dung và chọn nhãn cho nó nhé.

Chữ đỏ trong nháy đơn được khoanh đỏ là URL, chữ đen được khoanh đen là chữ xuất hiện trên Website mà người dùng nhìn thấy.

Trở lại phần code bạn xóa URL mặc định trong dấu ngoặc ( là vùng khoanh đỏ ở hình trên ) và bấm tổ hợp phím “Ctrl + V” để dán URL đã Copy vào, bấm “Lưu chủ đề” và quay lại  Refresh ( F5) website, kiểm tra xem thay đổi đã đúng chưa.

Khung tìm kiếm:

Click vào nút hình kính lúp và điền tên một bài viết bất kì xem nó có hoạt động không

Body:

Click vào tất cả các phần tử trong body bao gồm Tên bài viết, tác giả, ngày tháng, nhãn, nút “Xem thêm”, các nút chia sẻ để kiểm tra.

Ghi chú:

tạm thời ta sẽ sử dụng phần Body mặc định để ít chỉnh sửa code nhất có thể.

Widget:

Phần tác giả hiện mặc định là thông tin của tác giả template.

Mạng xã hội: hiện chỉ là đường link dẫn đến các mạng xã hội.

Danh mục: hiện ra toàn bộ danh mục ( nhãn ) của các bài viết.

Popular/Recent/Comment: chính là Bài viết nhiều lượt xem nhất/bài viết mới đăng/comment mới nhất.

Rất may mắn là các phần này đều có thể chỉnh sửa trong phần Bố cục ( thật ra mình đã chỉnh sửa chút ít ).

Bạn không thể thay đổi thông tin tác giả tại đây

Bạn vào menu “Bố cục”, chọn “Chỉnh sửa” ở Giới thiệu tác giả, bạn sẽ thấy rằng chúng ta không thể thay đổi gì nhiều ở đây, thật ra do đoạn này sử dụng Code lấy thông tin của bạn ở Blogger, nên muốn thay đổi bạn chỉ cần cập nhật thông tin bằng cách sau.

Vào Menu “Cài đặt” => “Cài đặt người dùng” tích chọn “Blogger” và bấm “Chỉnh sửa”, các mục mà bạn cần chỉnh sửa gồm: Tên hiển thị và Giới thiệu ( các mục khác tùy ý bạn nhé, vì chỉ có tên và giới thiệu được show ra ngoài).

Mục “Mạng xã hội” bạn có thể thêm số mục muốn hiển thị, thay đổi cách sắp xếp, hay thêm một mạng xã hội mới bằng cách điền tên và URL sau đó bấm thêm liên kết.

Đối với các liên kết có sẵn bạn có thể sắp xếp vị trí bằng các dấu mũi tên, chỉnh sửa (Edit) hoặc xóa (Delete).

Ở phần “Danh mục” hiện nó đang hiển thị mặc định, mình muốn bạn thử tất cả các tùy chọn khác và xem cách nó hiển thị nhé, đừng lo, nếu có lỗi chỉ cần chọn lại là được.

“Bài viết nổi bật” cũng tương tự Danh mục, hãy chỉnh sửa nó theo ý thích của bạn nhé.

Footer:

Đây là phần cuối cùng mà ta sẽ chỉnh sửa:

About: hãy điền một đoạn giới thiệu website của bạn ví dụ: đây là Blog của … rất hân hạnh được bạn ghé thăm!!!

Popular: Giống với Widget ở trên

Danh mục: Giống với Widget ở trên

Post ( Trang bài viết )

Bạn có thể thấy là trang bài viết (Post Page) chỉ khác trang chủ (Home page) phần Body, thay vì hiển thị các bài viết thì nó show nội dung 1 bài bên dưới là bài viết liên quan và bình luận.

Tạm thời ta sẽ sử dụng mà không chỉnh sửa nữa, đối với một template cơ bản thì như vậy là ổn.

Page ( Trang )

Riêng phần “Trang” mình xin nói thêm một chút, hiện bạn có thể chưa hiểu hoặc không thấy được sự khác biệt giữ Trang và Bài viết.

Giai đoạn này bạn chỉ cần hiểu Page là loại trang có nội dung ít thay đổi, không được phân chia Category, thường không có phần bình luận nên Page chỉ dùng cho các trang như Liên Hệ, Giới thiệu.

Như vậy, template hiện tại với giao diện này đã đáp ứng được các tiêu chí của Page nên ta sẽ sử dụng mà không chỉnh sửa nữa. Về mặt nội dung bạn vẫn còn nhớ cách để chỉnh sửa “Trang” phải không nào?

5. Ứng dụng thực tiễn

Bước này khá đơn giản đó là:

Thử lại tất cả chức năng gồm đăng bài viết, đăng trang, bình luận,…

Xem các trang như Home, Post, Page, Category đã hiển thị đúng ý chưa

Nhấn vào tất cả các link trên web xem đã hoạt động chưa

Cuối cùng là kiểm tra khả năng tương thích trên các thiết bị di động:

Tại trang web bạn nhấn “F12”, góc trên màn hình bạn chọn các loại thiết bị để xem cách mà website hiển thị đã tốt chưa, hình ảnh, chữ có bị tràn không…

Đối với template của chúng ta có hỗ trợ giao diện cho các thiết bị di động ( Responsive ) nên ta sẽ không dùng trang di động mặc định của Blogger nữa.

Bạn vào Menu “Chủ đề” tại phần Điện thoại di động bạn click cài đặt và chọn “Không. Hiển thị chủ đề dành cho máy tính để bàn trên thiết bị di động”.

Lưu ý:

Để chắc chắn hãy sử dụng điện thoại hoặc các thiết bị di động truy cập web để kiểm tra.

Nếu template không hỗ trợ Responsive bạn có thể chọn “Có. Hiển thị chủ đề dành cho thiết bị di động trên thiết bị di động.” và lựa chọn các mẫu Blogger cung cấp sẵn.

Ghi chú:

Sau khi hoàn tất bạn nên backup dữ liệu một lần nữa, các bài viết demo có thể xóa đi và thay bằng các bài viết của bạn. Do ban đầu chúng ta thay thế toàn bộ mã nguồn nên các phần code bạn chèn trước đó cũng bị mất ( Webmaster Tool, Analytic… ), đừng quên cập nhật lại.

Đây là những bước cơ bản để bạn tạo ra một Blog cá nhân hoàn chỉnh, tuy rằng bước đầu còn đơn giản nhưng chắc chắn sẽ là tiền đề để bạn tiến lên và tiếp tục đam mê.

Đối với các bạn yêu thích muốn tìm hiểu sâu hơn, có thể download template gốc tại đây và chỉnh sửa sao cho ra giống mẫu như bài học nhé, ban đầu sẽ cò nhiều khó khăn, nhưng dần dà bạn sẽ quen và hoàn thiện hơn.

Trong quá trình học, nếu gặp thắc mắc cần giải đáp bạn có thể để lại comment bên dưới các bài viết của mình để được hỗ trợ nhé.

Đi đến bài học tiếp theo nào:

Tags: Blogger cơ bản, Blogger Templates, Personal Blogger Templates Categories: Blogger
share SHARE
Related Posts
Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *