Tạo Footer 3 Columns ( 3 Cột ) Responsive Cho Blogspot

Footer 3 Columns hay được gọi là footer 3 cột theo tiếng việt của chúng ta, dạng footer này thường xuất hiện nhiều trên các trang tin tức hay cái trang blog tổng hợp. Trong nền tảng blogger chia thành 3 cột không hề khó, các bạn chỉ thêm đúng cách css và html phù hợp vào template của các bạn là được.

footer 3 cột blogspot, Chia Footer blogspot thành 3 cột, Tạo Footer 3 Columns ( 3 Cột ) Responsive Cho Blogspot, cách chia footer thành nhiều cột, Chia Footer Blogger


Chân trang 3 cột trên google thì nhiều và toàn những bài cũ của các blogger từ xưa đến giờ nên không hỗ trợ Responsive cho chân trang blogspot của bạn. Nếu một blog mà không có Responsive thì nó sẽ rất xấu trên mọi kích thước, vì đó nó sẽ rất gây khó chịu cho khách truy cập blog của mình. Đoạn css sau đây sẽ đáp ứng tất cả về vẽ đẹp gọn nhẹ của nó cũng như Responsive trên thiết bị mobile.

Hướng dẫn tạo footer 3 cột 

Thêm đoạn css sau vào <b:skin><![CDATA[
#footer-zalosec{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}
#footer-zalosec .left{float:left;width:34%}
#footer-zalosec .center{float:left;width:34%}
#footer-zalosec .right{float:right;width:32%}
#footer-zalosec .left .widget,#footer-zalosec .center .widget{margin:0 15px 15px 0;clear:both}
#footer-zalosec .right .widget{margin:0 0 15px 0;clear:both}
@media screen and (max-width:768px){
#footer-zalosec .left{float:none;width:100%}

#footer-zalosec .center{float:none;width:100%}
#footer-zalosec .right{float:none;width:100%}
#footer-zalosec .left .widget,#footer-zalosec .center .widget{margin:0 0 15px;clear:both}
}

Sau đó các bạn đặt đoạn này trên phần footer gốc là được 

<div id='footer-zalosec'>
  <b:section class='left' id='left' preferred='yes'/>
  <b:section class='center' id='center' preferred='yes'/>
  <b:section class='right' id='right' preferred='yes'/>
</div><div class='clear'/>

Hướng dẫn fix lỗi nếu template không phù hợp 

Nếu bị bể footer thì các bạn có thể thêm đoạn css sau để căng chỉnh lại chân trang cho phù hợp template của mình
width:965px;
Ví dụ :
#footer-zalosec{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;width:965px;}
Các bạn chỉnh lại 965px cho phù hợp với template của mình là được sau đó nó sẽ hiện footer 3 cột cho blogspot blogger của bạn

0 Bình Luận "Tạo Footer 3 Columns ( 3 Cột ) Responsive Cho Blogspot"

Đăng nhận xét