Tạo một trang blog trắng tinh tình tình
- Nhấn vào Chủ đề
- Nhấn vào Chỉnh sửa HTML
<?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>
Các thành phần cơ bản trong code của blogspot
<?xml version="1.0" encoding="UTF-8" ?>HTML
<!DOCTYPE html>
<html> ... </html>Phần đầu trang head
<head> ... </head>
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
<body> ... </body>
Xây dựng bố cục giao diện ban đầu cho blogspot
- 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
Tạo giao diện cơ bản cho blog của bạn
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>
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 {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 ^_^)
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;
}
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é!