Nếu bạn đã biết về HTML và CSS thì việc này khá đơn giản, với những bạn chưa hiểu về CSS thì có thể tham khảo trên mạng hoặc tại đây
Bài 2: Định hình cấu trúc HTML cho Template Blogspot
Bắt đầu nhé, giống như 1 bài văn, chúng ta có đầu bài, thân bài và kết luận, từ đó chúng ta hình dung được bố cục trang Template blog của mình. Trong bài này, mình sẽ làm mẫu với bố cục trang blog gồm 1 khung header (Giống như Mở bài), 1 main content ( thân bài) và 1 footer (kết bài) bên dưới.
Phần I: Đầu tiên, ta sẽ có cấu trúc web như sau
<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='footer'>
Đây là nội dung hiển thị trong phần footer
</div>
</div>
Ở đây ta có class='wrapper' Bạn hình dung nó như 1 tờ giấy, bao quanh toàn bộ trang blog
Tiếp theo ta có class='header' bạn hình dung nó là phần mở bài cho blog.
Với class='main-wrapper' nó được đình hình như phần thân của blog.
và cuối cùng với class='footer' nó sẽ là phần chân trang của blog
Vậy ta sẽ chèn đoạn code trên vào đâu ở Template Blogspot của bạn?
Như cấu trúc ở bài 1 mình đã giới thiệu bạn có được cấu trúc như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<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>
<!-- Chú thích: Code Css cho Blog-->
<b:skin>
<![CDATA[ /* Viết mã Css tại đây */ ]]>
</b:skin>
</head>
<!--Chú Thích: 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='footer'>
Đây là nội dung hiển thị trong phần footer
</div>
</div>
<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>
Phần II: Định hình Template Blogspot với CSS
Mình sẽ áp dụng css như sau:
.wrapper {
width: 800 px;
margin: 0 auto;
}
.header {
width: 100 % ;
min - height: 90px;
background: #4d90fe;
}
.main-wrapper {
width: 100%;
background: #e4e3b3;
}
.footer {
width: 100%;
min - height: 300 px;
background: #f9edbe;
}
Ta sẽ được 1 cấu trúc blog hoàn chỉnh là:
<?xml version="1.0" encoding="UTF-8" ?>
<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>
<!-- Chú thích: Code Css cho Blog-->
<b:skin>
<![CDATA[ /* Viết mã Css tại đây */ ]]>
.wrapper {
width: 800 px;
margin: 0 auto;
}
.header {
width: 100% ;
min-height: 90px;
background:#4d90fe;
}
.main-wrapper {
width: 100%;
min-height: 300px;
background: #e4e3b3;
}
.footer {
width: 100%;
min-height:90px;
background: #f9edbe;
}
</b:skin>
</head>
<!--Chú Thích: 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='footer'>
Đây là nội dung hiển thị trong phần footer
</div>
</div>
<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>
Và dĩ nhiên khi bạn lưu chủ đề, ra trang chủ thì nó sẽ rất xấu, nhưng như phần mở đầu mình đã nói, mình sẽ làm mẫu với bố cục trang blog gồm 1 khung header (Giống như Mở bài), 1 main content ( thân bài) và 1 footer (kết bài) bên dưới.
Quên đi việc thắc mắc làm sao để có thể hiển thị danh sách các bài viết hay là thêm các widget như thế nào, hay nó thế này thế kia. các bạn đón chờ bài viết ở phần sau nhé.
https://ibloggerviet.blogspot.com/2018/05/dinh-hinh-cau-truc-cho-template-Blogspot.html
Bài 2: Định Hình Cấu Trúc Html Cho Template Blogspot >>>>> Download Now
Trả lờiXóa>>>>> Download Full
Bài 2: Định Hình Cấu Trúc Html Cho Template Blogspot >>>>> Download LINK
>>>>> Download Now
Bài 2: Định Hình Cấu Trúc Html Cho Template Blogspot >>>>> Download Full
>>>>> Download LINK ij