Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:
- Xây dựng một trang blogspot như trang blogvuicuoilen (giới thiệu)
- Hướng dẫn tạo một trang blogspot (blogger)
- Tự thiết kế giao diện cho blogspot (dành cho người không biết code)
- Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout
- Thiết kế phần header cho blogspot
- Thiết kế menu cho blogspot
- Tùy chỉnh phần hiển thị nội dung của blogspot
- Tùy chỉnh sidebar cho blogspot
- Tùy chỉnh footer cho blogspot
- Thêm nút Share mạng xã hội cho blog của bạn
- Xây dựng giao diện mobile cho blogspot
- Thêm nút cuộn trang bằng CSS cho Blogspot
- Tối ưu giao diện để blogspot chuẩn SEO
Tùy chỉnh footer cho blogspot (Chân trang)
Chân trang của mình sẽ gồm 2 phần: phần nội dung và copyright.Ý tưởng của mình sẽ là thêm vào 2 tiện ích HTML/Javascript sau đó viết nội dung vào là ok.
Đầu tiên sửa lại CSS của Chân trang
.chan-trang {Thêm một tiện ích vào Chân trang: các bạn vào Bố cục --> Chân trang --> Thêm tiện ích --> HTLM/Javascript
width:100%;
background: red;
margin-top: 5px;
}
Tiêu đề: bỏ trống
Nội dung: thêm đoạn code HTML sau:
<div id='noi-dung-chan-trang'><p>Vui Cười Lên - Blog cá nhân của 2LAN</p>Tương tự, thêm một HTML/Javascript khác để làm copyright:
<p>Mọi thông tin trên blog đều được giữ bản quyền bởi 2LAN. Các bạn nếu muốn lấy thông tin từ blog vui lòng ghi rõ nguồn Blogvuicuoilen.blogspot.com (2LAN)</p>
<p>Email: truongtienlam1988@gmail.com</p>
</div>
Tiêu đề: bỏ trống
Nội dung: thêm đoạn code sau:
<div id='copyright'>Copyright 2017 Vui Cười Lên. Designer by 2LAN</div>Giờ nội dung đã hiển thị rồi nhưng phải thêm CSS cho nó hiển thị đẹp hơn:
#noi-dung-chan-trang{Giờ vào trang xem thành quả thôi!
color:white;
text-align: center;
padding: 20px;
margin-left: -20px;
}
#copyright {
color:white;
text-align: center;
padding: 5px;
width:100%;
background:black;
margin-left: -15px;
font-size:13px;
}
Quá dễ phải không nào, nếu các bạn muốn làm chân trang theo kiểu 2 cột, 3 cột hay 4 cột thì các bạn làm tương tự như làm với phần header (đầu trang) nhé.
Chúc các bạn thành công, ai không thành công thì .... học lại các bài trước đi nhé!