Hướng dẫn thêm footer cho blogspot

Bạn có thể hiểu rằng Footer chính là phần chân của trang web. Nó sẽ là nơi để bạn thêm các thông tin về mình, hay doanh nghiệp của bạn. Ngoài ra, cũng có thể là nơi hiển thị các đối tác của bạn hoặc có thể là bất kỳ thứ gì bạn thích.

Bạn có thể nhận ra đa số các trang web có Footer đều có 2 phần (Nhất là đối với các Template Magazine). Một là phần hiển thị nội dung của trang web, như là các bài viết liên quan, bài viết xem nhiều hay bài viết ngẫu nhiên,... Hai là phần hiển thị dòng Copyright và tên người thiết kế giao diện.
Và trong bài viết này, mình sẽ hướng dẫn các bạn tạo Footer với 3 cột nhé, đơn giản là để các bạn có thể thêm nhiều thứ hơn vào Footer thôi. Như trong hình dưới đây:


OK, chúng ta cùng nhau phân tích vấn đề. Như trong hình trên thì ta thấy sẽ cần có 6 thẻ div và 4 Class. Tại sao có tới 6 thẻ div mà lại chỉ có 4 Class thôi? Cái này là vì ta sẽ có 1 class chung cho cả 3 cột là cột 1, cột 2 và cột 3 trong Footer. Còn nếu bạn muốn thêm Class riêng nào cho cột nào thì cứ thêm vào, không sao hết.

CÁCH THỰC HIỆN

Bước 1: Copy đoạn CSS sau và dán lên  trước thẻ ]]></b:skin> trong blog của bạn
#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ước 2: Tìm đến phần Footer trong blog của bạn và dán đoạn HTML sau 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 --> 
Cuối cùng bạn chỉ cần lưu lại và vào bố cục thêm các widget cho phần footer của bạn là xong.
Chúc các bạn  thành công! 

52 nhận xét:

  1. Rồi rồi là sao ông, nói rõ là bài viết như thế nào, hữu ích ko chứ

    Trả lờiXóa
  2. Trả lời
    1. Temp anh đang xài ấy hả, anh chỉ xóa intro + edit menu thôi mà

      Xóa
  3. Trả lời
    1. Anh thì sao mà không anh thì sao =) ( nhây )

      Xóa
  4. ~~ Tương thì s mà k tương thì s =))

    Trả lờiXóa
    Trả lời
    1. Tương thì sướng mà không tương thì bứng :)

      Xóa
    2. lỗi font awesome với blockquote k click select all dc

      Xóa
    3. Đâu ông chụp hình đi

      Xóa
    4. à awesome thì k nhưng blockquote thì lỗi vkl
      [img]https://i.imgur.com/yHwoQsy.png[/img]

      Xóa
    5. Ừ nhỉ mải edit temp ko để ý cái đó, để lát tui fix

      Xóa
    6. cái khung comment hơi lỗi ý ô

      Xóa
    7. Lỗi gì tui thấy ổn mà, hay là do khung cmt v1 nên ông thấy xấu?

      Xóa
    8. cái loadmore còn nằm trong bài viết

      Xóa
    9. À, v1 thì đúng là có lỗi thời nhưng mà nó đỡ lỗi khi cmt hơn v2 ông

      Xóa
    10. Chụp tui với, tui chưa hình dung ra

      Xóa
  5. nâng cấp form comment lên đi ô

    Trả lờiXóa
    Trả lời
    1. Nâng cáp lên nó sẽ có lỗi nhiều nên rui cứ để vậy

      Xóa

  6. Tên hiển thị : Nhân DZ Blog
    Url Blog : https://nhandzblog.blogspot.com/
    Mô Tả : Chia sẻ thủ thuật Blogger
    Đổi hộ nhé ~~

    Trả lờiXóa
    Trả lời
    1. Vkl thánh Nhân, tui nói chơi mà ông cũng đổi được hả :v

      Xóa
    2. Ủa mấy ông nói chơi gì nhau vậy

      Xóa
  7. Trả lời
    1. Ok bác cmt nội dung lk đi

      Xóa
    2. Tên: Star Dũng Blog
      Mô tả: Star Dũng Blog
      Web:www.stardungblog.xyz

      Xóa
    3. Bác vui lòng đặt lk của tui lên đầu nhé

      Xóa
    4. Lại còn phải đầu á :v

      Xóa
  8. Xài temp bsw hả e? hủy liên kết nhé

    Trả lờiXóa
  9. Làm bài hd menu bottom giống fb trên mobile đi

    Trả lờiXóa
    Trả lời
    1. Bài viết mới sẽ được cập nhật sau nhé bạn

      Xóa
  10. Trả lời
    1. Nguồn gg nhé sì ta nhân

      Xóa
    2. - :V https://mocgin.com/blogspot/thu-thuat-blogspot/huong-dan-phan-footer-cho-tempalte-blogspot.html

      Xóa

- Không spam link bừa bãi.

- Không nói tục, chửi bậy.

- Không bình luận mang tính chính trị.

- Hãy là một độc giả có ý thức!