Tutorial Cách thêm nút gọi điện vào phiên bản mobile của website

Thảo luận trong 'HTML vs Browser' bắt đầu bởi babyinternet, 16/9/16.

  1. babyinternet

    babyinternet Administrator

    Tham gia ngày:
    4/7/08
    Bài viết:
    4,655
    Đã được thích:
    1,583
    Điểm thành tích:
    113
    Nơi ở:
    [}{]e[][]
    Bài này hướng dẫn các bạn cách thêm một nút "Gọi điện" vào phiên bản di động của website. Nhiều thứ nó nhỏ nhặt, đơn giản nhưng có tác động rất lớn đến việc chuyển đổi đơn hàng mà nhiều bạn không biết hoặc vô tình bỏ qua.

    Trước tiên xem demo mà mình sử dụng cho một số website của mình:

    [​IMG]

    [​IMG]
    Nó đơn giản vậy thôi nhưng có tác động lớn: xuất hiện đúng lúc, đúng chỗ và phù hợp với hành vi mua hàng trên di động.

    Sau đây là hướng dẫn cho bạn nào muốn làm nút gọi như vậy.

    Cách làm nút gọi điện trên phiên bản di động
    Để định dạng hình dạng cho thẻ này, tôi gắn thêm thuộc tính id vào để có thể tùy chỉnh giao diện trong Cascading Style Sheets. Đoạn mã này tốt nhất chúng ta nên đặt ở phần footer – nghĩa là cuối trang web để không ảnh hưởng đến tốc độ trang và được tải sau cùng.
    Đầu tiên chúng ta cần một nút để bấm đã, cái này có thể thực hiện đơn giản bằng 1 thẻ a là được:

    HTML:
    <a href="tel:08123456789" id="callnowbutton">&nbsp;</a>
    Tiếp theo chúng ta thêm đoạn mã sau vào phần CSS để quản lý việc hiển thị – không hiển thị nút này tùy theo phiên bản và kích thước.

    Đoạn mã CSS tôi dùng như sau:

    HTML:
    #callnowbutton {display:none;}
    @media screen and (max-width:650px){
      #callnowbutton {
        display:block;
        height:80px;
        position:fixed;
        width:100%;
        left:0;
        bottom:-20px;
        border-top:2px solid rgba(51,187,51,1);
        background:url(http://callnowbutton.com/phone/callbutton01.png) center 10px no-repeat #009900;
        text-decoration:none;
        box-shadow:0 0 5px #888;
        -webkit-box-shadow:0 0 5px #888;
        -moz-box-shadow:0 0 5px #888;
        z-index:9999;}
      }
    Chuyện định style lại thì tùy sở thích mỗi người nha :)
     
Đang tải...

Chia sẻ trang này