Hướng dẫn thêm phần Footer Widget Responsive cho blogspot

1
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.
1
huhu

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 đó
<!-- 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
#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!
#Tag: blogblogspotcodeđăng nhậpthủ thuậtthủ thuật blogspot
  1. chibi

    của mình nó nằm 3 hàng ngang hết thì làm sao bạn, mình không biết xác định phần footer làm sao, nhờ bạn hướng dẫn kỹ hơn
    bạn xem trang mình thử: kenhgiaitri77.blogspot.com

    Trả lờiXóa

Phổ biến trong tuần

Bạn có thể quan tâm

Đăng ký theo dõi

Hỏi tôi khi cần!