Để hiểu rõ hơn thứ mình chuẩn bị nói đây, mời các bạn xem hình!
Có thể hiểu đơn giản là mình làm một khối div gồm các biểu tượng và các liên kết bám dính ở viền trái của màn hình duyệt web. Mặc định khối đó sẽ ẩn đi chỉ hiện các icon mà thôi, nhưng khi mình rê chuột (hover) vào khối đó thì nó xổ ra hết toàn bộ các thông tin và liên kết khác.
Xem demo://edu5.ninhbinhweb.info/
Bây giờ mình bắt tay vào việc luôn nhé!
Bước 1: Copy code HTML và CSS
Trên thanh Admin Bar đen đen trên cùng có chữ Flatsome, các bạn chọn lần lượt vào Advanced – Global setting – Footer Script.
Tại khoảng trống để nhập code trong Footer Scipt, các bạn paste toàn bộ đoạn code sau:
</p> <style> .box_fixRight { position: fixed; top: 150px; right: -140px; width: auto; transition: all 0.2s ease-in-out 0s; z-index: 999; } .box_fixRight .box_content { background: #fff; padding: 10px; box-shadow: 10px 0px 30px #888888; border-radius: 10px 0 0 10px; } .box_fixRight .box_content .item { display: block; padding: 13px 10px 13px 47px; color: #111; } .box_fixRight .box_content .item:hover{color:#184b9b} .box_fixRight .box_content .item.item_1 { background: url(/wp-content/uploads/2019/03/iconfix-1.png) no-repeat left; } .box_fixRight .box_content .item.item_2 { background: url(/wp-content/uploads/2019/03/iconfix-2.png) no-repeat left; } .box_fixRight .box_content .item.item_3 { background: url(/wp-content/uploads/2019/03/iconfix-3.png) no-repeat left; } .box_fixRight:hover { right: 0; transition: all 0.2s ease-in-out 0s; } @media (max-width: 549px){ .box_fixRight{display:none} } </style><div class="box_fixRight"><div class="box_content"><a href="/khoa-hoc/" class="item item_1">Lịch khai giảng</a><br><a href="/lien-he/" class="item item_2">Liên hệ</a><br><a href="#dang-ky" class="item item_3">Đăng ký học thử</a></div></div><p>
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
<div class=“box_fixRight”>
<div class=“box_content”>
<a href=“/khoa-hoc/” class=“item item_1”>Lịch khai giảng</a>
<a href=“/lien-he/” class=“item item_2”>Liên hệ</a>
<a href=“#dang-ky” class=“item item_3”>Đăng ký học thử</a>
</div>
Bước 2: Thay liên kết và text
Đoạn code demo bên trên mình gắn link cho 3 chữ “Lịch khai giảng”, “Liên hệ” và “Đăng ký học thử”. Các bạn chỉ việc thay liên kết cho nó trong thẻ thay liên kết tại đây“> như hình diễn giải sau:
Lưu ý: Trong demo của mình, nút “Đăng ký học thử” mình gắn liên kết neo xuống phía dưới Form đăng kýở footer nên mình để link #dang-ky và theo đó có cả đoạn Java Script bên dưới để tạo hiệu ứng trượt mượt mà khi bấm vào liên kết neo cho website. Nếu bạn không sử dụng, có thể thay link và xóa đoạn JavaSript kia đi nhé!
Bước 3: Thay link ảnh icon
Các bạn tải hết 3 icon ở bên dưới về và upload lên website nhé! Quản trị – Thư viện – Tải lên– Tải tập tin lên.
Sau khi tải thành công các icon lên thư viện WordPress, các bạn vào lấy link của icon đó và thay lần lượt vào các vị trí như mình đánh dấu dưới đây:
Bước 4: Lưu lại và ra hưởng thành quả
Bước 1:Đối với giao diện bất kỳ không phải Flatsome, các bạn vào Quản trị – Giao diện – Sửa – Chọn theme đang sử dụng (theme mẹ) – Footer.php.
Bước 2:Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng