Tự code Blogger - Tự thiết kế giao diện cho blogspot [dành cho người không biết code]. Trong bài trước mình đã giới thiệu với các bạn cách để tạo một trang Blogspot hoàn toàn miễn phí rồi, các bạn đã có một trang web cho riêng mình nhưng nếu các giao diện mặc định của web lại không cái nào vừa mắt bạn. Giờ là lúc bạn xắn tay áo lên và tự làm giao diện cho blog của mình rồi đấy. Bắt đầu nhé!
Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:
- Xây dựng một trang blogspot như trang blogvuicuoilen [giới thiệu]
- Hướng dẫn tạo một trang blogspot [blogger]
- Tự thiết kế giao diện cho blogspot [dành cho người không biết code]
- Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout
- Thiết kế phần header cho blogspot
- Thiết kế menu cho blogspot
- Tùy chỉnh phần hiển thị nội dung của blogspot
- Tùy chỉnh sidebar cho blogspot
- Tùy chỉnh footer cho blogspot
- Thêm nút Share mạng xã hội cho blog của bạn
- Xây dựng giao diện mobile cho blogspot
- Thêm nút cuộn trang bằng CSS cho Blogspot
- Tối ưu giao diện để blogspot chuẩn SEO
Trước tiên mình sẽ hướng dẫn các bạn tự tạo một trang blog trắng tinh không có giao diện gì cả. Sau đó các bạn sẽ tự thêm các phần mà các bạn muốn như phần logo, menu, thân web, chân trang ... Trong bài này mình sẽ chỉ hướng dẫn các bạn tạo thành khung giao diện thôi nhé, còn chỉnh sửa chi tiết thì đợi các bài sau nhá.
Tạo một trang blog trắng tinh tình tình
Để tạo một trang web không có nội dung gì, các bạn đăng nhập vào blogger: //www.blogger.com
- Nhấn vào Chủ đề
- Nhấn vào Chỉnh sửa HTML
Trong khung mà mình tô màu xanh da trời các bạn xóa hết nội dung bên trong đó đi. Click chuột trái vào trong khung, Ctrl + A, delete. Vậy là xóa xong hết code cũ.
Giờ các bạn copy đoạn code sau rồi patse vào chỗ bạn vừa xóa
Vui cười lên Bắt đầu viết Css cho web > Bắt đầu phần hiển thị trên web > Kết thúc phần hiển thị trên web >
Lưu chủ đề lại thế là xong, giờ các bạn vào lại trang blog của mình sẽ thấy trang đó chẳng hiển thị cái gì và cũng không báo lỗi cái gì luôn. OK!
Các thành phần cơ bản trong code của blogspot
Trong một website thường có các thành phần cơ bản là header, menu, main, sidebar, footer ... Trong blogspot cũng không ngoại lệ, các bạn cũng có thể tạo đầy đủ các thành phần như một trang web thông thường.
Như trang blogspot vui cười lên, sẽ có các thành phần như các bạn đang thấy. Để cho các bạn không rành về code cũng như không giỏi tiếng anh mình sẽ tạm gọi các phần của web theo tiếng Việt cho dễ nhé [các bạn nào học code nhìn sẽ khó chịu lắm đấy]. Ok
Các thành phần cơ bản trong code của blogspot gồm:
Phần khai báo
HTML
...
Phần đầu trang head
...
Khai báo CSS [nằm trong head]
Thân trang body
...
Phần khai báo thường chỉ cần vậy thôi là ok. HTML là thể bắt buộc phải có rồi cũng không có gì phải bàn. Head cũng là thành phần không thể thiếu, sau này có rất nhiều thứ bạn cần phải đặt trong head đấy. Khai báo CSS được tập trung hết ở trong đoạn bạn muốn sửa gì giao diện thì vô đây là ok. Phần thân trang là phần hiển thị ra bên ngoài blog, tùy bạn xây dựng bố cục giao diện như thế nào thì nó sẽ hiển thị ra như vậy.
Xây dựng bố cục giao diện ban đầu cho blogspot
Bố cục của trang blogvuicuoilen sẽ có dạng như sau:
Để tạo được giao diện cơ bản này các bạn cần biết chút chút về HTML và CSS nhé, ai chưa biết thì xem thêm hai bài viết này nhé:
- CSS cơ bản cho người mới [đủ dùng để sửa giao diện web]
- HTML cơ bản cho người mới bắt đầu
Còn nếu chưa biết thì cũng không vấn đề gì, cứ đọc kỹ bài viết của mình sau đó copy, paste đúng chỗ là ok hết =_=