Hướng dẫn chèn thanh liên hệ tự co giãn cho Website tuyệt đẹp

Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on tumblr
Tumblr

Chào bạn, nếu bạn đang tìm một mẫu liên hệ nhanh để chèn cho Website thì trong bài này, Dipigo xin gửi đến các bạn hướng dẫn cách thêm thanh có nút liên hệ nhanh cho Website WordPress để các bạn làm đẹp Website hơn.

Hướng dẫn tạo nút liên hệ nhanh cho Website WordPress

Copy đoạn code dưới đây và dán vào giữa 2 thẻ đóng và của file Footer.php là được.
				
					<div class="contact-nav">
        <ul>
    <li><a rel="nofollow"  href="https://dipigo.com/" class="chat_animation">
            <i class="ticon-chat-sms" aria-hidden="true" title="cart"></i>
                Mua Hàng</a>
            </li>
            <li><a href="http://zalo.me/0334162788" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0343758125" rel="nofollow" class="button">
                                <span class="phone_animation animation-shadow">
                                    <i class="icon-phone-w" aria-hidden="true"></i>
                                </span>
                                <span class="btn_phone_txt">Gọi điện</span>
                            </a>
                        </li>
            <li><a href="https://www.youtube.com/channel/UCd5MLY1zDMa0bko_gXUNW0g?sub_confirmation=1" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Youtube</a></li>
            <li><a href="https://www.facebook.com/messages/t/dipigo/" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li class="to-top-pc">
                <a href="tel:0343758125" rel="nofollow">
                    <i class="ticon-angle-up" aria-hidden="true" title="Gọi ngay"></i>Gọi ngay
                </a>
            </li>
        </ul>
    </div>

<style>
.phone-mobile {display: none;}
.contact-nav {
    position: fixed;
    right: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 80px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
    box-shadow: 2px 2px 0.2em;
}
.contact-nav ul {list-style: none;padding: 0;margin: 0;}
.contact-nav ul li {list-style: none!important;}
.contact-nav ul>li a {
    border:none;
    padding: 3px;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    color: #515151;
    font-weight: 700;
    max-width: 72.19px;
    max-height: 54px;
    text-decoration: none;
}
.contact-nav ul>li .chat_animation{display:none}
.contact-nav ul>li a i.ticon-heart {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/youtube-200.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.contact-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/zalo.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav li .button {
    background: transparent;
}.contact-nav ul>li a i.ticon-angle-up {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Call.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.contact-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.contact-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.contact-nav ul>li a i.ticon-messenger {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Message.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.contact-nav ul>li a i.ticon-chat-sms {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/cart-200.png) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
 border: 1px solid;
border-radius: 50%;

}
.contact-nav ul>li a i.icon-phone-w {
    background: url(https://dipigo.com/wp-content/uploads/2021/05/Call.png) no-repeat;
       background-size: contain;
    width: 38px;
    height: 38px;
    display: block;
}
.contact-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.contact-nav li .chat_animation{display:block !Important}
 
.contact-nav li .button .phone_animation {box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%,0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
}
.contact-nav ul>li a{padding:0; margin:0 auto}
.contact-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.contact-nav li {
    float: right;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
				
			
Chúc bạn thành công!

Bình luận

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 *