Hướng dẫn thêm footer cho blogspot - Thích Chia Sẻ Blog
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! 
avatar

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

delete 10:56 20 tháng 2, 2018
avatar

Temp anh đang xài ấy hả, anh chỉ xóa intro + edit menu thôi mà

delete 15:26 2 tháng 3, 2018
avatar

Anh thì sao mà không anh thì sao =) ( nhây )

delete 17:18 4 tháng 3, 2018
avatar

Quen chứ sao không quen :v

delete 17:19 4 tháng 3, 2018
avatar

~~ Tương thì s mà k tương thì s =))

delete 17:59 4 tháng 3, 2018
avatar

Tương thì sướng mà không tương thì bứng :)

delete 18:00 4 tháng 3, 2018
avatar

lỗi font awesome với blockquote k click select all dc

delete 18:12 4 tháng 3, 2018
avatar

Đâu ông chụp hình đi

delete 18:12 4 tháng 3, 2018
avatar

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

delete 18:14 4 tháng 3, 2018
avatar

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

delete 18:15 4 tháng 3, 2018
avatar

cái khung comment hơi lỗi ý ô

delete 18:18 4 tháng 3, 2018
avatar

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

delete 18:19 4 tháng 3, 2018
avatar

cái loadmore còn nằm trong bài viết

delete 18:20 4 tháng 3, 2018
avatar

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

delete 18:20 4 tháng 3, 2018
avatar

nâng cấp form comment lên đi ô

delete 18:20 4 tháng 3, 2018
avatar

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

delete 18:21 4 tháng 3, 2018
avatar

Nâng cáp lên nó sẽ có lỗi nhiều nên rui cứ để vậy

delete 18:21 4 tháng 3, 2018
avatar


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é ~~

delete 10:38 6 tháng 3, 2018
avatar

Vkl thánh Nhân, tui nói chơi mà ông cũng đổi được hả :v

delete 11:05 6 tháng 3, 2018
avatar

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

delete 11:06 6 tháng 3, 2018
avatar

Ok bác cmt nội dung lk đi

delete 11:25 10 tháng 3, 2018
avatar

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

delete 12:27 10 tháng 3, 2018
avatar

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

delete 13:23 10 tháng 3, 2018
avatar

Lại còn phải đầu á :v

delete 13:35 10 tháng 3, 2018
avatar

Admin rep cmt của thánh nhân haha :v

delete 11:44 11 tháng 3, 2018
avatar

Tui đặt sau nhé vì còn bận mấy hôm

delete 11:49 11 tháng 3, 2018
avatar

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

delete 16:20 12 tháng 3, 2018
avatar

Dduwngf anh, ddeer em ddooir

delete 16:26 12 tháng 3, 2018
avatar

Đừng anh, để em đổi temp

delete 16:26 12 tháng 3, 2018
avatar
Nặc danh

Làm bài hd menu bottom giống fb trên mobile đi

delete 10:24 23 tháng 3, 2018
avatar

Bài viết mới sẽ được cập nhật sau nhé bạn

delete 18:46 23 tháng 3, 2018
avatar

Nguồn gg nhé sì ta nhân

delete 17:29 31 tháng 3, 2018
avatar

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

delete 06:24 1 tháng 4, 2018

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

Nội quy chung Phú Cường Blogger

1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

Đang cập nhật thêm nội quy...

- Blog: Phú Cường Blogger - Life Is Share
- Thành lập: 22/09/2017
- Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Team Solomid...
- Tác giả blog: Nguyễn Phú Cường hiện đang là sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội.
- Template: Twitter Template Version 1.0 By Phú Cường Blogger.

Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!