xác thực google maps

có plugin hiển thị button call now tùy biến được sđt không mn

Thảo luận trong 'Hỗ trợ Lập Trình, Mã Nguồn' bắt đầu bởi ladygirl, 9 Tháng mười hai 2019.

Lượt xem: 3,380

  1. ladygirl

    ladygirl Dự bị

    Bài viết:
    46
    Đã được thích:
    4
    như tiêu đề
    mình muốn khi xem bài viết nào có sđt nó sẽ hiển thị button SĐT của bài viết đó
    tìm ở trên mạng thấy toàn hướng dẫn bài button số đt cố định
     
    ladygirl, 9 Tháng mười hai 2019
    #1
    sofatoanquoc thích bài này.
  2. tanbinh

    tanbinh Thành viên

    Bài viết:
    247
    Đã được thích:
    124
    HTML

    HTML:
    <div class="fixed-call-button bottom-left"><a href="tel:09xxxxxxxx" title="09xx.xxx.xxx" rel="nofollow"><div class="widget-call-now"><div class="widget-alo-phone widget-alo-green widget-alo-show" id="widget-alo-phoneIcon"><div class="widget-alo-ph-circle"></div><div class="widget-alo-ph-circle-fill"></div><div class="widget-alo-ph-img-circle widget-alo-ph-circle-shake"><i class="fa fa-phone"></i></div></div></div></a></div>
    CSS

    Mã:
    /**
* call button
*/
@-moz-keyframes widget-alo-circle-anim{0%{-moz-transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1;-moz-opacity: 0.1;-webkit-opacity: 0.1;-o-opacity: 0.1}30%{-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5;-moz-opacity: 0.5;-webkit-opacity: 0.5;-o-opacity: 0.5}100%{-moz-transform: rotate(0) scale(1) skew(1deg);opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;-o-opacity: 0.1}}@-webkit-keyframes widget-alo-circle-anim{0%{-webkit-transform: rotate(0) scale(0.5) skew(1deg);-webkit-opacity: 0.1}30%{-webkit-transform: rotate(0) scale(0.7) skew(1deg);-webkit-opacity: 0.5}100%{-webkit-transform: rotate(0) scale(1) skew(1deg);-webkit-opacity: 0.1}}@-o-keyframes widget-alo-circle-anim{0%{-o-transform: rotate(0) kscale(0.5) skew(1deg);-o-opacity: 0.1}30%{-o-transform: rotate(0) scale(0.7) skew(1deg);-o-opacity: 0.5}100%{-o-transform: rotate(0) scale(1) skew(1deg);-o-opacity: 0.1}}@-moz-keyframes widget-alo-circle-anim{0%{transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1}30%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5}100%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.1}}@-webkit-keyframes widget-alo-circle-anim{0%{transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1}30%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5}100%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.1}}@-o-keyframes widget-alo-circle-anim{0%{transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1}30%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5}100%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.1}}@keyframes widget-alo-circle-anim{0%{transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1}30%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5}100%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.1}}@-moz-keyframes widget-alo-circle-fill-anim{0%{-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{-moz-transform: rotate(0) -moz-scale(1) skew(1deg);opacity: 0.2}100%{-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-webkit-keyframes widget-alo-circle-fill-anim{0%{-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{-webkit-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-o-keyframes widget-alo-circle-fill-anim{0%{-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{-o-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-moz-keyframes widget-alo-circle-fill-anim{0%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-webkit-keyframes widget-alo-circle-fill-anim{0%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-o-keyframes widget-alo-circle-fill-anim{0%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@keyframes widget-alo-circle-fill-anim{0%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}50%{transform: rotate(0) scale(1) skew(1deg);opacity: 0.2}100%{transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2}}@-moz-keyframes widget-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 widget-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 widget-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)}}@-moz-keyframes widget-alo-circle-img-anim{0%{transform: rotate(0) scale(1) skew(1deg)}10%{transform: rotate(-25deg) scale(1) skew(1deg)}20%{transform: rotate(25deg) scale(1) skew(1deg)}30%{transform: rotate(-25deg) scale(1) skew(1deg)}40%{transform: rotate(25deg) scale(1) skew(1deg)}50%{transform: rotate(0) scale(1) skew(1deg)}100%{transform: rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes widget-alo-circle-img-anim{0%{transform: rotate(0) scale(1) skew(1deg)}10%{transform: rotate(-25deg) scale(1) skew(1deg)}20%{transform: rotate(25deg) scale(1) skew(1deg)}30%{transform: rotate(-25deg) scale(1) skew(1deg)}40%{transform: rotate(25deg) scale(1) skew(1deg)}50%{transform: rotate(0) scale(1) skew(1deg)}100%{transform: rotate(0) scale(1) skew(1deg)}}@-o-keyframes widget-alo-circle-img-anim{0%{transform: rotate(0) scale(1) skew(1deg)}10%{transform: rotate(-25deg) scale(1) skew(1deg)}20%{transform: rotate(25deg) scale(1) skew(1deg)}30%{transform: rotate(-25deg) scale(1) skew(1deg)}40%{transform: rotate(25deg) scale(1) skew(1deg)}50%{transform: rotate(0) scale(1) skew(1deg)}100%{transform: rotate(0) scale(1) skew(1deg)}}@keyframes widget-alo-circle-img-anim{0%{transform: rotate(0) scale(1) skew(1deg)}10%{transform: rotate(-25deg) scale(1) skew(1deg)}20%{transform: rotate(25deg) scale(1) skew(1deg)}30%{transform: rotate(-25deg) scale(1) skew(1deg)}40%{transform: rotate(25deg) scale(1) skew(1deg)}50%{transform: rotate(0) scale(1) skew(1deg)}100%{transform: rotate(0) scale(1) skew(1deg)}}
.fixed-call-button.top-left .widget-call-now
{
top: -45px;
left: -45px;
}
.fixed-call-button.top-right .widget-call-now
{
top: -45px;
right: 0;
}
.fixed-call-button.bottom-left .widget-call-now
{
bottom: 0;
left: -45px;
}
.fixed-call-button.bottom-right .widget-call-now
{
bottom: 0;
right: 0;
}
.fixed-call-button .widget-call-now
{
position: fixed;
z-index: 8082;
width: 155px;
height: 155px;
left: -45px;
bottom: 0;
}
.fixed-call-button .widget-call-now i.fa-phone
{
font-size: 21px;
line-height: 50px;
}
.widget-alo-phone.widget-alo-green .widget-alo-ph-circle
{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.widget-alo-ph-circle
{
width: 110px;
height: 110px;
top: 45px;
left: 45px;
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);
-webkit-animation: widget-alo-circle-anim 1.2s infinite ease-in-out;
-moz-animation: widget-alo-circle-anim 1.2s infinite ease-in-out;
-ms-animation: widget-alo-circle-anim 1.2s infinite ease-in-out;
-o-animation: widget-alo-circle-anim 1.2s infinite ease-in-out;
animation: widget-alo-circle-anim 1.2s infinite ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.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%;
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
.widget-alo-ph-circle-fill
{
width: 90px;
height: 90px;
top: 55px;
left: 55px;
position: absolute;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-animation: widget-alo-circle-fill-anim 2.3s infinite ease-in-out;
-moz-animation: widget-alo-circle-fill-anim 2.3s infinite ease-in-out;
-ms-animation: widget-alo-circle-fill-anim 2.3s infinite ease-in-out;
-o-animation: widget-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: widget-alo-circle-fill-anim 2.3s infinite ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.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%;
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
.widget-alo-ph-circle-shake
{
-webkit-animation: widget-alo-circle-img-anim 1s infinite ease-in-out;
-moz-animation: widget-alo-circle-img-anim 1s infinite ease-in-out;
-ms-animation: widget-alo-circle-img-anim 1s infinite ease-in-out;
-o-animation: widget-alo-circle-img-anim 1s infinite ease-in-out;
animation: widget-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%;
}
.widget-alo-ph-img-circle
{
width: 50px;
height: 50px;
top: 75px;
left: 75px;
position: absolute;
background: rgba(30,30,30,0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
box-sizing: initial;
text-align: center;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
/**
* skin
*/
.widget-alo-phone.widget-alo-green .widget-alo-ph-img-circle,
.widget-alo-phone.widget-alo-green .widget-alo-ph-circle-fill
{
background-color: #175AA9;
}
.widget-alo-phone.widget-alo-green .widget-alo-ph-circle
{
border-color: #175AA9;
}
.fixed-call-button .widget-call-now i.fa-phone
{
color: #FFF;
}
     
    tanbinh, 9 Tháng mười hai 2019
    #2
    sofatoanquoc and BanThoCongGiao like this.
  3. BanThoCongGiao

    BanThoCongGiao Thành viên

    Bài viết:
    161
    Đã được thích:
    17
    Chưa có đâu Bác! Đoạn Code của Bác trên khi dùng thì Bác chịu khó chèn vào thôi và phần lớn giải quyết yêu cầu của chủ thớt!
     
    BanThoCongGiao, 9 Tháng mười hai 2019
    #3
  4. ladygirl

    ladygirl Dự bị

    Bài viết:
    46
    Đã được thích:
    4
    e dùng wordpress thì 2 đoạn code này chèn vào đây vậy a
     
    ladygirl, 9 Tháng mười hai 2019
    #4
  5. tanbinh

    tanbinh Thành viên

    Bài viết:
    247
    Đã được thích:
    124
    1. Bạn đăng nhập vào trang quản trị
    2. Click Appearance » Customize
    3. Click Additional CSS » thêm đoạn CSS bên trên vào » Lưu lại
    4. Chỉnh sửa 09xxxxxxxx thành số điện thoại của bạn trong đoạn HTML ở trên và sao chép
    5. Quay lại Customize và thêm mã HTML vào widget cần hiển thị (nếu theme có hỗ trợ)
    6. Lưu lại và kiểm tra

    Nếu cần hỗ trợ qua UltraView thì inbox mình nhé!
     

    Các file đính kèm:

    tanbinh, 10 Tháng mười hai 2019
    #5
    sofatoanquoc thích bài này.
  6. vesinhtrankhoa

    vesinhtrankhoa Thành viên

    Bài viết:
    171
    Đã được thích:
    28
    Hình như nó không có đâu bác. Plugin chung cho mọi người mà, còn 1 số ít như bác thì chắc phải tự phát triển riêng thôi. Về khoản code này em chịu không tham gia được
     
    vesinhtrankhoa, 10 Tháng mười hai 2019
    #6
  7. hoangduylinh

    hoangduylinh Dự bị

    Bài viết:
    4
    Đã được thích:
    0
    Cái này thì chỉ có code riêng rồi tự tùy biến thông qua css của từng bài thôi, chứ plugin thì theo mình nhớ là hiện tại chưa có bọn nào cả ^^!
     
    hoangduylinh, 10 Tháng mười hai 2019
    #7
  8. ngonghialv

    ngonghialv Thành viên

    Bài viết:
    213
    Đã được thích:
    30
    Nổ mail gửi cho, giống web cao đẳng ở chữ ký, plugin tự viết dung lượng 52kb siêu nhẹ cho wordpress. À t không ol thường xuyên nên khi nào ol sẽ gửi :))
     
    ngonghialv, 10 Tháng mười hai 2019
    #8
  9. ladygirl

    ladygirl Dự bị

    Bài viết:
    46
    Đã được thích:
    4
    dạ xem đã xem qua đúng cái em cần , mà a có biết cách nào nó chỉ hiện trong bài viết , và get các sđt khác nhau không ạ , vì các bài viết là sđt khác nhau , e muốn nó vào bài viết nào là get sđt đó , chứ k hiển thị 1 số trên toàn trang ạ giúp em với
     
    ladygirl, 10 Tháng mười hai 2019
    #9
  10. ngonghialv

    ngonghialv Thành viên

    Bài viết:
    213
    Đã được thích:
    30
    Theo mô tả của bạn thì bạn nên dùng trình tạo trang có hỗ trợ css trong bài biết, sau đó css ép ẩn số toàn trang đi, việc tiếp theo là chèn 1 đoạn code vào cuối bài trong trình sửa html lấy 1 ví dụ cơ bản, dùng gif để đỡ nhiều code do mình lười :D xem code:
    Mã:
    <div class="help-contact" style=" position: fixed; z-index: 100; bottom: 0px; width: 100%;height: auto; max-width: 150px; "> <a href="tel:0964618486"><img src="https://trangtuyensinh.com.vn/wp-content/uploads/2019/03/2-1533698849.gif" alt="goi"> </a></div>
     
    ngonghialv, 11 Tháng mười hai 2019
    #10

Chia sẻ trang này