Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook

Và bây giờ chúng ta bắt tay làm luôn nhé!

Đối với theme Flatsome

Bài viết hướng dẫn được thực hiện trên theme Flatsome. Do đó, các bạn nào sử dụng theme Flatsome thì hoàn toàn có thể làm theo y nguyên nhé!

Bước 1: Copy code HTML và CSS

Trên thanh đen đen trên cùng (Admin

Bar) có chữ Flatsome, các bạn rê chuột vào Advanced – Global Setting và tìm đến Footer Script.

Sau đó, bạn copy toàn bộ đoạn code sau vào Footer Script nhé!

<style>.float-contact {<br /><br /><br /><br /><br /><br /><br /><br /><br />
position: fixed;<br /><br /><br /><br /><br /><br /><br /><br /><br />
bottom: 20px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
left: 20px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
z-index: 99999;<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
.chat-zalo {<br /><br /><br /><br /><br /><br /><br /><br /><br />
background: #8eb22b;<br /><br /><br /><br /><br /><br /><br /><br /><br />
border-radius: 20px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
padding: 0 18px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
color: white;<br /><br /><br /><br /><br /><br /><br /><br /><br />
display: block;<br /><br /><br /><br /><br /><br /><br /><br /><br />
margin-bottom: 6px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
.chat-face {<br /><br /><br /><br /><br /><br /><br /><br /><br />
background: #125c9e;<br /><br /><br /><br /><br /><br /><br /><br /><br />
border-radius: 20px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
padding: 0 18px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
color: white;<br /><br /><br /><br /><br /><br /><br /><br /><br />
display: block;<br /><br /><br /><br /><br /><br /><br /><br /><br />
margin-bottom: 6px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
.float-contact .hotline {<br /><br /><br /><br /><br /><br /><br /><br /><br />
background: #d11a59!important;<br /><br /><br /><br /><br /><br /><br /><br /><br />
border-radius: 20px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
padding: 0 18px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
color: white;<br /><br /><br /><br /><br /><br /><br /><br /><br />
display: block;<br /><br /><br /><br /><br /><br /><br /><br /><br />
margin-bottom: 6px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
.chat-zalo a, .chat-face a, .hotline a {<br /><br /><br /><br /><br /><br /><br /><br /><br />
font-size: 15px;<br /><br /><br /><br /><br /><br /><br /><br /><br />
color: white;<br /><br /><br /><br /><br /><br /><br /><br /><br />
font-weight: 400;<br /><br /><br /><br /><br /><br /><br /><br /><br />
text-transform: none;<br /><br /><br /><br /><br /><br /><br /><br /><br />
line-height: 0;<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
@media (max-width: 549px){<br /><br /><br /><br /><br /><br /><br /><br /><br />
.float-contact{<br /><br /><br /><br /><br /><br /><br /><br /><br />
display:none<br /><br /><br /><br /><br /><br /><br /><br /><br />
}<br /><br /><br /><br /><br /><br /><br /><br /><br />
}</style><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class=”float-contact”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button class=”chat-zalo”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href=”http://zalo.me/0867592210″>Chat Zalo</a><br /><br /><br /><br /><br /><br /><br /><br /><br />
</button><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button class=”chat-face”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href=”http://m.me/moosun.vn”>Chat Facebook</a><br /><br /><br /><br /><br /><br /><br /><br /><br />
</button><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button class=”hotline”><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href=”tel:0867592210″>Hotline: 0867592210</a><br /><br /><br /><br /><br /><br /><br /><br /><br />
</button><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

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: 15px;

color: white;

font-weight: 400;

text-transform: none;

line-height: 0;

}

@media (max-width: 549px){

.float-contact{

display:none

}

}</style>

</button>

<a href=“http://m.me/moosun.vn”>Chat Facebook</a>

</button>

<a href=“tel:0867592210”>Hotline: 0867592210</a>

</button>

</div>

Bước 2: Thay thông tin cần thiết

Thông tin ở đoạn code trên là thông tin demo của mình, khi copy sang website của các bạn thì các bạn phải đổi thông tin thành của các bạn.

Các bạn có thể đổi thông tin trong các mục sau:

Giuseart.com---Thêm-các-nút-tiện-ích-gọi-điện-cho-website — Giuseart.com – Chỉnh sửa thông tin bao gồm 1. Chỉnh sửa link và 2. Chỉnh sửa text

Màu xanh da trời: Sửa link chat Zalo. Link đúng có dạng: http://zalo.me/09xxxxxxxx (09xxxxxxxx là số điện thoại đăng ký zalo)
Màu xanh lá cây: Sửa link chat Messenger. Link đúng có dạng: http://messenger.com/t/abc (abc là tên trang cá nhân của bạn, sau phần gạch chéo của facebook.com)
Màu đỏ: Sửa số điện thoại. Link đúng có dạng: tel:09xxxxxxxx (09xxxxxxxx là số điện thoại của bạn)
Màu xám: Sửa chữ hiển thị ra ngoài trang chủ

Bước 3: Lưu lại và hưởng thành quả

Sau khi bạn copy code và sửa thông tin trong footer script, bạn lưu lại và ra trang chủ hưởng thành quả nhé!

Phong thuỷ

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook

Đối với theme Flatsome

Bước 1: Copy code HTML và CSS

Bước 2: Thay thông tin cần thiết

Bước 3: Lưu lại và hưởng thành quả

root

Đối với theme Flatsome

Bước 1: Copy code HTML và CSS

Bước 2: Thay thông tin cần thiết

Bước 3: Lưu lại và hưởng thành quả

root

Đăng nhập