GTV - 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é!
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: https://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
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Vui cười lên
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>
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
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
HTML
<html> ... </html>
Phần đầu trang head
<head> ... </head>
Khai báo CSS (nằm trong head)
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
Thân trang body
<body> ... </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:skin> 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 =_=
Tạo giao diện cơ bản cho blog của bạn
Code HTML:
HTML giống như là bộ khung trong web của các bạn, mình sẽ hướng dẫn các bạn xây dựng bộ khung như hình ảnh demo phía trên nhé.
Đầu tiên, các bạn vào Chỉnh sửa HTML tìm đến đoạn <body> và </body>. Nếu khó tìm các bạn click chuột vào chỗ code rồi nhấn Ctrl + F. Nó sẽ hiện một khung seach ở ngay góc trên bên phải của khung HTML đó. Các bạn gõ vào <body> rồi nhấn Enter sẽ tìm được ngay chỗ có đoạn <body> trong HTML. Đây cũng sẽ là cách để các bạn rà soát code của mình nhé.
Sau khi tìm được đoạn <body>, các bạn xóa toàn bộ code giữa <body> và </body> sau đó paste đoạn code sau vào thay cho đoạn vừa xóa.
HTML giống như là bộ khung trong web của các bạn, mình sẽ hướng dẫn các bạn xây dựng bộ khung như hình ảnh demo phía trên nhé.
Đầu tiên, các bạn vào Chỉnh sửa HTML tìm đến đoạn <body> và </body>. Nếu khó tìm các bạn click chuột vào chỗ code rồi nhấn Ctrl + F. Nó sẽ hiện một khung seach ở ngay góc trên bên phải của khung HTML đó. Các bạn gõ vào <body> rồi nhấn Enter sẽ tìm được ngay chỗ có đoạn <body> trong HTML. Đây cũng sẽ là cách để các bạn rà soát code của mình nhé.
Sau khi tìm được đoạn <body>, các bạn xóa toàn bộ code giữa <body> và </body> sau đó paste đoạn code sau vào thay cho đoạn vừa xóa.
<div class='web'>
<div class='dau-trang'>
<div class='logo'></div>
<div id='dau-trang-phai'></div>
</div>
<div class="clear"/>
<div class='menu'></div>
<div class='than-web'>
<div id='than-web-trai'></div>
<div id='than-web-phai'></div>
</div>
<div class="clear"/>
<div class='chan-trang'>
<b:section class='chan-trang' id='chan-trang-cha' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
Code CSS:
CSS các bạn có thể hiểu là code để định dạng cho HTML. Các bạn có thể hiểu nôm na như khi các bạn xây nhà, các bạn nói với thợ xây tôi muốn xây một cái nhà. Cái nhà mà các bạn nói chính là HTML, còn xây nhà to bé ra sao, kích thước thế nào nó chính là CSS. Mềnh giải thích mọi người hiểu chứ ... nếu chưa hiểu thì ... chịu!
Sau khi chèn đoạn HTML bên trên, các bạn tiếp tục tìm <