Tự thiết kế giao diện cho blogspot (dành cho người không biết code)

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:

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:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>

<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>

</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.

<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 <![CDATA[ (cách tìm như phía trên mình hướng dẫn nhé). Copy đoạn CSS sau paste vào sau <![CDATA[

.web {
width:100%;
}
.dau-trang {
width:100%;
max-height: 100px;
}
.menu {
width: 100%;
min-height: 40px;
background: red;
}
.than-web {
width:85%;
margin:auto;
}
.chan-trang {
width:100%;
min-height: 200px;
background: green;
}
.logo {
width: 35%;
min-height: 100px;
background: orange;
float:left;
}
#dau-trang-phai {
width: 65%;
min-height: 100px;
background: #42c8fa;
float:right;
}
#than-web-trai {
width: 70%;
min-height: 300px;
background: yellow;
float:left;
}
#than-web-phai {
width: 30%;
min-height: 300px;
background: purple;
float:right;
}

Rồi, sau khi các bạn đã paste đoạn HTML vào trong cặp thẻ <body> và CSS trong <b:skin> các bạn Lưu chủ đề lại và xem lại xem web của các bạn như nào rồi (nhìn webs các bạn sẽ hơi shock đấy ^_^)
Do phần này cũng đơn giản nên mình không chụp lại ảnh demo nhé. Vậy là xong phần thiết kế bộ khung cho Blogspot rồi. Sau các bạn chỉ cần trang trí và đặt cho nội dung hiển thị vào các vị trí thích hợp là Ok.
Ai có thắc mắc gì hay không làm được để lại comment mình sẽ giải đáp nhé!