[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.

Hướng dẫn tạo tiện ích liên hệ đẹp cho blogspot


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ợ.

Hướng dẫn tạo tiện ích liên hệ đẹp cho blogspot
Hiển thị góc phải trên máy tính


Hướng dẫn tạo tiện ích liên hệ đẹp cho blogspot
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:

Hướng dẫn tạo tiện ích liên hệ đẹp cho blogspot

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]