Code chèn hotline, zalo, facebook cực đẹp

3 năm trước, Code website hay dùng, Code theme wordpress, Thủ thuật web, 15750 Lượt xem

Đăng ký cập nhập video từ netweb.vn

Code chèn hotlike, zalo facebook cực đẹp cho những ai có website ạ! các bạn chèn code dưới vào header hoặc footer của trang web của bạn.

Chèn html header!

<div class="hotline-phone-ring-wrap">
    <div class="hotline-phone-ring">
        <div class="hotline-phone-ring-circle"></div>
        <div class="hotline-phone-ring-circle-fill"></div>
        <div class="hotline-phone-ring-img-circle"> <a href="tel:0898982526" class="pps-btn-img"> <img src="https://netweb.vn/img/hotline/icon.png" alt="so dien thoai" width="50"> </a></div>
    </div>
    <div class="hotline-bar">
        <a href="tel:0898982526"> <span class="text-hotline">08 9898 2526</span> </a>
    </div>

</div>



<div class="float-icon-hotline">			
		<ul class ="left-icon hotline">
			<li class="hotline_float_icon"><a target="_blank" rel="nofollow" id="messengerButton" href="https://zalo.me/0375577911"><i class="fa fa-zalo animated infinite tada"></i><span>Zalo</span></a></li>
			<li class="hotline_float_icon"><a target="_blank" rel="nofollow" id="messengerButton" href="https://www.messenger.com/t/vanhaiweb"><i class="fa fa-messenger animated infinite tada"></i><span>Facebook</span></a></li>
		</ul>		
</div>

Chèn file css

.hotline-phone-ring-circle{width:85px;height:85px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;opacity:.5}
.hotline-phone-ring-circle-fill{width:55px;height:55px;top:22px;left:26px;position:absolute;background-color:rgba(230,8,8,.7);border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.hotline-phone-ring-img-circle{background-color:#e4212a;width:33px;height:33px;top:33px;left:37px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-img{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-phone-ring-img-circle .pps-btn-img img{width:20px;height:20px}

.hotline-bar{position:absolute;background:#e88a25;background:-webkit-linear-gradient(left,#e88a25,#d40000);background:-o-linear-gradient(right,#e88a25,#d40000);background:-moz-linear-gradient(right,#e88a25,#d40000);background:linear-gradient(to right,#e88a25,#e4212a);height:40px;width:200px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all .8s;-webkit-transition:all .8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.1);border-radius:50px !important;border:2px solid #fff;left:33px;bottom:37px}.hotline-bar>a{color:#fff;text-decoration:none;font-size:18px;font-weight:900;text-indent:50px;display:block;letter-spacing:1px;line-height:38px;font-family:Arial}.hotline-bar>a:hover,.hotline-bar>a:active{color:#fff}@-webkit-keyframes phonering-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}}@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.6}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}}@-webkit-keyframes phonering-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)}}@media (max-width:768px){.hotline-bar{display:none}}

.hotline-phone-ring-img-circle .pps-btn-img img {
    width: 20px;
    height: 20px;
}
img {
    border: none;
}


.hotline-phone-ring-wrap {
    position: fixed !important;
    bottom: 0;
    left: 0;
    z-index: 1111111;
}

.hotline-phone-ring {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}


.float-icon-hotline {
    display: block;
    width: 40px;
    position: fixed;
    bottom: 85px;
    left: 33px;
    z-index: 999999;
}
	

.float-icon-hotline ul {
    display: block;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
}
.float-icon-hotline ul li {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.float-icon-hotline ul li a#messengerButton {
    padding: 0px !important;
    background: transparent !important;
    border: 0px !important;
}
@media only screen and (min-width: 960px)
{
	.float-icon-hotline ul li .fa {
		background-size: contain !important;
	}
}
.float-icon-hotline ul li .fa-phone {
    background-color: #ed1c24;
}
.float-icon-hotline ul li .fa {
    background-color: #ed1c24;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}
.animated.infinite {
    animation-iteration-count: infinite;
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.tada {
    animation-name: tada;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.float-icon-hotline ul li span {
    display: inline-block;
    padding: 0;
    background-color: #ff6a00;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    height: 40px;
    line-height: 36px;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 0;
    width: 0;
    overflow: hidden;
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color: #ff6a00;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
}

ul.left-icon.hotline {
    margin-left: 0px !important;
}


.float-icon-hotline ul li .fa-zalo {
    background: url(https://netweb.vn/img/hotline/zalo.png) center center no-repeat;
}
.float-icon-hotline ul li .fa-zalo:hover {
    background: #ef0303 url(https://netweb.vn/img/hotline/zalo.png) center center no-repeat;opacity:.5;
}
.float-icon-hotline ul li .fa-messenger {
    background:  url(https://netweb.vn/img/hotline/fb.png) center center no-repeat;
}
.float-icon-hotline ul li .fa-messenger:hover {
    background: #168efb url(https://netweb.vn/img/hotline/fb.png) center center no-repeat;opacity:.5;
}

Nội dung

Nút call action cực đẹp mới có báo giá

hình demo

<link rel="stylesheet" id="fontawesome-css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
<div class="call-actionok">
    <div class="call-leftok">
        <i class="fa fa-gift" aria-hidden="true"></i>
        <a href="<?php echo get_home_url(); ?>//lien-he/">Yêu Cầu Báo Giá Tốt</a>
    </div>
    <div class="call-rightok">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <a href="tel:0898982526">Hotline: 08.9898.2526</a>
    </div>

</div>


<style>
    .call-actionok {
        width: 100%;
        position: fixed;
        bottom: 0;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
    }

    .call-leftok {
        width: 50%;
        float: left;
        background: #54595f;
        border: 2px solid #fff;
        color: #fff;
        padding: 5px 3px;
    }

    .call-rightok {
        width: 50%;
        float: right;
        background: #23a455;
        border: 2px solid #fff;
        color: #fff;
        padding: 5px 3px;
    }

    .call-actionok i {
        margin-top: 5px;
    }

    .call-actionok a {
        color: #fff;
    }

    @media only screen and (max-width: 600px) {
        .call-actionok {
            font-size: 13px;
            line-height: 28px;
        }

        .call-actionok i {
            padding-top: 3px;
            padding-right: 3px;
        }

    }
</style>

Nút call có zalo bản đồ map

<style>
@media (min-width: 767px)
{
.bottom-bar.visible-phone.footer-toolbar-sp {
    display: none;
}	
}
	
	
@media (max-width: 767px)
{
	
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    padding: 7px 0 4px;
    z-index: 999;
    box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.2);
}
.bottom-bar-ul {
	margin-bottom: 0px;
    padding: 0;
    display: -moz-flex;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}
	
.bottom-bar-ul li {
    width: 20vw;
}
.bottom-bar-ul li a {
    display: block;
    color: #696969;
    font-size: 12px;
    text-align: center;
    position: relative;
    font-weight: 100;
}
	
.bottom-bar-ul li a i {
    font-size: 25px;
    font-weight: 500;
    color: #696969;
    width: 25px;
    height: 25px;
}
li {
    margin: 0;
    padding: 2px 0;
    text-indent: 0;
    list-style: none;
}	
	
}

	
</style>



<div class="bottom-bar visible-phone footer-toolbar-sp">
    <ul class="bottom-bar-ul">
        <li class="bottom_fixed_item"><a href="#" title=""><i class="fa fa-home" aria-hidden="true"></i><div class="title">Trang chủ</div></a></li>
        <li class="bottom_fixed_item"><a href="https://zalo.me/0903669091" target="_blank"><i class="fa fa-commenting" aria-hidden="true"></i><div class="title">Zalo</div></a></li>
        <li class="bottom_fixed_item"><a href="tel:0903669091"><i class="fa fa-phone" aria-hidden="true"></i><div class="title">Gọi điện</div></a></li>
        
        
        <li class="bottom_fixed_item"><a href="#"><i class="fa fa-map-marker" aria-hidden="true"></i><div class="title">Bản đồ</div></a></li>
        
        <li class="bottom_fixed_item" data-scroll-top=""><a href="#" ><i class="fa fa-arrow-up"></i><div class="title">Lên trên</div></a></li>
    </ul>
</div>

Hình hoàn thành trên mobile

code hotline zalo phiên bản 2020

<a id="0911 00 6979" href="tel:0911006979"><div class="call-btn"><noscript><img src="https://netweb.vn/icon/phone.svg"/></noscript><img class=" lazyloaded" src="https://netweb.vn/icon/phone.svg" data-src="https://netweb.vn/icon/phone.svg"> 0911 00 6979</div></a>

<a href="https://m.me/Vnnreal.vn" target="_blank"><div style="position:fixed;bottom:7px;right:12px;z-index:9999;" class="messenger"><noscript><img style="height:58px;" src="https://netweb.vn/icon/messenger_icon.png"/></noscript><img class=" lazyloaded" style="height:58px;" src="https://netweb.vn/icon/messenger_icon.png" data-src="https://netweb.vn/icon/messenger_icon.png"></div></a>

<style>
.call-btn {
    position: fixed;
    bottom: 24px;
    right: 165px;
    background: #37c837;
    text-align: center;
    color: #fff;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    z-index: 99;
    transition: all .3s;
    font-weight: 700;
    border-radius: 5px;
    padding: 3px 10px 0px 38px;
    font-size: 18px;
    line-height: 25px;
}
.call-btn img {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px 7px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px 0 0 5px;
    animation: blinking 1s ease-in-out infinite;
}	
	
</style>

2 Nút gọi

Html


<div id="floatdiv_30037" class="exp_floatdiv_content_pro     psfd_width_360px" style="left: 1px; bottom: -29px; border-radius: 2px; background: transparent; height: 87px;">
    <div class="exp_floatdiv_content_padding_pro" style="border-style:none;border-radius:2px;">
        <p><span style="font-size: 85%;"><a class="button alert" href="tel:0908512116"><i class="icon-phone"></i>090 851 21 16</a><a class="button success" href="tel:0908512116"><i class="icon-phone"></i>090 851 21 16</a></span></p>
    </div>
</div>

css

.exp_floatdiv_content_pro {
    position: fixed;
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.exp_floatdiv_content_padding_pro {
    padding: 10px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    box-shadow: 0 5px 9px rgba(0,0,0,0.2);
}

Icon zalo mới

<a href="https://zalo.me/0878136222" class="numberzalo all" rel="nofollow" style="left: 220px">
	<img src="https://lh3.googleusercontent.com/X7JUHmDCeT845_MgAttYi_F8RsiHQr9ufnRqk2SiyiJZ1KBZgZek9wFOMuOwDuy4leA=w300" alt="0878136222">
	</a>
<style>
	a.numberzalo {
    position: fixed;
    bottom: 15px;
    left: 110px;
    cursor: pointer;
    z-index: 9999;
}
a.numberzalo img {
    width: 50px;
    border-radius: 50%;
}	
</style>

Hình demo dưới

Plugin contact liên hệ Phone, zalo, facebook, telegram, skype cực đẹp cho website wordpress

Plugin này mình viết dành cho những ai dùng website wordpess netweb cũng đang dùng plugin này, tính năng liên hệ Phone, zalo, facebook, telegram, skype cực đẹp cho website wordpress và có thể ẩn những chức năng không dùng, đổi màu button thoải mái

Mua plugin với giá 199k click xem chức năng plugin

Bài viết mới cập nhập

Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

1 năm trước, 341 Lượt xem

Xin chào các bạn! hôm nay netweb sẽ hướng dẫn các bạn quản lý web bán hàng 2 ngôn ngữ! Hướng dẫn tạo user thành…

Hướng dẫn tạo user thành viên và quản lý đơn hàng

1 năm trước, 334 Lượt xem

Trong bài viết này, netweb sẽ hướng dẫn các bạn tạo user thành viên và đặt hàng quản lý đơn hàng trong WooCommerce Thêm mới…

Hướng dẫn Plugin floating contact

1 năm trước, 440 Lượt xem

Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

1 năm trước, 448 Lượt xem

Hôm nay netweb sẽ hướng dẫn các bạn ánh xạ ổ đĩa mạng để làm việc online dùng như ổ cứng bình thường qua OneDrive…

Backup Yandex Mail

2 năm trước, 286 Lượt xem

Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo

Chủ đề liên quan theo Tag

Văn Hải

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)

NETWEB.VN

Nội dung

Code chèn hotline, zalo, facebook cực đẹp

Đăng ký cập nhập video từ netweb.vn

Nút call action cực đẹp mới có báo giá

Nút call có zalo bản đồ map

code hotline zalo phiên bản 2020

2 Nút gọi

Icon zalo mới

Plugin contact liên hệ Phone, zalo, facebook, telegram, skype cực đẹp cho website wordpress

Bài viết mới cập nhập

Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

Hướng dẫn tạo user thành viên và quản lý đơn hàng

Hướng dẫn Plugin floating contact

ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

Backup Yandex Mail

Bình luận trên facebook netweb.vn

DỊCH VỤ

CHUYÊN MỤC HAY

HỖ TRỢ

THIẾT KẾ WEBSITE

NETWEB.VN

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } Nội dung

Code chèn hotline, zalo, facebook cực đẹp

Đăng ký cập nhập video từ netweb.vn

Nút call action cực đẹp mới có báo giá

Nút call có zalo bản đồ map

code hotline zalo phiên bản 2020

2 Nút gọi

Icon zalo mới

Plugin contact liên hệ Phone, zalo, facebook, telegram, skype cực đẹp cho website wordpress

Bài viết mới cập nhập

Hướng dẫn quản lý web bán hàng 2 ngôn ngữ

Hướng dẫn tạo user thành viên và quản lý đơn hàng

Hướng dẫn Plugin floating contact

ánh xạ OneDrive for Business dưới dạng Ổ đĩa mạng

Backup Yandex Mail

Bình luận trên facebook netweb.vn

DỊCH VỤ

CHUYÊN MỤC HAY

HỖ TRỢ

THIẾT KẾ WEBSITE

Nội dung