Home / Wordpress / Cách Code nút gọi điện thoại vào website wordpress

Cách Code nút gọi điện thoại vào website wordpress

Cách Code nút gọi điện thoại vào website wordpress
Cách Code nút gọi điện thoại vào website wordpress

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://khomaythegioi.com/icon/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é!

About admin

congdongblog.com và congdongshop.com là một nhé mọi người, trang website đều do admin là Nguyễn Trung Thông sở hữu và quản lý, với đam mê CNTT , trang này dùng để chia sẽ kinh nghiệm những gì mình có, những gì mình làm được lên đây cho mọi người cùng học nhé, có gì sai sót mọi người bỏ qua nhé

Bạn Chưa biết ?

Code tùy biến hiển thị sản phẩm Woocommerce wordpress

Code tùy biến hiển thị sản phẩm Woocommerce wordpress Chào các bạn nhé, nay mình …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đánh giá facebook