Cách chèn icon, Số điện thoại, Facebook, Zalo vào website wordpress.
Hôm nay mình xin gửi đến các bạn bộ sưu tập các nút Facebook,Zalo, Số điện thoại để chèn vào website, với nhiều style, các bạn có thể lựa chọn style phù hợp với mình nhé ! Các bạn chỉ cần copy đoạn code và bỏ vào footer.php , và thay đổi lại số điện thoại, zalo,facebook trong thẻ a lại là được. Đối với theme Flatsome (Là các theme mua tại Web Elamweb), các bạn chèn vào phần flatsome – Advanced- Global setting – Footer Script nhé . Sau khi chèn xong, các bạn ra trang chủ và nhấn Ctr F5 để load cache lại và trải nghiệm thành quả ! Style 1:
<style>
.div-nut {
display: flex;
flex-direction: column;
font-size: 14px !important;
position: fixed;
z-index: 2147483647;
bottom: 24px;
left: 0;
padding-left: 5px;
}
.div-nut > a {
display: inline-block;
overflow: visible !important;
width: 54px !important;
height: 54px !important;
margin: 6px !important;
background-size: 100% !important;
border: 2px solid #fff !important;
border-radius: 50% !important;
margin: 8px;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
background-size: auto;
cursor: pointer;
position: relative;
}
.div-nut .nut-action:hover .tooltext {
visibility: visible;
opacity: 1;
}
.div-nut:hover .nut-action {
text-decoration: none !important;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13);
}
.div-nut .tooltext {
visibility: hidden;
font-size: 12px !important;
line-height: 16px !important;
text-align: center;
white-space: nowrap;
border-radius: 4px;
padding: 8px;
position: absolute;
top: calc(50% – 16px);
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
left: 120%;
background-image: linear-gradient(180deg, #e57373 0%, #c62828 100%);
color: #fff;
}
.div-nut .nut-goi {
background-image: url(“https://elamweb.net/wp-content/uploads/2020/10/call.svg”);
}
.div-nut .nut-zalo {
background-image: url(“https://elamweb.net/wp-content/uploads/2020/10/zalo.svg”);
}
.div-nut .nut-face {
background-image: url(“https://elamweb.net/wp-content/uploads/2020/10/messenger.svg”);
}
</style>
<div class=”div-nut”>
<a href=”tel:0935743575″ class=”nut-goi nut-action”>
<div><span class=”tooltext”>Gọi ngay</span></div>
</a>
<a href=”http://zalo.me/0935743575″ target=”_blank” class=”nut-zalo nut-action”>
<div><span class=”tooltext”>Chat với chúng tôi qua Zalo</span></div>
</a>
<a href=”https://m.me/elamwebnhatrang/” target=”_blank” class=”nut-face nut-action”>
<div><span class=”tooltext”>Facebook Messenger</span></div>
</a>
</div>
Style 2: Style đơn giản:
<style>
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59 !important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a,
.chat-face a,
.hotline a {
font-size: 13px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
@media (max-width: 549px) {
.float-contact {
display: none;
}
}
</style>
<div class=”float-contact”>
<button class=”chat-zalo”><a href=”http://zalo.me/0867592210″>Chat Zalo</a></button> <button class=”chat-face”><a href=”http://m.me/moosun.vn”>Chat Facebook</a></button>
<button class=”hotline”><a href=”tel:0867592210″>Hotline: 0867592210</a></button>
</div>
Style 3: Email, nút gọi động và Zalo
<style>
@keyframes pulse {
from,
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.cta-lptech {
list-style: none;
padding: 0;
margin: 0;
z-index: 999;
position: fixed;
bottom: 36px;
left: 15px;
width: 50px;
}
.cta-lptech li {
width: 50px;
float: left;
margin-bottom: 10px;
}
.cta-lptech li a {
height: 50px;
line-height: 50px;
background-color: #ff2a28;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.cta-lptech li a i {
font-size: 27px;
color: #fff;
padding: 12px;
}
.cta-lptech li a,
.cta-lptech li a img {
width: 50px;
border-radius: 100%;
}
.cta-lptech li,
.cta-lptech li a {
display: inline-block;
}
.cta-lptech li a.zalo {
background-color: #0180c7;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.mypage-alo-ph-circle,
.mypage-alo-phone:hover .mypage-alo-ph-circle {
border-color: #ffd53b !important;
}
.mypage-alo-ph-circle-fill,
.mypage-alo-ph-img-circle,
.mypage-alo-phone:hover .mypage-alo-ph-circle-fill,
.mypage-alo-phone:hover .mypage-alo-ph-img-circle {
background-color: rgba(244, 68, 56, 0.5);
}
.mypage-alo-ph-circle-fill {
width: 60px;
height: 60px;
top: 56px;
left: -5px;
position: absolute;
-ms-transition: all 0.2s ease-in-out;
border-radius: 100%;
border: 2px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
opacity: 0.4 !important;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.mypage-alo-ph-circle {
width: 80px;
height: 80px;
top: 45px;
left: -16px;
position: absolute;
background-color: #774d4d00;
border-radius: 100%;
border: 2px solid rgba(30, 30, 30, 0.4);
opacity: 0.1;
opacity: 0.5;
}
</style>
<ul class=”cta-lptech”>
<li>
<a aria-label=”gửi mail cho chúng tôi” href=”mailto:demo@web.com” title=”Đăng ký tư vấn”><i class=”fa fa-envelope”></i></a>
</li>
<li>
<a aria-label=”gọi điện thoại cho LPTech” href=”tel:0963 400 234″ title=”gọi điện thoại ” rel=”noopener”>
<img src=”https://elamweb.net/wp-content/uploads/2020/12/call.png” alt=”gọi điện thoại cho chúng tôi” />
<div class=”animated infinite zoomIn mypage-alo-ph-circle”></div>
<div class=”animated infinite pulse mypage-alo-ph-circle-fill”></div>
</a>
</li>
<li>
<a href=”https://zalo.me/0913245865″ title=”Chat zalo” rel=”noopener” class=”zalo” aria-label=”gọi zalo cho LPTech”><img src=”https://elamweb.net/wp-content/uploads/2020/12/zalo.png” alt=”zalo” /></a>
</li>
</ul>
Style 4:
<style>
.phone-mobile {display: none;}
.giuseart-nav {
position: fixed;
left: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.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://elamweb.net/wp-content/uploads/2021/10/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://elamweb.net/wp-content/uploads/2021/10/icon-zalo-circle2.png.pagespeed.ce_.iUc59tfITH.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://elamweb.net/wp-content/uploads/2021/10/icon-angle-up.png.pagespeed.ce_.NGU5VowWiC.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://elamweb.net/wp-content/uploads/2021/10/icon-messenger.png.pagespeed.ce_.sSebhnGGgP.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://elamweb.net/wp-content/uploads/2021/10/icon-sms-1.jpg) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
background: url(https://elamweb.net/wp-content/uploads/2021/10/icon-phone-w.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: white;
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/GiuseArt+-+Thi%E1%BA%BFt+k%E1%BA%BF+%C4%91%E1%BB%93+h%E1%BB%8Da+v%C3%A0+website+chuy%C3%AAn+nghi%E1%BB%87p/@20.3534004,105.894187,17z/data=!3m1!4b1!4m5!3m4!1s0x3135acc6066cb537:0x4fc1c256d7cdb4d!8m2!3d20.3533954!4d105.8963757″ rel=”nofollow” target=”_blank”><i class=”ticon-heart”></i>Tìm đường</a></li>
<li><a href=”https://zalo.me/0972939830″ rel=”nofollow” target=”_blank”><i class=”ticon-zalo-circle2″></i>Chat Zalo</a></li>
<li class=”phone-mobile”>
<a href=”tel:0972939830″ 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.messenger.com/t/joseph.thien.75″ rel=”nofollow” target=”_blank”><i class=”ticon-messenger”></i>Messenger</a></li>
<li><a href=”sms:0972939830″ 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=”#” rel=”nofollow”>
<i class=”ticon-angle-up” aria-hidden=”true” title=”Quay lên trên”></i>
</a>
</li>
</ul>
</div>
Style 5
<div id=”toc” class=”ppocta-ft-fix”>
<div id=”zaloButton” class=”toc_button”>
<div class=”toc_description”>Chat với Thanh Tính qua Zalo</div>
<a href=”http://zalo.me/0909146772 ” target=”_blank” onclick=”_gaq.push([‘_trackEvent’, ‘Call To Action’, ‘Zalo Button’, ‘Mobile’]);”><i class=””></i></a>
</div>
<div id=”messengerButton” class=”toc_button”>
<div class=”toc_description”>Chat ngay để nhận tư vấn</div>
<a href=”https://www.facebook.com/cameralaptopthanhtin/” target=”_blank” ><i class=””></i></a>
</div>
<div id=”callNowButton” class=”toc_button”>
<div class=”toc_description”>Gọi ngay Thanh Tính Camera</div>
<a href=”tel:0909146772″><i class=”icon-phone”></i></a>
</div>
<div id=”callNowButtonClick” class=”toc_button”>
<div class=”toc_description”>Để lại lời nhắn cho Thanh Tính</div>
<a href=”https://thanhtincamera.com/lien-he/”><i class=”fa fa-envelope”></i></a>
</div>
</div>
<style>
.ppocta-ft-fix {
position: fixed;
bottom: 5px;
right: 10px;
text-align: center;
z-index: 999;
width: 60px;
}
#zaloButton {
display: inline-block;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 100%;
margin-bottom: 10px;
}
.toc_button {
position: relative;
box-shadow: 0 5px 10px rgb(0 0 0 / 15%), 0 4px 15px rgb(0 0 0 / 13%);
border: 2px solid #fff!important;
}
#toc .toc_description {
position: absolute;
top: 5px;
right: -300px;
width: 200px;
padding: 10px;
font-size: 13px;
line-height: 18px;
z-index: 1;
background-color: #ffd145;
color: #111;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-radius: 3px 0 0 3px;
}
#toc .toc_description:after {
left: 100%;
top: 50%;
border: solid transparent;
content: ” “;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: #ffd145;
border-width: 8px;
margin-top: -8px;
}
#zaloButton>a>i {
background: url(https://elamweb.net/wp-content/uploads/2022/06/widget_icon_zalo.svg) no-repeat scroll 0 0 transparent;
width: 50px;
height: 50px;
display: inline-block;
background-size: 100%!important;
}
#messengerButton {
display: inline-block;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 100%;
margin-bottom: 10px;
}
#messengerButton>a>i {
background: url(https://elamweb.net/wp-content/uploads/2022/06/widget_icon_messenger.svg) no-repeat scroll 0 0 transparent;
width: 50px;
height: 50px;
display: inline-block;
background-size: 100%!important;
}
#callNowButton {
display: inline-block;
position: relative;
border-radius: 50%;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
#callNowButton i {
color: white;
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
background: #ed1c24;
line-height: 50px;
font-size: 24px;
}
#callNowButtonClick i{
color:white !important
}
#toc .toc_button:hover .toc_description {
right: 68px;
opacity: 1;
filter: alpha(opacity=100);
}
#callNowButtonClick {
display: inline-block;
position: relative;
border-radius: 50%;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
#callNowButtonClick i {
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
background: #76b51b;
line-height: 44px;
font-size: 24px;
}
</style>
LINK TRỌN BỘ VIDEO HƯỚNG DẪN SỬ DỤNG WEB TỪ A-Z CỦA ELAMWEB
00 – Những điều cần làm sau khi thiết kế website của elamweb ?
01 – Cách để thay đổi danh mục trên trang chủ ?
03 – Cách để thay đổi banner và hình ảnh,text trên trang chủ ?
04 – Cách để thay đổi tiêu đề trang ?
05 – Cách để thay đổi logo trang web ?
06 – Cách để thêm sản phẩm của danh mục lên trang chủ ?
07 – Cách xoá bỏ những slug không cần thiết trên URL trang web?
08 – Cách chèn google Analytics vào website ?
09 – Cách sủ dụng Duplicator để backup và chuyển host nhanh gọn ?
10 – Cách bật index goolge cho website ?
11 – Cách thay đổi độ dài đoạn mô tả trong trang danh mục bài viết ?
12 – Cách lấy thông tin SMTP của Gmail để thiết lập gửi mail ?
13 – Cách xác định chính xác kích thước của hình ảnh trên website ?
14 – Google pagespeed insight là gì? Cách tối ưu điểm Google pagespeed insight 2022
15 – Cách xoá cache hình ảnh và mô tả khi share link trên zalo ?
16 – Cách khôi phục lại các nội dung trên trang khi lỡ xoá nhầm ?
17 – Cách chèn icon, Số điện thoại, Facebook, Zalo vào website ?
18 – Cách thay đổi Email quản trị trong website ?
19 – Cách chèn Fanpage vào website ?
Thiết Kế Website ELAMWEB 🚀Cách chèn icon, Số điện thoại, Facebook, Zalo vào website wordpress 😊 Nơi thiết kế trang web trên điện thoại 🏆
💌 Giới Thiệu Dịch Vụ Tư Vấn Giao Diện Trang Website Elamweb.Com 😂 Cách chèn icon, Số điện thoại, Facebook, Zalo vào website wordpress😎
🎥 10 Tác Hại Nếu Bạn Không Có Thiết Kế Trang Web 🔥
🤩 20 Lợi Ích Nếu Bạn Có Một Lập Trình Website Chuyên Nghiệp 🔔
🌟 Những Ưu Điểm Đặc Biệt Của Dịch Vụ Làm Mẫu Website Elamweb So Với Các Công Ty Khác 🌹
📸 10 Lý Do Khách Hàng Nên Lựa Chọn Dịch Vụ Làm Trang Website Chúng Tôi 🎇
🔔 Chương Trình Khuyến Mại Để Khách Hàng Đăng Ký Sử Dụng Dịch Vụ Làm Trang Website Của Chúng Tôi 🎇
💬 Xem Demo Mẫu Web Trực Tiếp 🌟
⏰ Lập Trình Web Bất Động Sản
📸 Lập Trình Website Công Nghệ Máy Tính
💬 Lập Trình Web Du Lịch – Khách Sạn
⏲️ Thiết Kế Website Doanh Nghiệp
🎧 Mẫu Trang Web Site Kiến Trúc – Nội Thất
🤗 Mẫu Website Mỹ Phẩm – Làm Đẹp
⌛️ Làm Web Thời Trang
🏆 Lập Trình Website Thực Phẩm – Thuốc
💥 Trang Web Tin Tức
🔆 Thiêt Kế Trang Website Xe Hơi – Thể Thao
❤️ Mẫu Web Khuyến Mại
🎬 Giao Diện Trang Web Khác
