[blog]
Hướng dẫn các bạn tạo tiện ích liên hệ đẹp cho blogspot bao gồm gọi điện, zalo, gửi tin nhắn và địa chỉ maps... tiện ích liên hệ hiển thị đẹp trên cả máy tính và điện thoại, nội dung viết bởi giaodienblog.net.
Các bạn có thể xem trực tiếp demo trên trang giaodienblog.net hiển thị trên cả máy tính và điện thoại, các bước làm như sau:
Đầu tiên là blog của bạn phải sử dụng 3 thư viện bên dưới, các bạn copy dán dưới thẻ <head>:
Lưu ý: Nếu blog của bạn có rồi thì không cần thêm, tùy vào phiên bản có thể sẽ không hoạt động. Nhất là bootstrap.min.js
Hoặc phiên bản 4.4.1 hoạt động tốt
Tiếp theo bạn copy toàn bộ đoạn code html và css, Javascript bên dưới dán trước thẻ đóng </body>
Link tải
Sau đó bạn lưu lại và kiểm tran trên blog. Nếu bạn làm không được thì hãy comment bên dưới để mình hỗ trợ.
Các bạn chỉnh sửa một số thông tin bên trong như: Số điện thoại, link... Và đặc biệt là xem hướng dẫn tạo form để nhận được tin nhắn về mail tại bước 4 ở đây: Xem hướng dẫn
Hướng dẫn các bạn thay icon bằng hình ảnh luôn: Link để lấy icon các bạn truy cập iconfinder.com thích gì thì tìm đấy.
Các bạn xóa font SVG chỗ tô đen đi và thay icon bằng hình ảnh như sau, ví dụ 1 con sau khi được thay:
Sau khi xóa và thay link hình:
Các bạn thay link icon vô link trên
Tiếp theo cần thêm CSS để căn chỉnh icon
Lưu ý:
- Icon các bạn tải về và lưu lên blog để lấy link hoặc upload lên github để tránh mất link sau này.
- Chỉ nên áp dụng cho những template sử dụng bootstrap, những template khác mà không dùng khi thêm vô sẽ làm nặng template trong quá trình tải trang.
Chúc bạn thành công.
[/blog]
Hướng dẫn các bạn tạo tiện ích liên hệ đẹp cho blogspot bao gồm gọi điện, zalo, gửi tin nhắn và địa chỉ maps... tiện ích liên hệ hiển thị đẹp trên cả máy tính và điện thoại, nội dung viết bởi giaodienblog.net.
Các bạn có thể xem trực tiếp demo trên trang giaodienblog.net hiển thị trên cả máy tính và điện thoại, các bước làm như sau:
Đầu tiên là blog của bạn phải sử dụng 3 thư viện bên dưới, các bạn copy dán dưới thẻ <head>:
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css' rel='stylesheet'/> <script async='async' defer='defer' src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script async='async' defer='defer' src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
Lưu ý: Nếu blog của bạn có rồi thì không cần thêm, tùy vào phiên bản có thể sẽ không hoạt động. Nhất là bootstrap.min.js
Hoặc phiên bản 4.4.1 hoạt động tốt
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Tiếp theo bạn copy toàn bộ đoạn code html và css, Javascript bên dưới dán trước thẻ đóng </body>
Link tải
Sau đó bạn lưu lại và kiểm tran trên blog. Nếu bạn làm không được thì hãy comment bên dưới để mình hỗ trợ.
 |
| Hiển thị góc phải trên máy tính |
 |
| Hiển thị cố định dưới cùng trên mobile |
Các bạn chỉnh sửa một số thông tin bên trong như: Số điện thoại, link... Và đặc biệt là xem hướng dẫn tạo form để nhận được tin nhắn về mail tại bước 4 ở đây: Xem hướng dẫn
Hướng dẫn các bạn thay icon bằng hình ảnh luôn: Link để lấy icon các bạn truy cập iconfinder.com thích gì thì tìm đấy.
Các bạn xóa font SVG chỗ tô đen đi và thay icon bằng hình ảnh như sau, ví dụ 1 con sau khi được thay:
Sau khi xóa và thay link hình:
<li class="addThis_item"> <a class="addThis_item--icon" href="tel:0971539681" rel="noreferrer"> <img src = "link icon"/> <span class="tooltip-text">Gọi ngay cho chúng tôi</span> </a> </li>
Các bạn thay link icon vô link trên
Tiếp theo cần thêm CSS để căn chỉnh icon
<style>
.addThis_item img {
width: 100%;
float: left;
z-index: 9999;
}
</style>
Lưu ý:
- Icon các bạn tải về và lưu lên blog để lấy link hoặc upload lên github để tránh mất link sau này.
- Chỉ nên áp dụng cho những template sử dụng bootstrap, những template khác mà không dùng khi thêm vô sẽ làm nặng template trong quá trình tải trang.
Chúc bạn thành công.
[/blog]