[Hướng dẫn] Tạo thanh liên hệ hotline rung lắc bên phải Flatsome

tao-thanh-bar-lien-he-rung-lac-flatsome

Lại quay trở lại chuyên mục chia sẻ code Flatsome cho các bác newbie mới làm web muốn “ăn ngay” để làm đẹp cho website của mình ^^

Hôm nay, Flatsomea-z sẽ chia sẻ cho các bạn đoạn code tạo thanh liên hệ hotline rung lắc siêu đẹp bên phải Flatsome. Let’s go

Demo: https://noithatxuong.vn/

Nếu các bạn đã đọc các bài trước của mình có nói về plugin Simple Custom CSS And JS rồi thì bắt đầu luôn nhé!

Bước 1: Tạo HTML cho thanh bar

Các bạn vào tìm mục có tên Custom CSS & JS -> Add Custom HTML. Xoá hết dữ liệu trong ô nhập nội dung đi, copy và paste đoạn code sau vào rồi lưu lại nha!

<div class="cta">
<div class="ctaitem">
<div class="ctabg" style="background: #dd3333">
</div>
<div class="ctacontent" style="background: #dd3333">Gọi điện
</div>
<div class="ctaimg" style="background: #dd3333">
<a href="tel:0394321444">
<img src="https://miootech.com/wp-content/uploads/2021/05/phone-miootech.png" alt="Gọi điện">
</a>
</div>
</div>
<div class="ctaitem">
<div class="ctabg" style="background: #2196F3">
</div>
<div class="ctacontent" style="background: #2196F3">Messenger
</div>
<div class="ctaimg" style="background: #2196F3">
<a href="https://m.me/miootech.tech">
<img src="https://miootech.com/wp-content/uploads/2021/05/mess-miootech.png" alt="Messenger">
</a>
</div>
</div>
<div class="ctaitem">
<div class="ctabg" style="background: #2196F3">
</div>
<div class="ctacontent" style="background: #2196F3">Chat Zalo
</div>
<div class="ctaimg" style="background: #2196F3">
<a href="https://zalo.me/0394321444">
<img src="https://miootech.com/wp-content/uploads/2021/05/zalo-miootech.png" alt="Chat Zalo">
</a>
</div>
</div>
<div class="ctaitem">
<div class="ctabg" style="background: #2196F3">
</div>
<div class="ctacontent" style="background: #2196F3">Liên hệ
</div>
<div class="ctaimg" style="background: #2196F3">
<a href="mail:flatsomeaz@gmail.com">
<img src="https://noithatxuong.vn/wp-content/uploads/2021/08/gmail.png" alt="Liên hệ">
</a>
</div>
</div>
</div>

Nhớ thay số điện thoại, link facebook, zalo và gmail của bạn vào nhé! Sau đó lưu lại và đăng.

Bước 2: Tạo CSS cho thanh bar

Các bạn vào tìm mục có tên Custom CSS & JS -> Add Custom CSS. Xoá hết dữ liệu trong ô nhập nội dung đi, copy và paste đoạn code sau vào rồi lưu lại nha!

.cta{
position:fixed;
right:0px;
bottom:30px;
width:90px;
z-index:9999;
}
.ctaitem {
position: relative;
visibility: visible;
background-color: transparent;
width: 90px;
height: 90px;
cursor: pointer;
z-index: 9999;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.ctabg {
width: 60px;
height: 60px;
top: 15px;
left: 15px;
position: absolute;
box-shadow: 0 0 0 0 #dd3333;
border-radius: 50%;
border: 2px solid transparent;
-webkit-animation: zigzag 2.3s infinite ease-in-out;
animation: zigzag 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animuiion: zoom 1.3s infinite;
animation: zoom 1.3s infinite;
}
.ctaimg {
width: 40px;
height: 40px;
line-height: 40px;
top: 25px;
left: 25px;
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
-webkit-animation: zigzag 2s infinite ease-in-out;
animation: zigzag 2s infinite ease-in-out;
}
.ctaimg a {
display:block;
}
.ctacontent {
color: #fff;
padding: 10px 15px;
border-radius:99px;
position:absolute;
z-index:0;
top:22px;
transition-duration:2s;
display:none;
margin-left:-120px;
font-size:100%;
width:180px;
transition-duration:2s;
}
.ctaitem:hover .ctacontent{
display:block;
}
.ctamobile {
position:fixed!important;
right:0px;
bottom:0px;
width:100%;
z-index:99999!important;
}
.mobileicon {
float:left;
text-align:center;
padding: 5px 0;
position:relative;
z-index:99999!important;
border-right:1px solid #fff;
}
.mobileicon img {
width: 30px;
}
.mobileicon p {
margin-bottom:0;
}
.mobileicon a {
color: #fff;
}
.mobileicon img {
justify-content: center;
-webkit-animation: zigzag 2s infinite ease-in-out;
animation: zigzag 2s infinite ease-in-out;
}
@-webkit-keyframes zigzag {
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);
}
}
@keyframes zigzag {
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);
}
}
@-webkit-keyframes zoom{
0%{
transform:scale(.9)}
70%{
transform:scale(1);
box-shadow:0 0 0 15px transparent}
100%{
transform:scale(.9);
box-shadow:0 0 0 0 transparent}
}
@keyframes zoom{
0%{
transform:scale(.9)}
70%{
transform:scale(1);
box-shadow:0 0 0 15px transparent}
100%{
transform:scale(.9);
box-shadow:0 0 0 0 transparent}
}

Lưu lại và đăng là xong. Xoá cache đi và xem thành quả nhé ^^

tao-thanh-bar-lien-he-rung-lac-flatsome
tao-thanh-bar-lien-he-rung-lac-flatsome

Ngoài ra, các bạn có thể tham khảo thêm mẫu thanh bar liên hệ này nhé. Các bước làm tương tự như ở trên nha!

Mã HTML thanh bar 02

<div class="widget-btn-list">
<a onclick="return gtag_report_conversion('https://m.me/miootech.tech');" href="https://m.me/miootech.tech" rel="nofollow" class="facebook" target="_blank">
</a>
<a onclick="return gtag_report_conversion('https://zalo.me/0394321444');" href="https://zalo.me/0394321444" class="zalo" rel="nofollow" target="_blank">
</a>
<a href="javascript:void(0);" onclick="$('#panel').fadeIn();" class="contact" rel="nofollow">
</a>
</div>
<div class="echbay-alo-phone phonering-alo-phone phonering-alo-green style-for-position-bl">
<a onclick="return gtag_report_conversion('tel:0394321444');" rel="nofollow" href="tel:0394321444" class="">
<label style=" width: max-content; left: 60px; padding: 0 10px 0 20px; ">039.4321.444
</label>
</a>
<div class="phonering-alo-ph-circle">
</div> 
<div class="phonering-alo-ph-circle-fill">
</div> 
<div class="phonering-alo-ph-img-circle" style=" height: 35px; width: 35px; top: 50px; ">
<a onclick="return gtag_report_conversion('tel:0394321444');" rel="nofollow" href="tel:0394321444" class="">.
</a>
</div>
</div>

Mã code CSS thanh bar 02

.widget-btn-list {
position: fixed;
right: 10px;
bottom: 10px;
width: 45px;
z-index: 99999;
}
.widget-btn-list.left{
right: auto;
left: 15px;
bottom: 60px;
}
.widget-btn-list a {
width: 44px;
height: 44px;
line-height: 44px;
display: inline-block!important;
border: none!important;
font-size: 18px!important;
color: #fff!important;
text-align: center!important;
position: relative;
border-radius: 50%!important;
cursor: pointer!important;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.11);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
}
.widget-btn-list .google {
background-image: url(https://legia.app/images/widget_icon_map.svg)!important;
background-color: #00b8d4!important;
}
.widget-btn-list .contact {
background-image: url(https://legia.app/images/widget_icon_contact_form.svg)!important;
background-color: #f7a400!important;
}
.widget-btn-list .call {
background-image: url(https://legia.app/images/widget_icon_click_to_call.svg)!important;
background-color: #7d51a0!important;
}
.widget-btn-list .facebook {
background-image: url(https://legia.app/images/widget_icon_messenger.svg)!important;
background-color: #0084ff!important;
}
.widget-btn-list .zalo {
background-image: url(https://legia.app/images/widget_icon_zalo.svg)!important;
background-color: #0068ff!important;
}
.echbay-alo-phone {
display: none;
position: fixed;
left: -30px;
bottom: -30px;
width: 145px;
height: 145px;
z-index: 999}
.phonering-alo-ph-circle,.phonering-alo-ph-circle-fill,.phonering-alo-ph-img-circle {
position: absolute;
border-radius: 50% !important;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%}
.phonering-alo-ph-circle {
width: 145px;
height: 145px;
background-color: transparent;
border: 2px solid rgba(30, 30, 30, 0.4);
top: -2px;
left: -2px;
-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}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
border-color: #bfebfc;
opacity: .5}
.phonering-alo-ph-circle-fill {
width: 85px;
height: 85px;
-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}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
background-color: rgba(0, 175, 242, 0.5)}
.phonering-alo-ph-img-circle {
width: 45px;
height: 45px;
background: rgba(30, 30, 30, 0.1) url(https://legia.app/images/call.png) no-repeat center center;
background-size: auto 80%;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
z-index: 999}
.phonering-alo-ph-img-circle a {
display: block;
width: 45px;
line-height: 45px;
text-indent: -9999px}
.phonering-alo-ph-img-circle a:hover {
background: rgba( 255, 255, 255, .2)}
.phonering-alo-ph-img-circle a:before {
color: #fff;
font-size: 30px;
display: inline-block}
.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
background-color: #00aff2}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
background-color: #00aff2}
@-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: .2}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: .2}
100% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2}
}
@-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)}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none}
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)}
}
@keyframes fadeOutRight {
0% {
opacity: 1}
100% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)}
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(.5) skew(1deg);
transform: rotate(0) scale(.5) skew(1deg);
opacity: .1}
30% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .5}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: .1}
}
@keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(.5) skew(1deg);
transform: rotate(0) scale(.5) skew(1deg);
opacity: .1}
30% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .5}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: .1}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .2}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: .2}
100% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .2}
}
@keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .2}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: .2}
100% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
transform: rotate(0) scale(.7) skew(1deg);
opacity: .2}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg)}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg)}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg)}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg)}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
}
@keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg)}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg)}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg)}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg)}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg)}
}
.style-for-position-br {
left: auto;
right: 0}
.style-for-position-cl {
bottom: auto;
top: 50%}
.style-for-position-cr {
left: auto;
bottom: auto;
top: 50%;
right: 0}
.style-for-position-tl {
bottom: auto;
top: 0}
.style-for-position-tr {
left: auto;
bottom: auto;
top: 0;
right: 0}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
border-color: #e11428}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill,.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
background-color: #e11428}
.phonering-alo-ph-img-circle {
width: 45px;
height: 45px;
top: 45px;
left: 45px}
.phonering-alo-ph-img-circle a {
width: 45px;
line-height: 45px}
.phonering-alo-ph-circle-fill {
width: 90px;
height: 90px;
top: 22.5px;
left: 22.5px}
.echbay-alo-phone,.phonering-alo-ph-circle {
width: 135px;
height: 135px}
.style-for-position-cr,.style-for-position-cl {
margin-top: -67.5px;
}
@media screen and (max-width:0px) {
.style-for-position-bl {
left: -45px;
bottom: -45px}
.style-for-position-br {
right: -45px;
bottom: -45px}
.style-for-position-cl {
left: -45px;
}
.style-for-position-cr {
right: -45px;
}
.style-for-position-tl {
top: -45px;
left: -45px}
.style-for-position-tr {
top: -45px;
right: -45px}
}
.echbay-alo-phone {
display: block}
.echbay-alo-phone,.phonering-alo-ph-circle {
width: auto;
}
.phone-tel01 {
margin-top: 50px;
margin-left: 110px;
font-size: 20px;
color: red;
font-weight: 700;
}
.phone-tel01 a {
color: red;
}
.echbay-alo-phone label{
position: absolute;
width: 130px;
left: 80px;
line-height: 35px;
text-align: center;
font-weight: bold;
background: #e11428;
color: #fff;
border-radius: 0 18px 18px 0;
bottom: 44px;
}

Kết quả sẽ như này

tao-thanh-bar-lien-he-rung-lac-flatsome-02
tao-thanh-bar-lien-he-rung-lac-flatsome-02

Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai.