Hướng dẫn thiết kế blogger toàn tập - Phần 2: Xây dựng bố cục trang chủ cho trang web blogspot

Trong bài viết trước chúng ta đã được hoàn nguyên trang blogspot về 1 trang trắng chưa có bất kì nội dung nào.

Bố cục của một trang web cơ bản thì như các bạn cũng biết rồi, phải có header - phần đầu trang, phần chính - hiển thị bài viết, phần sidebar bên cạnh để hiển thị các mục khác. Như vậy, chúng ta sẽ cần một số các ID và class cho các phần cơ bản này:

1.wrapper:

- Bộ khung lớn bao quanh toàn bộ trang web.

2. Header:

- Khung cho phần đầu trang web

3. Main:

- Bộ khung chính, khu vực hiển thị bài viết và các thứ abc xyz sau này bạn muốn nó hiển thị

4. sidebar-wrapper:

- Khung cho nội dung nhỏ bên cạnh khu vực main

Các yếu tố cơ bản đã được xác định, Bây giờ chúng ta sẽ đưa cái nào chưa có vào bộ khung của chúng ta, cái nào có rồi thì cho nó về vị trí của nó nhé.

1. Trước tiên là wrapper:

Chúng ta sẽ cho bạn ấy về vị trí ngay ngắn với code CSS cơ bản:


.wrapper {




width: 800px;




margin: 0 auto;




}

Về ý nghĩa code các bạn tự tìm hiểu, hoặc đợi bài viết khác của mình nhé, ở đây mình mặc định các bạn đã biết.

Tương tự với các chú header và sidebar. Khi hoàn thành chúng ta có bộ code CSS sau:







.wrapper {




width: 800px;




margin: 0 auto;




}

.header {

min-height: 90px;




width: 100%;

.main-wrapper {




background: #4d90fe;
}

min-height: 300px;




width: 70%;
float:left;

.sidebar-wrapper {




background: #f0c36d;
}
width: 30%;

background: #f9edbe;




float:right;

min-height: 300px;

}

Bước tiếp theo là bạn chỉ cần dán nó vào khu vực của nó thôi, đó là trước thẻ ]]></b:skin> quen thuộc.

Sau khi paste đoạn CSS trên vào bị trí ta sẽ được bộ code hoàn chỉnh như sau:


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Tiêu đề trang web</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin><![CDATA[
.wrapper {
width: 800px;
margin: 0 auto;
}
.header {
width: 100%;
min-height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 70%;
float:left;
min-height: 300px;
background: #f0c36d;
}
.sidebar-wrapper {
width: 30%;
float:right;
min-height: 300px;
background: #f9edbe;
}
]]></b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
<div class='wrapper'>
<div class='header'>
Đây là nội dung hiển thị trong phần Header
</div>
<div class='main-wrapper'>
Đây là nội dung hiển thị trong phần Main Content
</div>
<div class='sidebar-wrapper'>
Đây là nội dung hiển thị trong phần Sidebar
</div>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

Sau khi xong xuôi ta có được trang như demo : http://demohuongdanthietke2.blogspot.com/

Như các bạn đã thấy, trang web của chúng ta đã được chia ra làm 3 khu vực rõ ràng. Phần tiếp theo chúng ta sẽ cấu hình cho từng khu vực nhé.