Like Page để cập nhật tin mới ngay trên facebook nhé

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

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 thêm phần Footer Widget Responsive cho blogspot

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!

1 nhận xét:

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

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói