Dec 24, 2016

Cách làm Footer đẹp cho Blogspot (P1)

Chào mọi người !

Từ trước tới nay, việc tạo các footer cho Blogspot là không khó, các bài viết hướng dẫn tràn lan trên mạng. Tuy nhiên cũng phải lưu ý một điều, đó là các hướng dẫn căn bản có thể áp dụng đối với các blog phát triển trên nền tảng cơ bản, còn đối với các bạn dùng mẫu template khác được chia sẻ, thì đó là vấn đề rất lớn.

Dùng thì dùng được, nhưng fix cho nó hoàn chỉnh và theo ý của mình là một điều không dễ, do vậy WinBlog sẽ áp dụng và giúp các bạn có được cái nhìn tốt nhất cho việc chỉnh sửa phần footer ( phần chân website ).

Đầu tiên ta có 3 bước để view footer :
1. Footer là gì ? Được định dạng cơ bản như thế nào ?
2. Cột footer và cách chia thêm nhiều cột tiện ích.
3. CSS và trang trí cho footer như thế nào ?

1. Footer là gì ? Được định dạng cơ bản như thế nào ?
Footer là phần chân nền của một website, nó là phần để lưu giữ các thông tin về web, liên hệ cũng như thông tin chủ sỡ hữu chẳng hạn. Do vậy nó là phần được quan tâm khi người dùng xem xong toàn bộ phần chính ở phía trên :

chia cột footer blogspot

Footer thường được Blogspot định dạng là thẻ footer nằm dưới Main chính của Wrapper :

code footer blogspot

<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>

Để điều chỉnh một footer, các bạn nên tìm đến phần code này - nếu không có thì copy đoạn code trên vào dưới main, và chỉnh sửa theo ý của mình.
Theo thiết kế, để chia các cột, thì chúng ta có thể thêm các thẻ DIV có các định dạng CSS với kích thước chuẩn, nhằm tạo ra các cột đồng đều, giúp blog nhìn cân đối hơn. 

Như vậy, chúng ta đã tạo ra được 3 cột như mẫu, các phần sau mình sẽ hướng dẫn các bạn cách phân chia kích thước các cột và CSS footer.

WinBlog


Tạo mặt cườiTạo mặt cười