Hướng dẫn tạo Footer Widget Responsive 3 cột cho blogspot (update 2020)

Xin chào các bạn, trong bài viết về thủ thuật blogspot này mình sẽ hướng dẫn các bạn thêm Footer Widget để có thể chèn thêm nhiều Widget cũng như các tiện ích thêm cho blog của mình.

Footer Widget dưới đây chủ yếu được tạo từ HTML và  CSS nên sẽ không làm giảm tốc độ hay chậm cho blog và chuẩn Responsive mang tính thẩm mỹ cao.

Hướng dẫn cách làm

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML bạn cần xác định phần chân trang {footer }của blog, và đặt đoạn HTML này vào đó

1<!-- Footer -->
<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 -->

Bước 2: Để làm đẹp và Responsive bạn sử dụng đoạn CSS sau và dán chúng lên trên thẻ ]]></b:skin của blog

1#footer-wrapper {
background:#242424;
overflow:hidden;
margin:0 auto;
padding:20px 15px 0;
color:#ddd
}

#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;
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ạn lưu mẫu lại và xem kết quả, Chúc bạn thành công!

Tips này mình đã check và hoạt động tốt, ngoài ra, các bạn hoàn toàn có thể tuỳ biến thêm vào trong template các bạn đang có.

Mình sưu tầm bài thủ thuật này ở đây: http://doiguocmocc.blogspot.com/2017/04/huong-dan-them-phan-footer-widget.html