Tạo Footer Widget 3 Cột Responsive Cho Blogger

Phần Footer widget 3 cột cho blogspot mình thường thấy rất nhiều người sử dụng ngày nay, đặc biệt là template mẫu tin tức. Chia chân trang 3 cột không hè khó, các bạn chỉ thêm đoạn css phù hợp vào là được.

Nhưng nhiều chân trang 3 cột hiện nay điều không hỗ trợ Responsive Footer 3 cột, đó là yếu tố côt lõi để làm cho blogspot đẹp và bắt mắt đối khách thăm blog. Đối với những người muốn thêm Footer Widget 3 Cột có thể làm theo cách này. Đoạn CSS đáp ứng tất cả mọi yêu cầu mà các bạn muốn như là châng trang 3 cột tùy biến + Css đơn giản, ngắn gọn.

Cách thay đổi footer cho blogspot với 3 cột

Trước hết vào template => Edit HTML

Thêm CSS vào phần <b:skin><![CDATA[

#footer-wrapper{background:#242424;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

Bước tiếp theo là đặt đoạn HTML vào phần Footer

<!-- Footer 3 cột Sezdrive.com -->
<div id='footer-wrapper'>
  <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'/>
<!-- Footer Widget End -->

Làm xong các bạn lưu lại mẫu rồi xem thử được không nhé các bạn, vì nhiều bạn còn đặt chân trang sai vị trí, vì vậy kết cấu chân trang cũng sai theo, các bạn làm kĩ cách chia footer ra 3 cột blogspot nhé.

Xem thêm : Tổng hợp nút chia sẽ mạng xã hội cho blogger