LÀM WEB‎ > ‎

Làm trang web miễn phí với Blogger

Trang web Blogger là trang web có dạng blog, có thể tùy chỉnh được giao diện. Các trang Blogger này khi tạo ra sẽ có địa chỉ web dạng trang-web-của-bạn.blogspot.com, tuy nhiên các bạn có thể đăng ký một tên miền riêng và chuyển sang tên miền riêng của bạn, ví dụ: trang-web-của-bạn.com.
Một số trang web ví dụ để bạn có động lực làm web bằng Blogger:

Học tiếng Nhật trực tuyến miễn phí - NHẬT NGỮ ONLINE SAROMA
Trang học tiếng Nhật saromalang.com

ベトナム生活ポータル
Trang nhật ký Saigon Life

Dưới đây là cách làm trang web (dạng blog) bằng Blogger. Bản quyền: (C) Saigon Phoenix.

 LÀM WEB MIỄN PHÍ VỚI BLOGGER 


Tạo Google Account (Tài khoản Google) miễn phí
(Nếu bạn đã có tài khoản rồi thì bỏ qua bước này)
Đăng ký Google Account miễn phí: Vào trang web http://www.blogger.com, ấn nút "SIGN UP" để tạo tài khoản Gmail

Bước 2: Tạo blog bằng Blogger
Đăng nhập (Log in): Đăng nhập vào http://www.blogger.com.
Nhấp chuột vào nút "Blog mới" (New blog). Nhập tiêu đề trang web (ví dụ "My First Website") và địa chỉ trên internet (ví dụ myfirstwebsite2012.blogspot.com). Chọn "Mẫu" (Template) loại "Đơn giản" (Simple). Mẫu càng đơn giản thì sau này thêm các thiết kế khác vào càng dễ dàng. Sau đó ấn nút "Tạo blog mới" là chúng ta đã khởi tạo xong blog bằng Blogger.

Bước 3: Thay đổi giao diện của blog
Blog vừa khởi tạo xong do chưa có thiết kế gì nên nhìn khá chán và nhạt nhẽo. Ở bước này, chúng ta sẽ biến trang blog thành một trang web chuyên nghiệp.
Trước tiên, chọn mẫu thiết kế đơn giản nhất. "Blog của tôi" => "Mẫu (Template)" => Nút "Tùy chỉnh (Customize)" (nằm bên trái nút "Chỉnh sửa HTML / Edit HTML").
Bên trên chọn "Đơn giản (Simple)", bên dưới chọn Mẫu (Template) đầu tiên (màu xanh dương), chú ý là chọn khác ở hình trên một chút (hình trên chọn mẫu cuối cùng) => "Áp dụng cho blog" => "Quay lại Blogger".

Thay đổi giao diện
Màn hình quản lý blog => Bố cục (Layout) => "Trình thiết kế mẫu (Template Designer)" (nằm ở dòng trên cùng).
(Dòng này: "Thêm, xóa, chỉnh sửa các tiện ích trên blog của bạn. Nhấp và kéo để sắp xếp lại các tiện ích. Để thay đổi số cột và chiều rộng, hãy sử dụng Trình thiết kế mẫu.") . Cách khác: Màn hình quản lý blog => Mẫu => "Tùy chỉnh".
"Trình thiết kế mẫu" => Chọn bố cục (layout) (ví dụ ở trên là phần tiêu đề - Header, bên trái là nội dung - Content, bên phải là cột - Column; chọn cả bố cục chân trang - Footer)

Thay đổi bề rộng website, font chữ, màu văn bản
"Điều chỉnh bề rộng (Adjust widths)": Thay đổi bề rộng trang, hay thanh trái/phải
"Nâng cao (Advance)": Thay đổi font, màu văn bản, v.v...

Xóa "Hồ sơ" (Giới thiệu bản thân)
Blog => Bố cục => "Biên tập Hồ sơ bản thân" => Ấn "Xóa"

Ẩn NavBar (thanh điều hướng navigation bar)
NavBar là thanh điều hướng nằm trên đầu mỗi trang blogspot mới khởi tạo (dùng để chuyển hướng sáng các blogspot khác).
Màn hình quản lý blog => "Mẫu" => "Chỉnh sửa HTML" => (ấn tiếp tục khi có cảnh báo) => Chọn ô "Mở rộng mẫu tiện ích (Extend template widget)"
Tìm tới dòng sau:
]]>
Thêm các dòng dưới đây ngay trước dòng trên:
#navbar { display: none; }
Hoặc:
#navbar-iframe { display: none !important; }

Xóa "Subscripe to: Posts (Atom)"
(Remove "Subscribe to: Posts (Atom)")
(1) Màn hình quản lý blog => "Mẫu" => "Chỉnh sửa HTML" => (Ấn Tiếp tục khi có cảnh báo) => Chọn ô "Mở rộng mẫu tiện ích (Extend template widget)"
(2) Tìm tới đoạn mã sau:
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
(3) Xóa dòng dưới đây:
<b:include data='feedLinks' name='feedLinksBody'/>
"Posts (Atom)" sẽ được xóa khỏi trang web của bạn.

Xóa "Powever by Blogger"
(1) Màn hình quản lý blog => "Mẫu" => "Tùy chỉnh" => "Nâng cao" => Ở cột bên trái chọn "Thêm CSS" và thêm dòng CSS bên dưới.

#Attribution1 {display: none;}

Mục này sẽ có dạng như sau:
#navbar { display: none; }
#Attribution1 {display: none;}
(2) Ấn nút "Áp dụng cho Blog".

Thay đổi hay xóa ngày đăng bài, thời gian đăng bài, nút chia sẻ (share button), người đăng bài (Posted by XYZ), lời bình luận (comment)
Màn hình quản lý blog => Bố cục => Bài đăng trên Blog: Chỉnh sửa

Thay đổi tiêu đề "Lưu trữ Blog" (Blog Archive)
Ví dụ, đổi sang thành "Danh sách bài viết":
Màn hình quản lý blog => Bố cục => Lưu trữ Blog: Chỉnh sửa => Đổi tiêu đề từ "Lưu trữ Blog" thành "Danh sách bài viết".

Bước 4: Thêm thiết kế vào Blog
Điều chỉnh bố cục (Layout) của Blog đã hoàn thành tại bước 3. Tại bước 4 này chúng ta sẽ thêm thiết kế, trang trí vào Blog.

Các phần mềm miễn phí để thiết kế:
Biên tập ảnh: PhotoScape (Biên tập ảnh, chụp ảnh màn hình, v.v...)

Thêm hình nền của Blog
(1) Tạo hình ảnh nền (background image) bằng Inkscape. Ví dụ hình ảnh bên dưới.
Ví dụ về ảnh nền
(2) Màn hình quản lý blog => "Mẫu" => "Tùy chỉnh" => "Nền" => Nhấp chuột vào "Hình nền", chọn hình nền có sẵn của Blogger hoặc "Hình ảnh tải lên" để tải file hình nền chúng ta đã tạo lên để sử dụng làm hình nền.

Thêm Browser Icon (biểu tượng trình duyệt) cho website
FavIcon là biểu tượng trình duyệt (Browser Icon). Đó là biểu tượng (icon) xuất hiện trên thanh tiêu đề của trình duyệt (browser) khi mở trang web bằng trình duyệt (Google Chrome, Firefox, IE, v.v...). Tiếng Anh: Favicon (Favorite Icon).
(1) Tạo hình ảnh icon bằng Inkscape. Ví dụ như dưới đây.

(2) Sử dụng trang web tạo icon online để chuyển file ảnh thành biểu tượng Favicon. Ví dụ, chúng ta sẽ sử dụng trang web dưới đây:
Online Image To Icon Converter: http://www.rw-designer.com/image-to-icon
(Chọn "Fav-icon or toolbar icon")
Tải file ảnh lên (Upload file) rồi ấn nút tải (Download) icon xuống. Icon sẽ có kích thước 16 x 16: 

Chú ý: Có thể loại bỏ bước này do hiện tại có thể tải ảnh lên trực tiếp mà không cần chuyển sang file icon. (03-03-2014)

(3) Màn hình quản lý Blog => Bố cục => Ở phần "Favicon", nhấp chuột vào "Chỉnh sửa", một cửa sổ mới sẽ hiện lên để bạn tải biểu tượng (icon) mới lên, ấn nút "Lưu" và cửa sổ này sẽ đóng lại => Ấn nút "Lưu sắp xếp" bên trên màn hình Bố cục.
Chú ý: Để kiểm tra chúng ta nên mở trang web ở trình duyệt khác. Trình duyệt chúng ta vẫn dùng có thể lưu quá khứ và có thể Favicon mới không hiện ra ngay.

Thay đổi hình ảnh tiêu đề trang (Header), thêm  "Mô tả Blog"
(1) Dùng Inkscape tạo hình ảnh tiêu đề, ví dụ hình dưới đây:
(2) Màn hình quản lý Blog => Bố cục => "XYZ (Tiêu đề): Chỉnh sửa" => Tải ảnh từ máy tính lên. Chọn "Vị trí" cho hình ảnh là "Đặt mô tả sau hình ảnh".
(3) Thêm "Mô tả Blog": Ví dụ "Example for making a blogger's blog." => Lưu.


Bước 5: Thêm chức năng cho Blog

Thêm các trang và thanh điều hướng trang
Ví dụ, chúng ta sẽ thêm các trang "Giới thiệu công ty", "Giới thiệu sản phẩm", "Kinh nghiệm", "Liên hệ".
(1) Thêm trang: Màn hình quản lý Blog => Trang => "Trang mới"
Thêm thanh điều hướng trang: Màn hình quản lý Blog => Bố cục => Nhấp vào "Thêm tiện ích" ở ngay dưới phần Tiêu đề (ở ô tiện ích trống) => Trong cửa sổ mở ra chọn "Danh sách trang" (hay "Trang") (có những trường hợp đã thêm vào đâu khác rồi thì sẽ không crhọn được mà phải xóa chỗ đã thêm mục này trước đó trước).
Màn hình quản lý Blog => Trang: Chọn "Hiển thị trang dưới dạng" là "Tab trên đầu".
(2) Màn hình quản lý Blog => Mẫu => "Tùy chỉnh": Thay đổi thiết kế thanh điều hướng ngang.

Thêm form "Liên hệ"

Form liên hệ miễn phí: http://kontactr.com/
Chúng ta có thể sử dụng dịch vụ của trang web trên để thêm form liên hệ vào Blog một cách miễn phí.
Mỗi khi có người liên hệ, nội dung liên hệ sẽ được chuyển tới email đăng ký.






Bước 6: Thêm nội dung vào Blog
Nhấp chuột vào nút "Bài đăng mới" bên trên cột bên trái Màn hình quản lý Blog và màn hình soạn thảo bài đăng mới sẽ hiện ra như dưới đây.
(Click vào ảnh để xem ảnh lớn)

Hình ảnh giao diện tham khảo:
Blogger - Bố cục (Layout)
Blogger - Bài đăng mới (New Post)








Bố cục (Layout) - Trình thiết kế mẫu (Template Designer) - Bài đăng mới (New post). Click vào ảnh để xem.

Trang web sử dụng các hình ảnh trong bài này:


SAIGON PHOENIX

Đón xem: Tùy biến trang blogger với tên miền riêng