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é!
Tóm Tắt
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:
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 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 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 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:
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 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:
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 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 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 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 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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ẻ!
