ZEOS

Địa chỉ IP của bạn: 3.237.22.21
Độ phân giải màn hình:x

Website đã chạy được 429 ngày

Thiện - Công Nghệ Thông Tin

Trang web chia sẻ kinh nghiệm đọc, học tập, làm việc và giảng dạy của bản thân nhằm giúp mọi người có duyên ghé thăm thì có tư liệu để học tập, nghiên cứu.
Site Map Contacts Home
Hide ad unit

ĐĂNG KÝ/ĐĂNG NHẬP

QUẢNG CÁO

Advertising

BÌNH CHỌN

Bạn thích Hệ thống quản lý nội dung hay CMS (Content Management System) nào

Các khảo sát khác...

QUẢNG CÁO

Advertising

THẺ

QUẢNG CÁO

Advertising

THỐNG KÊ

{siteinfo} {prostats} {online}
{referer}
ThienCNTT » Mẹo vặt » Thủ thuật jаvascript: Thêm biểu tượng điện thoại vào trang web
AuthorAuthor: admin | DateDate: 8-05-2020, 22:34
Bạn vào một trang web và thấy họ có biểu tưởng hình điện thoại rung rung.
Bạn muốn trang web của mình cũng có để thu hút khách hàng.
Sau đây, tôi sẽ hướng dẫn bạn làm điều đó.


Demo: https://thiencntt.com/share/










Cách làm:
Bước 1: Mở giao diện của trang, tùy theo từng mã nguồn mà bạn có cách làm riêng nhé!
Bước 2: Chèn đoạn CSS sau vào trước thẻ </head>
<style>
.thiencntt-alo-phone {
    background-color: transparent;
    cursor: pointer;
    height: 200px;
    position: fixed;
    transition: visibility 0.5s ease 0s;
    visibility: hidden;
    width: 200px;
    z-index: 999 !important;
}
.thiencntt-alo-phone.thiencntt-alo-show {
    visibility: visible;
}
.thiencntt-alo-phone.thiencntt-alo-hover, .thiencntt-alo-phone:hover {
    opacity: 1;
}
.thiencntt-alo-ph-circle {
    animation: 1.2s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim;
    background-color: transparent;
    border: 2px solid rgba(30, 30, 30, 0.4);
    border-radius: 100%;
    height: 160px;
    left: 20px;
    opacity: 0.1;
    position: absolute;
    top: 20px;
    transform-origin: 50% 50% 0;
    transition: all 0.5s ease 0s;
    width: 160px;
}
.thiencntt-alo-phone.thiencntt-alo-active .thiencntt-alo-ph-circle {
    animation: 1.1s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim !important;
}
.thiencntt-alo-phone.thiencntt-alo-static .thiencntt-alo-ph-circle {
    animation: 2.2s ease-in-out 0s normal none infinite running thiencntt-alo-circle-anim !important;
}
.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-circle, .thiencntt-alo-phone:hover .thiencntt-alo-ph-circle {
    border-color: #28cb75;
    opacity: 0.5;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-circle, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-circle {
    border-color: #28cb75;
    opacity: 0.5;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-circle {
    border-color: #f39000;
    opacity: 0.5;
}
.thiencntt-alo-ph-circle-fill {
    animation: 2.3s ease-in-out 0s normal none infinite running thiencntt-alo-circle-fill-anim;
    background-color: #f39000;
    border: 2px solid transparent;
    border-radius: 100%;
    height: 100px;
    left: 50px;
    opacity: 0.1;
    position: absolute;
    top: 50px;
    transform-origin: 50% 50% 0;
    transition: all 0.5s ease 0s;
    width: 100px;
}
.thiencntt-alo-phone .thiencntt-alo-ph-circle-fill:hover {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-circle-fill, .thiencntt-alo-phone:hover .thiencntt-alo-ph-circle-fill {
    background-color: #28cb75;
    opacity: 0.75 !important;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-circle-fill, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-circle-fill {
    background-color: #28cb75;
    opacity: 0.75 !important;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-circle-fill {
    background-color: #f39000;
    opacity: 0.75 !important;
}

.thiencntt-alo-ph-img-circle {
    animation: 1s ease-in-out 0s normal none infinite running thiencntt-alo-circle-img-anim;
    border: 2px solid transparent;
    border-radius: 100%;
    height: 60px;
    left: 70px;
    opacity: 0.7;
    position: absolute;
    top: 70px;
    transform-origin: 50% 50% 0;
    width: 60px;
}

.thiencntt-alo-phone.thiencntt-alo-hover .thiencntt-alo-ph-img-circle, .thiencntt-alo-phone:hover .thiencntt-alo-ph-img-circle {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-green.thiencntt-alo-hover .thiencntt-alo-ph-img-circle, .thiencntt-alo-phone.thiencntt-alo-green:hover .thiencntt-alo-ph-img-circle {
    background-color: #28cb75;
}
.thiencntt-alo-phone.thiencntt-alo-green .thiencntt-alo-ph-img-circle {
    background-color: #f39000;
}
@keyframes thiencntt-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 thiencntt-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 thiencntt-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);
}
}
.thiencntt-alo-ph-img-circle a img {
    padding: 4px 0 0 3px;
}
</style>
Bước 3: Chèn đoạn HTML sau vào trước thẻ </body>
<div style="left: -20px; bottom: 77px;" id="thiencntt-alo-phoneIcon" class="thiencntt-alo-phone thiencntt-alo-green thiencntt-alo-show" >
    <div class="thiencntt-alo-ph-circle"></div>
    <div class="thiencntt-alo-ph-circle-fill"></div>
    <div class="thiencntt-alo-ph-img-circle"><a href="tel:0985554994"><img alt="img" src="dаta:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAM1BMVEVMaXH////////////////////////////////////////////////////////////////x7/yuAAAAEHRSTlMAECAwQFBgcH+Pn6+/z9/vBVGEbAAAANxJREFUeNrtlFEOhCAMRKmgIqCd+592N5u6mJBo53ez7/8Fppk2/DAxpUQJi+LNwhj4sPuNGUb0GqIwilcpOFFxPoLOwmSnBpBxYXYpDRcarxz0xzS6lLUbVZyFhKFz8KI2YHuCyJ+Dn3ydLxdmIhwlemxsRI+NCfwAGp8mmlKDn0KsmCFK1dK6ybem8o7o4GRt937C6Vie8pxt7XvTh6iL8wRuIs23qRUnqvhypBtFdnScN9S+M/CUZ0RdNTB8uxfHQOm5bwqwd1qygj6hkg8TWgpuUq5tW6fwx3gBQ34djlG/yuIAAAAASUVORK5CYII="></a></div>
</div>

Nếu bạn muốn thay đổi màu của biểu tượng thì bạn có thể chỉnh trong phần CSS.
Xong


Dear visitor, you went to the site as unregistered user. We encourage you to register or enter the site under your name.

Thêm bình luận

Name:*
E-Mail:*
Security Code
Enter Code:*
Nhấp vào hình ảnh để cập nhật mã nếu bạn không đọc được.