Hướng dẫn thêm phần Footer cho Template Blogspot

{tocify} $title = {Mục lục bài viết}

[tintuc]

Các bạn có thể hiểu rằng Footer chính là phần chân của website . Nó sẽ là nơi để bạn thêm các thông tin về mình, hay doanh nghiệp của các bạn . Ngoài ra, cũng có thể là nơi hiển thị các đối tác của bạn hoặc có thể là bất kỳ thứ gì các bạn thích.

Các bạn có thể nhận ra đa số các trang web có Footer đều có 2 phần:
- 1 là phần hiển thị nội dung của trang web, như là các bài viết liên quan, bài viết xem nhiều hay bài viết ngẫu nhiên,… 
- 2 là phần hiển thị dòng Copyright và tên người design theme.

Và trong bài viết này, mình sẽ hướng dẫn các bạn tạo Footer với 3 cột nhé, đơn thuần là để mọi người có thể thêm nhiều thứ hơn vào Footer. 

Như trong hình trên thì ta thấy sẽ cần phải có 6 thẻ Div và 4 Class. Tại sao có tới 6 thẻ Div mà lại chỉ có 4 Class? Cái này là vì ta sẽ có 1 class chung cho cả 3 cột là cột 1, cột 2 và cột 3 trong Footer. Còn nếu bạn muốn thêm Class riêng nào cho cột nào thì cứ thêm vào, không sao hết.

OK, như vậy thì sau 1 hời code ta sẽ được đoạn code như sau:

<div id='Footer'>

     <div class='footer-main'>

          <div class='footer-column'>

               Nột dung Cột 1

          </div>

          <div class='footer-column'>

               Nội dung Cột 2

          </div>

          <div class='footer-column'>

               Nội dung Cột 3

          </div>

     </div>

     <div class='footer-copyright'>

     </div>

</div>

Còn nếu như mọi người muốn có thể thêm các widget vào trong từng cột Footer thì hãy thay Nội dung Cột 1,Nội dung Cột 2, Nội dung Cột 3 thành đoạn sau. (Với x là khác nhau)

<b:section class='footer-cot' id='cot<b>x</b>' showaddelement='yes'/>

Bây giờ, chúng ta sẽ chèn nó ngang với lại header, main-wrapper hay sidebar-wrapper nhé.

Sau khi các bạn chèn xong và quay vào phần bố cục thì nó sẽ có thêm 1 đoạn như thế này:

Như vậy là các bạn hoàn toàn có thể thêm tiện ích vào trong Footer của mình rồi. Tiếp đến, bây giờ chúng ta sẽ viết CSS cho chúng. Dưới đây là đoạn CSS của mình. bạn hãy thêm đoạn CSS dưới đây mà trước ]]> nhé!

#Footer {

     width: 100%;

     float: left;

     min-height: 100px;

     background: #ccc;

}

.footer-main {

     width: 100%;

     float: left;

     min-height: 80px;

     background: #888;

}

.footer-copyright {

     width: 100%;

     float: left;

     min-height: 20px;

     background: #666;

}

.footer-column {

     width:33.333333%;

     float:left

}

Xong, chỉ với vài dòng CSS nhỏ như vậy là các bạn đã chia Footer của mình thành 3 cột và có thể thêm các thông tin theo ý mình. 

[/tintuc]