Tiên ích liên hệ tích hợp zalo - facebook - Mail - SMS đẹp cho blogpsot 2020
Chào các bạn, hôm nay mình xin chia sẻ code tiện ích liên hệ đẹp cho template blogspot tích hợp zalo, facebook, mail và sms. Bạn có thể tích hợp vào mẫu theme blog bán hàng, mẫu blogspot dịch vụ....
Tích hợp tiện ích liên hệ vào template blogspot tại congnghewebblog.com và mẫu blogger khác
Bước 1: Vào Blogger.com tới trang website bạn muốn tích hợp tiện ích liên hệ vào --> chủ đề --> chỉnh sửa HTML --> Ctrl+ F để bật khung tìm kiếm lên.
- Nếu template blogspot mua tại congnghewebblog.com tìm key <!--<head>-->
- Các mẫu blogger nguồn khác khác tìm key </body>
Bước 2: Thêm code bên dưới ngày trên thẻ vừa tìm được trong template blogspot
<style>
.fone{font-size:22px;color:#f00;line-height:40px;font-weight:bold;padding-left:45px;margin:0 0}
.fix_tel{position:fixed;bottom:15px;left:20px;z-index:999}
.fix_tel img{max-width:100%;height:auto}
.fix_tel a{text-decoration:none;display:block}
.tel{background:#eee;width:205px;height:40px;position:relative;overflow:hidden;background-size:40px;border-radius:28px;border:solid 1px #ccc}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone{background-color:transparent;cursor:pointer;height:80px;position:absolute;transition:visibility 0.5s ease 0s;visibility:hidden;width:80px;z-index:200000!important}
.ring-alo-phone.ring-alo-show{visibility:visible}
.ring-alo-phone.ring-alo-hover,.ring-alo-phone:hover{opacity:1}
.ring-alo-ph-circle{animation:1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;background-color:transparent;border:2px solid rgba(30,30,30,0.4);border-radius:100%;height:70px;left:10px;opacity:0.1;position:absolute;top:12px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:70px}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle{animation:1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle{animation:2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim!important}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone:hover .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle{border-color:#baf5a7;opacity:0.5}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle{border-color:#f00;opacity:0.5}
.ring-alo-ph-circle-fill{animation:2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;background-color:#000;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:0.1;position:absolute;top:33px;transform-origin:50% 50% 0;transition:all 0.5s ease 0s;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone:hover .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:0.75!important}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);opacity:0.75!important}
.ring-alo-ph-img-circle{animation:1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;border:2px solid transparent;border-radius:100%;height:30px;left:30px;opacity:1;position:absolute;top:33px;transform-origin:50% 50% 0;width:30px}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone:hover .ring-alo-ph-img-circle{background-color:#f00}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle{background-color:#75eb50}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle{background-color:#f00}
@keyframes ring-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 ring-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 ring-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)}}
.ring-alo-ph-img-circle a img{padding:1px 0 0 1px;width:30px;position:relative;top:-1px}}
/* End Hotline Fixed */
</style>
<div class='fix_tel'>
<div class='ring-alo-phone ring-alo-green ring-alo-show' id='ring-alo-phoneIcon' style='right: 150px; bottom: -12px;'>
<div class='ring-alo-ph-circle'></div>
<div class='ring-alo-ph-circle-fill'></div>
<div class='ring-alo-ph-img-circle'>
<a href='tel:09662288xx'>
<img class='lazy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmQiFBdNXMRExOlVtoR4NA50JvvkhsJpWxeiB39wnPQ-pGEqi3-q5NZNGBZBjSnW8XgKOGibcnb8ZL9lFF_QLQL9rVlHcQKHmMp3-EljS_v3TtQozYlIiiDom8nL3Cgp66bRy_14WtqE/s1600/phone-ring.png'/>
</a>
</div>
</div>
<div class='tel'>
<p class='fone'>09662288xx</p>
</div>
</div>
<style>
.add-widget{position:fixed;z-index:999999}
.add-widget.widget-facebook{left:160px;bottom:50px}
.add-widget.widget-zalo{left:110px;bottom:50px}
.add-widget.widget-contact{left:60px;bottom:50px}
.add-widget.widget-driver{left:10px;bottom:50px}
.add-widget .widget-circle{position:relative;display:inline-block;width:44px;height:44px;background-color:#c4172c;-webkit-border-radius:50%;border-radius:50%}
.add-widget .widget-circle .fa-icon{position:absolute;left:7px;top:7px;width:30px;height:30px;background-size:30px;background-repeat:no-repeat}
.add-widget.widget-facebook .widget-circle{background:rgba(0,197,255,1);background:-moz-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(0,197,255,1)),color-stop(100%,rgba(0,112,255,1)));background:-webkit-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:-o-linear-gradient(top,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%);background:linear-gradient(to bottom,rgba(0,197,255,1) 0,rgba(0,112,255,1) 100%)}
.add-widget.widget-facebook .widget-circle .fa-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUq8m2aKxg8wefPBGzi1hl1SFzRSckTBDJPdKa4Zbl3A8MiJWB8W8NvaER388DxuZK1k1k70lGSMEs0tmT4ge56ebWbh3T4KMb0dABxrzQRg_fMS8ZYC11F7tXrfAXNHy72IN_uogerRo/s1600/icon-messenger-1289632j1.jpg)}
.add-widget.widget-zalo .widget-circle{background:rgba(61,157,215,1);background:-moz-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(61,157,215,1)),color-stop(100%,rgba(32,124,229,1)));background:-webkit-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:-o-linear-gradient(top,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%);background:linear-gradient(to bottom,rgba(61,157,215,1) 0,rgba(32,124,229,1) 100%)}
.add-widget.widget-zalo .widget-circle .fa-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAT9lN5P1aSn0F8XehcGeKf_GYvP-8Ou9v3pzGBaayD0MBQMM9aTQbSuC5MyRAPHhN8Xr06qKmwyj6z7wgfoTz1PFtj7l0Zud_5UAY0nLfDqYluGTsPJHPACr_b9XMGgd7jVy8eESN-BU/s1600/icon-zalo-1289633j1.jpg)}
.add-widget.widget-contact .widget-circle{background:rgba(244,147,147,1);background:-moz-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(244,147,147,1)),color-stop(100%,rgba(234,39,39,1)));background:-webkit-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:-o-linear-gradient(top,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%);background:linear-gradient(to bottom,rgba(244,147,147,1) 0,rgba(234,39,39,1) 100%)}
.add-widget.widget-contact .widget-circle .fa-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_NC3GwCKdIVwTtf6TeS7ECivPh5-_FN9l2xwk1JtAJ3dmNax4xJEVgVOm-qnMKjitvYVtVS9e0cefMdRDpntIirdNw6ZDzYjQ05yHQlDkJKTSb-XBYo7FYfNIXfNm9Iacu1GfDasZ58/s1600/sms.png)}
.add-widget.widget-driver .widget-circle{background:rgba(245,183,74,1);background:-moz-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0,rgba(245,183,74,1)),color-stop(100%,rgba(193,32,50,1)));background:-webkit-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:-o-linear-gradient(top,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%);background:linear-gradient(to bottom,rgba(245,183,74,1) 0,rgba(193,32,50,1) 100%)}
.add-widget.widget-driver .widget-circle .fa-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7PJoUSt5n236iZl6drKlexnK3MWguH9SfVHfufaBP27p9XPeceH5lFyq_8KVJUApRXYPWLiot7BkAg0gjnZgRfGUocAxOH6ce2mYSLcKdROR3Nm-y6ReQWX7snRCz00SDXIM-UCa50To/s1600/email.png)}
@media (min-width:768px){.add-widget.widget-facebook{left:20px;bottom:230px}.add-widget.widget-zalo{left:20px;bottom:180px}.add-widget.widget-contact{left:20px;bottom:130px}.add-widget.widget-driver{left:20px;bottom:80px}}
#popupBaoGiaLink{display:none}
.box-car .form-group:nth-child(5),.box-car .form-group:nth-child(6),.box-car .form-group:nth-child(7),.box-car .form-group:nth-child(8){width:50%;float:left;padding:10px}
</style>
<a class='add-widget widget-facebook' href=' https://m.me/IDFACEBOOK/' target='_blank' title='Chát trên Facebook'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-zalo' href='https://zalo.me/09662288xx' target='_blank' title='Chát trên Zalo'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-contact' href='sms:09662288xx' title='sms'><span class='widget-circle'><i class='fa-icon'></i></span></a>
<a class='add-widget widget-driver' href='mailto:abc@gmail.com' title='email'><span class='widget-circle'><i class='fa-icon'></i></span></a>
Bước 3: Thay các thông tin mình bôi đỏ thành thông tin của bạn.
- Thay số điện thoại 09662288xx thành số điện thoại của cậu. Riêng ở vị trí thứ 3 là số điện thoại bạn sử dụng zalo
- Thay IDFACEBOOK thành ID Facebook hoặc fanpage của bạn ( có thể là dãy chữ số hoặc tên miền riêng như /facebook/congnghewebblog )
- Thay abc@gmail.com thành địa chỉ mail của bạn.
Trên đây là hướng dẫn tích hợp tiện ích liên hệ có facebook, zalo, sms, mail đẹp và đơn giản nhất. Rất mong các thủ thuật blogger này sẽ hữu ích với các bạn. Cảm ơn các bạn luôn đồng hành và ủng hộ congnghewebblog.com, chúng tôi luôn cố gắng để đưa ra các sản phẩm template blogspot tốt nhất.
Mọi thắc mắc cần hỗ trợ các bạn hãy để lại comment hoặc gửi thư về địa chỉ mail congnghewebblog@gmail.com để được giải đáp.
Thân!
CÔNG NGHỆ WEBBLOG - CUNG CẤP DỊCH VỤ TEMPLATE BLOGSPOT
Địa chỉ: Đường Lê Trọng Tấn – Dương Nội – Hà Đông – Hà Nội (Đối diện công ty sym Hà Đông)
Hotline: 09.66.22.0806 – 0916.72.69.59
Mail: congnghewebblog@gmail.com – FB: https://www.facebook.com/dechexanh
CÓ THỂ BẠN QUAN TÂM
No comments: