Header Ads Widget

Ticker

6/recent/ticker-posts

Tùy chỉnh footer cho blogspot (Chân trang)

Tự học code Blogspot - Footer hay còn gọi là chân trang trong blogspot các bạn có thể tùy chỉnh với nhiều mục đích. Riêng mình thì không có nhu cầu lắm vì mình muốn mọi thứ hiển thị trong bài viêt luôn. Do vậy chân trang của mình sẽ thật đơn giản thôi. Cùng xem footer đơn giản là như thế nào nhé.

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 {
width:100%;
background: red;
margin-top: 5px;
}
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

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>
<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>
Tương tự, thêm một HTML/Javascript khác để làm copyright:

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{
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;
}
 Giờ vào trang xem thành quả thôi!
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é!

Đăng nhận xét