Chuyển tới nội dung

Cách tạo nút liên hệ đẹp trên website wordpess

Nút Liên Hệ đẹp

mình sưu tầm được một đoạn code thêm nút liên hệ khá là đẹp mắt nến chia sẻ lại cho mọi người dùng chung chức năng gồm có : Tìm đường, zalo,điện thoại,nhắn tin và Messenger, với các cài đặt đơn giản chỉ với vài thao tác, nút bấm này giúp người dùng có thể thao tác liên hệ với bạn nhanh hơn.

CÁCH THÊM NÚT LIÊN HỆ ĐẸP

các bạn chỉ cần thêm cho mình đoạn code sau vào vị trí Footer của website là được và thay đổi một số thông tin trong code để phù hợp với website của bạn

<style>
.phone-mobile {display: none;}
.giuseart-nav {
position: fixed;
right: 13px;
background: linear-gradient(rgb(235, 123, 12), rgb(214, 155, 96));
border-radius: 10px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 2px solid #f2f2f2;
box-shadow: -5px 10px 8px #888888;
}
.giuseart-nav ul {list-style: none;padding: 0;margin: 0;}
.giuseart-nav ul li {list-style: none!important;}
.giuseart-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;
}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-heart {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/widget_icon_map.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_zalo.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav li .button {
background: transparent;
}.giuseart-nav ul>li a i.ticon-angle-up {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon-top-moi.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}.giuseart-nav ul li .button .btn_phone_txt {
position: relative; top:35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.giuseart-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.giuseart-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.giuseart-nav ul>li a i.ticon-messenger {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_messenger.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.giuseart-nav ul>li a i.ticon-chat-sms {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_form.png) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_phone.png) no-repeat;
background-size: contain;}
.giuseart-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.giuseart-nav li .chat_animation{display:block !Important}

.giuseart-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;
}
.giuseart-nav ul>li a{padding:0; margin:0 auto}
.giuseart-nav {
background: linear-gradient(rgb(235, 123, 12), rgb(214, 155, 96));
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.giuseart-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="giuseart-nav">
<ul>
<li><a href="https://www.google.com/maps/place/Thi%E1%BA%BFt+k%E1%BA%BF+Website+uy+t%C3%ADn+Alowebtot/@20.4367399,106.3320136,15z/data=!4m5!3m4!1s0x0:0x7c7fac76431a4fe2!8m2!3d20.4367399!4d106.3320136" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
<li><a href="https://zalo.me/0365995626" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Zalo</a></li>
<li class="phone-mobile">
<a href="tel:0378180567" 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.facebook.com/giangphotoprinting/" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
<li><a href="sms:0378180567" class="chat_animation">
<i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
Nhắn tin SMS</a>
</li>
<li class="to-top-pc">
<a href="#top" rel="nofollow">
<i class="ticon-angle-up" aria-hidden="true" title="Lên trên"></i>
Quay lên đầu </a>
</li>
</ul>
</div>

thay các thông tin trong code thành thông tin của bạn nhé. để ẩn trên máy tính mà chỉ muốn hiển thị trên điện thoại bạn thêm đoạn css sau:

 

3.7/5 - (3 bình chọ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 *