Cộng đồng blog chia sẽ kiến thức cộng đồng
Cách Code nút gọi điện thoại vào website wordpress
Gần đây nhiều anh em hỏi mình code thêm icon điện thoại vào trang chủ, có hiệu ứng rung rung cho đẹp, nên mình tiện làm blog cho anh em cùng làm. Cách Code nút gọi điện thoại vào website như thế nào luôn.
BẮT ĐẦU NHÉ!
- Thêm code HTML vào Footer.php
<div class="fix_tel"> <div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;"> <div class="ring-alo-ph-circle"></div> <div class="ring-alo-ph-circle-fill"></div> <div class="ring-alo-ph-img-circle"> <a href="tel:0909534588"><img class="lazy" src="https://speedboatmodel.com/wp-content/uploads/2022/04/goi.png" alt="G"></a> </div> </div> <div class="tel"> <a href="tel:0909534588"><p class="fone">Call: 0909534588</p></a> </div> </div>
- Thêm code css vào style.css
.fone {
font-size: 19px; /* chữ cạnh nút gọi */
color: #f00;
line-height: 40px;
font-weight: bold;
background: #000; /*Màu nền số điện thoại*/
padding-left: 48px; /* cách bên trái cho chữ */
margin: 0 0;
}
.fix_tel { position:fixed; bottom:30px; right: 0; z-index:999;} /* left 18px là cách bên trái 18px. nếu muốn cho nút gọi sang phải thay là right */
.fix_tel a {text-decoration: none; display:block;}
.tel {width:205px; height:40px; position:relative; overflow:hidden;background-size:40px;border-radius:28px;border:none}
.ring-alo-phone {
background-color: transparent;
cursor: pointer;
height: 82px;
position: absolute;
transition: visibility 0.5s ease 0s;
visibility: hidden;
width: 80px;
z-index: 200000 !important;
}
.ring-alo-phone.ring-alo-show {
visibility: visible;
}
.ring-alo-phone.ring-alo-hover, .ring-alo-phone:hover {
opacity: 1;
}
.ring-alo-ph-circle {
animation: 1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
background-color: transparent;
border: 2px solid #f58220; /*màu sóng*/
border-radius: 100%;
height: 70px;
left: 6px;
opacity: 0.1;
position: absolute;
top: 15px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 70px;
}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
animation: 1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
animation: 2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone:hover .ring-alo-ph-circle {
border-color: #f58220; /*màu sóng*/
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle {
border-color: #4d4d4d; /*màu sóng khi hover*/
opacity: 0.5;
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
border-color: red; /*màu sóng*/
opacity: 0.5;
opacity: 0.5;
}
.ring-alo-ph-circle-fill {
animation: 2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
background-color: #000;
border: 2px solid transparent;
border-radius: 100%;
height: 30px;
left: 30px;
opacity: 0.1;
position: absolute;
top: 33px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 30px;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone:hover .ring-alo-ph-circle-fill {
background-color: rgba(0, 175, 242, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
background-color: rgba(117, 235, 80, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
background-color:red; /*màu sóng*/
opacity: 0.75 !important;
}
.ring-alo-ph-img-circle {
animation: 1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
border: 2px solid transparent;
border-radius: 100%;
height: 50px; /*cao cua icon dien thoai*/
left: 15px;
opacity: 1;
position: absolute;
top: 25px;
transform-origin: 50% 50% 0;
width: 50px; /*thap cua icon dien thoai*/
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone:hover .ring-alo-ph-img-circle {
background-color: #80837c;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
background-color: #4d4d4d; /*màu khi hover icon*/
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
background-color: #f58220; /*Màu icon */
}
@keyframes ring-alo-circle-anim {
0% {
opacity: 0.1;
transform: rotate(0deg) scale(0.5) skew(1deg);
}
30% {
opacity: 0.5;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
100% {
opacity: 0.6;
transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes ring-alo-circle-img-anim {
0% {
transform: rotate(0deg) 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(0deg) scale(1) skew(1deg);
}
100% {
transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes ring-alo-circle-fill-anim {
0% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
50% {
opacity: 0.2;
transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
}
.ring-alo-ph-img-circle a img {
padding: 6px 0 0px 6px;
width: 40px;
position: relative;
top: -1px;
}
/*-----------------*/
Vậy là xong bài hướng dẫn làm Cách Code nút gọi điện thoại vào website wordpress
xong nhé anh em, thấy hay tiếc gì 1 like nhỉ phải không anh em :p
Các bạn có gì thắc mắc cứ liên hệ với mình hoặc để lại comment bên dưới, like face để có nhiều tin mới hơn nhé. mình sẽ hỗ trợ hết sức, thank you mọi người nhé!
