Bạn muốn lập một thanh bar dính ở cuối trang và trôi theo trang web khi cuộn? Chúng tôi cũng có sử dụng một số thành phần sticky ở footer của website bởi vì nó giúp tôi hiển thị thông tin quan trọng cần hiển thị tới khách hàng. Trong bài viết này chúng tôi sẽ giúp bạn làm nó trên website của bạn với một số code đơn giản.
Cái gì là Floating Footer Bar
Một sticky floating footer bar cho phép bạn thúc đẩy hiển thị thông tin quan trọng tới người dùng. Thanh bar này hiển thị đến người dùng tất cả thời gian khi họ ở trên website, vì vậy chúng thường gây ấn tượng và làm người đọc chú ý hơn.
Bạn có thể sử dụng floating footer bar để:
- Dẫn người đọc tới những bài viết khác.
- Thu thấp email khách hàng.
- Thông báo chương trình khuyến mãi.
Trong bài viết này, chúng tôi sẽ hiển thị cách để thêm một sticky floating footer bar trên website của bạn.
Cách lập sticky floating footer bar bằng tay
Phương pháp này yêu cầu bạn thêm code vào trong file giao diện. Nên bạn phải biết sơ qua về cấu trúc theme và code html, css.
Đầu tiên, bạn cần kết nối đến code của website thông qua một FTP client hoặc file manager trong cPanel.
Trong FTP client, bạn cần xác định file hiển thị code hiển thị vị trí footer ví dụ là file footer.php . Bạn download nó về máy tính của mình và mở nó lên bằng các phần mềm biên tập file code như notepad++ và thêm code sau vào trước thẻ </body>
|
1
2
3
4
5
6
7
8
9
10
|
<div class=“fixedBar”>
<div class=“boxfloat”>
<ul id=“tips”>
<li><a href=“http://hocthietkeweb.net.vn/”>Vietpro</a></li>
<li><a href=“http://hocthietkeweb.net.vn/”>Học viện đào tạo công nghệ thông tin</a></li>
</ul>
</div>
</div>
|
Bạn có thể thêm nhiều thông tin bạn muốn hiển thị. Tiếp theo, chúng ta thêm code CSS . Bạn nên thêm vào file quản lý css trong giao diện của bạn như file style.css:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
/*Footer Bar*/
.fixedbar {
background: #000;
bottom: 0px;
color:#fff;
font–family: Arial, Helvetica, sans–serif;
left:0;
padding: 0px 0;
position:fixed;
font–size:16px;
width:100%;
z–index:99999;
float:left;
vertical–align:middle;
margin: 0px 0 0;
opacity: 0.95;
font–weight: bold;
}
.boxfloat {
text–align:center;
width:920px;
margin:0 auto;
}
#tips, #tips li {
margin:0;
padding:0;
list–style:none
}
#tips {
width:920px;
font–size:20px;
line–height:120%;
}
#tips li {
padding: 15px 0;
display:none;
}
#tips li a{
color: #fff;
}
#tips li a:hover {
text–decoration: none;
}
|
Sau khi thêm code CSS, bạn cần lưu 2 file lại. Bây giờ mở FTP client lên và kết nối đến web server. Đi đến nơi đặt 2 file này và thay thế bằng 2 file ở máy tính bạn.
Chúng tôi hi vọng bạn đã có thể làm một floating footer bar cho website của mình.
Xem thêm Khóa học lập trình PHP từ A-Z!
