[tintuc]
Sau đây mình xin hướng dẫn thiết kế 1
template blogspot đơn giản, bao gồm cả thiết kế bố cục, cách lấy bài viết.
Mục đích bài viết là để cho các bạn hiểu cách hoạt động cấu trúc của 1 blogger. Chứ không phải thiết kế 1 giao diện chuẩn 100% rồi mang bán, cái đó còn phụ thuộc vào kiến thức của mỗi người. Bài này mình chỉ cách hướng dẫn cơ bản, cho những bạn muốn tìm hiểu, tự làm blogspot cho riêng mình.
Các bạn nhìn bên dưới, phần thân web được chia làm 3 cột:
Trái - Main - Phải
Xem link mẫu: https://bai1-ht.blogspot.com/
Bước 1: Tạo mới 1 blog (đặt tên và link đường dẫn)
Sau khi tạo xong các bạn vô link
Mẫu blogspot trắng tinh copy dán đè lên giao diện cũ vừa tạo sau đó nhấn lưu lại
Đó là cấu trúc của 1 template blogspot trắng tinh, mình thường bắt đầu đề thiết kế 1 mẫu mới
-
Giải thích: 1 template bắt buộc phải có 1 thẻ
<b:skin> và 1 thẻ
<b:section> thì mới lưu được nhé, nếu thiếu template sẽ báo lỗi và không thể nào lưu được.
Bước 2: Thêm thẻ meta responsive mobile
Copy link dưới đặt dưới
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Sau đó nhấn lưu lại
Bước 3: Thêm CSS mà mình đã chuẩn bị
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
Copy CSS ở trên dán vô trong thẻ
<b:skin> CSS ở trên </b:skin>
Cách khác là bạn copy CSS ở trên cho vào trong thẻ
<style> CSS ở trên </style> và đặt nó trước
</head>
Thẻ
<b:skin> khi chạy trên trình duyệt nó tự động đổi thành thẻ
<style>
Bước 4: Tạo dòng chữ logo
Dưới
<body> thêm html sau
<div class="header">
<h1>Logo - Template blogspot</h1>
</div>
Sau đó nhấn lưu lại và view blog lên xem nó như thế nào. Đó là xong phần
header giờ tới phần thân web bao gồm 2 cột
TRÁI -
MAIN -
PHẢI
Dưới phần header vừa thêm các bạn copy html sau dán dưới nó
<div class="row">
<div class="col-3 col-s-3 menu">
CỘT TRÁI
</div>
<div class="col-6 col-s-9">
MAIN
</div>
<div class="col-3 col-s-12">
CỘT PHẢI
</div>
</div>
Đó là mình chia làm 3 cột như ban đầu thiết kế. Tiếp theo mình làm phần
cột trái, mình sẽ làm luôn phần
widget bố cục cho nó luôn nhé.
A. PHẦN CỘT TRÁI
Bạn xóa chữ
CỘT TRÁI đi và copy dòng sau dán vô chỗ cũ
<b:section id='cot-trai' showaddelement='yes'></b:section>
Sau đó nhấn lưu lại và xóa thẻ <b:section> phái dưới đi vì không cần nữa
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
Sau đó vô bố cục xem. nó đã xuất hiện tiện ích
widget tên
cot-trai
Các bạn nhấn
Thêm tiện ích - Chọn
HTML/Javascript
Dán đoạn html sau vô rồi lưu lại
<ul>
<li>Nhãn 1</li>
<li>Nhãn 2</li>
<li>Nhãn 3</li>
<li>Nhãn 4</li>
</ul>
Rồi bạn view link blog lên và xem kết quả.
B. PHẦN CỘT PHẢI
Cũng tương tự như phần cột trái, các bạn copy code sau dán đè vô chữ
CỘT PHẢI
<b:section id='cot-phai' showaddelement='yes'></b:section>
Sau đó lưu lại và vô bố cục nó đã xuất hiện tiện ích
widget tên
cot-phai
Các bạn nhấn
Thêm tiện ích - Chọn
HTML/Javascript và copy đoạn html dưới dán vô và lưu lại
<div class="aside">
<h2>Theme blogspot bán hàng</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Theme blogpsot BĐS</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>Theme blogpsot tin tức?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
Sau đó view link blog và xem kết quả
C. PHẦN FOOTER
Bạn thêm html như sau: trước
</body>
<div class="footer">
</div>
Như hình dưới nhé, các bạn click vô con số bên trái để nó thu gọn lại cho dễ nhìn
3 phần trên nó song song với nhau, trong "footer" bạn copy dán thẻ <b:section> để tạo widget
<b:section id='footer' showaddelement='yes'></b:section>
Sau đó lưu lại và vô bố cục xem nó xuất hiện chưa. Mình vô thì có nhé
Các bạn nhấn
Thêm tiện ích -
Chọn HTML/Javascript
Dán đoạn html sau và lưu lại
<p>Template blogspot bán hàng chuẩn seo - www.hoatranweb.com</p>
View link blog và xem kết quả.
D. PHẦN MAIN
Phần này là để lấy dữ liệu từ bài post của blog ra, Bài 2 mình sẽ hướng dẫn sau.
Tạm thời bạn tìm chữ MAIN và thêm dòng html sau và lưu lại
<h1>
Thiết kế template blogspot
</h1>
<p>
Template blogspot bán hàng chuẩn seo, rip blogspot chuyên nghiệp thiết kế web blogger theo yêu cầu
</p>
<img src="https://www.w3schools.com/css/img_chania.jpg" width="460" height="345"/>
Xem hình:
Sau đó lưu lại view link blog và xem kết quả
Đây là kết quả blog mình vừa tạo nhé:
https://bai1-ht.blogspot.com/
Với bài hướng dẫn này mình đã tạo được 1 blogspot đơn giản responsive mobile.
Tải bản mẫu tại đây:
Với bài sau mình hướng dẫn cách sắp xếp bố cục + cách lấy bài viết ra ngoài trang chủ.
[/tintuc]
