Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
29 Footer Design Cho Website

29 Footer Design Cho Website


Ngày 18 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu Footer snippet bằng cách kết hợp HTML, CSS, Javascript và Bootstrap . Nào hãy cũng mình tìm hiểu nhé!

Footer Website Là Gi?

Theo mình thấy đa số trang web đều có phần footer và thường đặt ở ví trí cuối trang. Nó cung cấp thông tin thêm về trang web của bạn như là người số hữu trang web, thông tin liên lạc, đường dẫn liên kết với trang web khác... Một số công ty kinh doanh còn dùng footer để hiển thị sản phẩm hay chương trình khuyến mãi bổ sung. Sau đây mình sẽ liệt kê các thành phần cần thiết trong footer và bạn có thể linh hoạt để lựa chọn những yếu tố nào phù hợp với trang web của mình nhé:

  • Thông tin liên lạc: Đó có thể là một đoạn văn ngắn miêu tả về nội dung, mục đích của trang web cũng như chứa thêm thông tin giúp người dùng có thể liên lạc trực tiếp với bạn. Chúng ta cũng thể sử dụng contact form để người dùng có thể nhập và gửi ngay tin nhắn cho bạn ở trên trang web. Để tìm hiểu thêm về contact form bạn truy cập ở đây nhé : Contact Form.
  • Địa chỉ, Bản đồ (Ví dụ Google Map): Cài này rất thích hợp nếu bạn có cửa hàng kinh doanh hay công ty để dễ dàng tìm kiếm tạo liên kết với các khách hàng địa phương.
  • Sitemap: bạn có thể hiểu nó là bản đồ trang web chứa danh sách liên kết đường dẫn đến các thành phần quan trọng trong trang hoặc những đường dẫn nổi bật được xem nhiều nhất trong trang web của bạn.
  • Social Icon: Ngày nay với sự phát triển mạnh mẽ của mạng xã hội thì bạn cũng nên quảng bá hình ảnh, thương hiệu bằng các trang mạng xã hội giúp tăng tương tác với người dùng hơn.
  • Bằng khen, giấy chứng nhận hay nhận xét của khách hàng: giúp người dùng có thể tin tưởng hơn với sản phẩm, dịch vụ mà trang web của bạn đang cung cấp.

Để hiểu rõ hơn bạn xem ví dụ về footer trong trang thế giới di động dưới đây nha:

Ví dụ về footer trong trang web

Bây giờ mình sẽ giới thiệu tiếp một số Footer được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.

Các Ví Dụ Footer Bootstrap

Bootstrap Footer:

Footer xây dựng bằng HTML, CSS và Bootstrap Phần 1

Footer này được thiết kế đơn giản, rõ ràng và được chia thành 4 phần riêng biệt giúp người dùng dễ dàng tìm kiếm thông tin cần thiết về trang web. Nó được xây dựng bằng HTML, CSS, Bootstrap nên bạn dễ dàng áp dụng cho nhiều thiết kế, bố cục web có hỗ trợ Bootstrap. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen bootstrap footer by Sebastian Sabadus (@Mutulica) on CodePen.

Nguồn

Footer Using Bootstrap 4:

Footer xây dựng bằng HTML, CSS và Bootstrap Phần 2

Footer này được thiết kế lấy sitemap(bản đồ trang web) làm trọng tâm giúp người dùng có thể truy cập nhanh các thành phần trong trang và liên kết mạng xã hội được đặt ở chính giữa giúp làm nổi bật cũng như tăng khả năng nhấn vào các đường dẫn đó. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Footer Using Bootstrap 4(Source from bootsnip) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Contact & Footer:

Footer xây dựng bằng HTML, CSS và Javascript Phần 3

Footer này phù hợp với các trang web blog cá nhân gồm phần miêu tả tóm tắt sơ lược bản thân nằm bên tay trái và form liên hệ giúp liên lạc trực tiếp với chủ trang web nằm bên tay phải. Do được xây dựng bằng HTML, CSS và Javascript nên bạn có thể áp dụng cho nhiều loại trang web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Template: Contact & Footer by Francesca Tabor (@ftabor) on CodePen.

Nguồn

Footer Template:

Footer xây dựng bằng HTML, CSS Phần 4

Nếu bạn thích yêu thích thiết kế đơn giản và làm nổi bật các thành phần đường dẫn trong trang web thì nên chọn component này. Nó được xây dựng bằng HTML, CSS, Bootstrap, reponsive trên nhiều màn hình thiết bị khác nhau và hiệu ứng chuyển màu khi người dùng hover vào icon mạng xã hội. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Footer template by scanfcode (@scanfcode) on CodePen.

Nguồn

Footer Example 4:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 5

Footer này thiết kế tập trung vào việc đưa ra thông tin liên lạc, tăng tương tác nhấn vào các liên kết mạng xã hội bằng cách sử dụng icon có kích thước lớn hơn so với các thành phần khác và cũng nhấn mạnh thương hiệu, hình ảnh logo của công ty, tổ chức. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Footer Example 4 by Steve (@slstudios) on CodePen.

Nguồn

Bootstrap Footer 2:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 6

Component này có thể nói là bao quát gần hết các thành phần trong footer. Việc đưa các bài mới nhất vào footer giúp người dùng có thể dễ dàng truy cập bài viết mà không phải quay lại đầu trang để xem. Việc thêm các tag và đường link cũng giúp trang của bạn có thể SEO được tốt hơn trong công cụ tìm kiếm. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Footer 2(Source From Bootsnipp) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Bootstrap Footer 3:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 7

Footer này được thiết kế tương đối đơn giản và làm nổi bật được các yếu tố cần thiết như hình ảnh, thương hiệu, các thông tin liên lạc... Sự sắp xếp các thành phần trong component rõ ràng, khoảng cách giữa thành phần hợp lý nên giúp người dùng dễ hiểu. Do được xây dựng dụng HTML, CSS, Bootstrap nên bạn có thể áp dụng cho nhiều loại trang web khác nhau. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Footer 3 (Source from snippet) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Bootstrap Footer 4:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 8

Footer này được thiết kế chủ yếu nhắm vào hành động đăng ký email để giúp tăng sự tương tác và tìm kiếm khách hàng tiềm năng. Ngoài ra nó còn có mục để giới thiệu về những thành tích, đánh giá tốt cho dịch vụ, sản phẩm của trang web. Do cấu trúc code là Bootstrap nên bạn dễ thay thế sửa chữa sao cho phù hợp với mục đích của mình.Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Footer 4(source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Bootstrap Footer 5:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 9

Footer này được thiết kế theo phong cách khá đơn giản với việc phối hợp nhận xét đánh giá của khách hàng góp phần tạo thêm niềm tin cảm giác tin tưởng về sản phẩm, dịch vụ được cung cấp trên trang web. Ngoài ra nó còn tích hợp thêm phần tải ứng dụng về trên điện thoại và responsive trên nhiều màn hình thiết bị khác nhau.Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Footer 5(source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Bootstrap Footer 6:

Footer xây dựng bằng HTML, CSS , Bootstrap Phần 10

Footer cũng được dùng tăng tương tác người dùng đăng ký email để tìm khách hàng tiềm năng nhưng thiết kế đơn giản hơn so với ví dụ trên.Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi footer này được hiển thị trên web ở dưới đây nhé:

See the Pen Bootstrap Footer 6(source from bbbootstrap) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Footer Always At Bottom

Footer Always At Bottom

Kết quả bạn xem bên dưới nha:

See the Pen CSS "Always on the bottom" Footer by Chris Bracco (@cbracco) on CodePen.

Nguồn

CSS Goey footer

CSS Goey footer

Kết quả bạn xem bên dưới nha:

See the Pen CSS Goey footer by Zed Dash (@z-) on CodePen.

Nguồn

Footer template

Footer template

Kết quả bạn xem bên dưới nha:

See the Pen Footer template by scanfcode (@scanfcode) on CodePen.

Nguồn

Sticky Footer

Sticky Footer

Kết quả bạn xem bên dưới nha:

See the Pen Sticky Footer by Chris Coyier (@chriscoyier) on CodePen.

Nguồn

Footer With Content Scale

Footer With Content Scale

Kết quả bạn xem bên dưới nha:

See the Pen footer with conent scale by Mātthīas (@mfritsch) on CodePen.

Nguồn

Responsive Footer HTML

Responsive Footer HTML

Kết quả bạn xem bên dưới nha:

See the Pen Responsive & clean footer design by Christopher Schuck (@mofny) on CodePen.

Nguồn

HTML Footer Template

HTML Footer Template

Kết quả bạn xem bên dưới nha:

See the Pen Footer Responsive by Anup Kumar (@baahubali92) on CodePen.

Nguồn

Simple Footer

Simple Footer

Kết quả bạn xem bên dưới nha:

See the Pen Another Simple Footer by Craig (@craigengland) on CodePen.

Nguồn

HTML CSS footer template

HTML CSS footer template

Kết quả bạn xem bên dưới nha:

See the Pen stylish footer by Swarup Kumar Kuila (@uiswarup) on CodePen.

Nguồn

Bootstrap 4 Footer with Social icons

Bootstrap 4 Footer with Social icons

Kết quả bạn xem bên dưới nha:

See the Pen Bootstrap 4 Footer with Social icons by Namiq Namaz (@NamiqNamaz) on CodePen.

Nguồn

Responsive Flexbox Footer

Responsive Flexbox Footer

Kết quả bạn xem bên dưới nha:

See the Pen Responsive Flexbox Footer by Matheus Almeida (@matheusalmeida) on CodePen.

Nguồn

Footer with CSS Grid

Footer with CSS Grid

Kết quả bạn xem bên dưới nha:

See the Pen Footer with CSS Grid by Jules Forrest (@julesforrest) on CodePen.

Nguồn

Footer Design

Footer Design

Kết quả bạn xem bên dưới nha:

See the Pen footer design by Swarup Kumar Kuila (@uiswarup) on CodePen.

Nguồn

Responsive Footer CSS

Responsive Footer CSS

Kết quả bạn xem bên dưới nha:

See the Pen Responsive Footer by William White (@willwhite) on CodePen.

Nguồn

Simple responsive footer

Simple responsive footer

Kết quả bạn xem bên dưới nha:

See the Pen Responsive footer, Responsive footer with social media icons, Attractive responsive footer by Pooja Nahelia (@poojanahelia) on CodePen.

Nguồn

Very Simple Footer Template

Very Simple Footer Template

Kết quả bạn xem bên dưới nha:

See the Pen Simple Footer by Anup Kumar (@baahubali92) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Footer tìm kiếm cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.