[Code] quick alo phone (Nút gọi điện nhanh)

  • Admin

    Code quick alo phone (Nút gọi điện nhanh)

    rất dễ hiểu sẽ tạo 1 nút kêu gọi. ai click vào sẽ tự động chat với skyper :) hoặc là số điện thoại của bạn
    demo:

    Code:

    <div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon" style="right: 10px; top: 20%;">
      <a href="skype:dangvietpy?chat" title="Liên hệ nhanh">
      <div class="quick-alo-ph-circle"></div>
      <div class="quick-alo-ph-circle-fill"></div>
      <div class="quick-alo-ph-img-circle"></div>
      </a>
    </div>

    <style>

    .quick-alo-phone.quick-alo-static {
      opacity:.6;
    }

    .quick-alo-phone.quick-alo-hover,
    .quick-alo-phone:hover {
      opacity:1;
    }

    .quick-alo-ph-circle {
      width:160px;
      height:160px;
      top:20px;
      left:20px;
      position:absolute;
      background-color:transparent;
      -webkit-border-radius:100%;
      -moz-border-radius:100%;
      border-radius:100%;
      border:2px solid rgba(30,30,30,0.4);
      border:2px solid #bfebfc 9;
      opacity:.1;
      -webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
      -moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
      -ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
      -o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
      animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
      -webkit-transition:all .5s;
      -moz-transition:all .5s;
      -o-transition:all .5s;
      transition:all .5s;
      -webkit-transform-origin:50% 50%;
      -moz-transform-origin:50% 50%;
      -ms-transform-origin:50% 50%;
      -o-transform-origin:50% 50%;
      transform-origin:50% 50%;
    }

    .quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
      -webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
      animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
    }

    .quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
      -webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
      animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
    }

    .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
    .quick-alo-phone:hover .quick-alo-ph-circle {
      border-color:#00aff2;
      opacity:.5;
    }

    .quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,
    .quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {
      border-color:#75eb50;
      border-color:#baf5a7 9;
      opacity:.5;
    }

    .quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
      border-color:#00aff2;
      border-color:#bfebfc 9;
      opacity:.5;
    }

    .quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,
    .quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {
      border-color:#ccc;
      opacity:.5;
    }

    .quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {
      border-color:#75eb50;
      opacity:.5;
    }

    .quick-alo-ph-circle-fill {
      width:100px;
      height:100px;
      top:50px;
      left:50px;
      position:absolute;
      background-color:#000;
      -webkit-border-radius:100%;
      -moz-border-radius:100%;
      border-radius:100%;
      border:2px solid transparent;
      opacity:.1;
      -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
      -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
      -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
      -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
      animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
      -webkit-transition:all .5s;
      -moz-transition:all .5s;
      -o-transition:all .5s;
      transition:all .5s;
      -webkit-transform-origin:50% 50%;
      -moz-transform-origin:50% 50%;
      -ms-transform-origin:50% 50%;
      -o-transform-origin:50% 50%;
      transform-origin:50% 50%;
    }

    .quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {
      -webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
      animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    }

    .quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {
      -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
      animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
      opacity:0 !important;
    }

    .quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,
    .quick-alo-phone:hover .quick-alo-ph-circle-fill {
      background-color:rgba(0,175,242,0.5);
      background-color:#00aff2 9;
      opacity:.75 !important;
    }

    .quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,
    .quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {
      background-color:rgba(117,235,80,0.5);
      background-color:#baf5a7 9;
      opacity:.75 !important;
    }

    .quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
      background-color:rgba(0,175,242,0.5);
      background-color:#a6e3fa 9;
      opacity:.75 !important;
    }

    .quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,
    .quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {
      background-color:rgba(204,204,204,0.5);
      background-color:#ccc 9;
      opacity:.75 !important;
    }

    .quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {
      background-color:rgba(117,235,80,0.5);
      opacity:.75 !important;
    }

    .quick-alo-ph-img-circle {
      width:60px;
      height:60px;
      top:70px;
      left:70px;
      position:absolute;
      background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;
      -webkit-border-radius:100%;
      -moz-border-radius:100%;
      border-radius:100%;
      border:2px solid transparent;
      opacity:.7;
      -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
      -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
      -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
      -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
      animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
      -webkit-transform-origin:50% 50%;
      -moz-transform-origin:50% 50%;
      -ms-transform-origin:50% 50%;
      -o-transform-origin:50% 50%;
      transform-origin:50% 50%;
    }

    .quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {
      -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
      animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
    }

    .quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {
      -webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
      -moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
      -ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
      -o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
      animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
    }

    .quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,
    .quick-alo-phone:hover .quick-alo-ph-img-circle {
      background-color:#00aff2;
    }

    .quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,
    .quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
      background-color:#75eb50;
      background-color:#75eb50 9;
    }

    .quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
      background-color:#00aff2;
      background-color:#00aff2 9;
    }

    .quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,
    .quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {
      background-color:#ccc;
    }

    .quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {
      background-color:#75eb50;
    }

    @-moz-keyframes quick-alo-circle-anim {
      0% {
        -moz-transform:rotate(0) scale(.5) skew(1deg);
        opacity:.1;
        -moz-opacity:.1;
        -webkit-opacity:.1;
        -o-opacity:.1;
      }
      30% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.5;
        -moz-opacity:.5;
        -webkit-opacity:.5;
        -o-opacity:.5;
      }
      100% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
        opacity:.6;
        -moz-opacity:.6;
        -webkit-opacity:.6;
        -o-opacity:.1;
      }
    }

    @-webkit-keyframes quick-alo-circle-anim {
      0% {
        -webkit-transform:rotate(0) scale(.5) skew(1deg);
        -webkit-opacity:.1;
      }
      30% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        -webkit-opacity:.5;
      }
      100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        -webkit-opacity:.1;
      }
    }

    @-o-keyframes quick-alo-circle-anim {
      0% {
        -o-transform:rotate(0) kscale(.5) skew(1deg);
        -o-opacity:.1;
      }
      30% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        -o-opacity:.5;
      }
      100% {
        -o-transform:rotate(0) scale(1) skew(1deg);
        -o-opacity:.1;
      }
    }

    @-moz-keyframes quick-alo-circle-fill-anim {
      0% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
      50% {
        -moz-transform:rotate(0) -moz-scale(1) skew(1deg);
        opacity:.2;
      }
      100% {
        -moz-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
    }

    @-webkit-keyframes quick-alo-circle-fill-anim {
      0% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
      50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2;
      }
      100% {
        -webkit-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
    }

    @-o-keyframes quick-alo-circle-fill-anim {
      0% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
      50% {
        -o-transform:rotate(0) scale(1) skew(1deg);
        opacity:.2;
      }
      100% {
        -o-transform:rotate(0) scale(.7) skew(1deg);
        opacity:.2;
      }
    }

    @-moz-keyframes quick-alo-circle-img-anim {
      0% {
        transform:rotate(0) scale(1) skew(1deg);
      }
      10% {
        -moz-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      20% {
        -moz-transform:rotate(25deg) scale(1) skew(1deg);
      }
      30% {
        -moz-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      40% {
        -moz-transform:rotate(25deg) scale(1) skew(1deg);
      }
      50% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
      }
      100% {
        -moz-transform:rotate(0) scale(1) skew(1deg);
      }
    }

    @-webkit-keyframes quick-alo-circle-img-anim {
      0% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
      }
      10% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      20% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      }
      30% {
        -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      40% {
        -webkit-transform:rotate(25deg) scale(1) skew(1deg);
      }
      50% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
      }
      100% {
        -webkit-transform:rotate(0) scale(1) skew(1deg);
      }
    }

    @-o-keyframes quick-alo-circle-img-anim {
      0% {
        -o-transform:rotate(0) scale(1) skew(1deg);
      }
      10% {
        -o-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      20% {
        -o-transform:rotate(25deg) scale(1) skew(1deg);
      }
      30% {
        -o-transform:rotate(-25deg) scale(1) skew(1deg);
      }
      40% {
        -o-transform:rotate(25deg) scale(1) skew(1deg);
      }
      50% {
        -o-transform:rotate(0) scale(1) skew(1deg);
      }
      100% {
        -o-transform:rotate(0) scale(1) skew(1deg);
      }
    }

    .quick-alo-phone {
        position: fixed;
        background-color: transparent;
        width: 200px;
        height: 200px;
        cursor: pointer;
        z-index: 200000 !important;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        -webkit-transition: visibility .5s;
        -moz-transition: visibility .5s;
        -o-transition: visibility .5s;
        transition: visibility .5s;
        right: 150px;
        top: 30px;
    }
    </style>



    sau đó tìm
    Code:

    href="skype:dangvietpy?chat"

    trong đó dangvietpy là nick skyper của mình. bạn thay thành skyper của bạn.

    Còn nếu bạn muốn gọi trực tiếp vào số điện thoại thì thay bằng

    Code:
    href="tel:0123456789"

    0123456789 là sdt của bạn nhé



    Được sửa bởi Admin ngày 12.04.17 12:38; sửa lần 3.

  • QuyHope
    Bạn có thể giúp mình cách chèn vào website wordpress được không?


    --Chữ ký--
    Dự án căn hộ giá rẻ VinCity, Căn hộ cao cấp Đảo Kim Cương Quận 2, Căn hộ Millennium quận 4, Căn hộ Feliz en Vista quận 2
  • Admin
    @QuyHope đã viết:Bạn có thể giúp mình cách chèn vào website wordpress được không?

    tương tự wp cũng chèn như vậy nhé bạn vì đây chỉ là html thôi mà

  • QuyHope
    Mình đâu có thấy bạn hướng dẫn chèn đâu
    tại mình chèn vô header hay footer thì nó cũng không hiển thị


    --Chữ ký--
    Dự án căn hộ giá rẻ VinCity, Căn hộ cao cấp Đảo Kim Cương Quận 2, Căn hộ Millennium quận 4, Căn hộ Feliz en Vista quận 2
  • QuyHope
    Mình thấy trang này http://thietkethicongposm.com/ họ làm rất hay mà không biết có plugin nào dành cho wordpress k nưa?


    --Chữ ký--
    Dự án căn hộ giá rẻ VinCity, Căn hộ cao cấp Đảo Kim Cương Quận 2, Căn hộ Millennium quận 4, Căn hộ Feliz en Vista quận 2
  • Admin
    chèn footer là nó hiện mà.

    còn trang thietkethicong kia thì viết thêm code khi click nút gọi ko mở tab link mà mở ra popup là được :) ( sắp tới mình sẽ hướng dẫn cách này )


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • QuyHope
    Oh, thank Bạn nhé!


    --Chữ ký--
    Dự án căn hộ giá rẻ VinCity, Căn hộ cao cấp Đảo Kim Cương Quận 2, Căn hộ Millennium quận 4, Căn hộ Feliz en Vista quận 2
  • nhok92ger
    của em đặt xong nó nằm trên góc phải màn hình, em muốn nó nằm góc dưới thì phải chỉnh ở đâu nhĩ?


    --Chữ ký--
    http://xebanhmithonhiky.com cung cấp xe bánh mì inox các loại
  • Admin
    @nhok92ger đã viết:của em đặt xong nó nằm trên góc phải màn hình, em muốn nó nằm góc dưới thì phải chỉnh ở đâu nhĩ?

    tìm đoạn top: 20% và top: 30px; thay top bằng bottom

  • nhok92ger
    Mà có ai bỏ vào nó nhích nhích không? em chèn xong toàn đứng yên không ak?


    --Chữ ký--
    http://xebanhmithonhiky.com cung cấp xe bánh mì inox các loại
  • Admin
    @nhok92ger đã viết:Mà có ai bỏ vào nó nhích nhích không? em chèn xong toàn đứng yên không ak?

    mình dùng bình thường mà nhỉ. bạn gửi mình xem demo xem nào

  • Sponsored content

Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
5
Like :
0
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
5
Like :
0
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
5
Like :
0
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
5
Like :
0
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
7
Points :
9
Like :
0
blogger
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM
Bài viết :
7
Points :
9
Like :
0
blogger
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
353
Points :
690
Like :
108
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<