Lliên hệ đẹp cho web Điện Máy – Là một dạng contact được show ra trang để tiện cho việc khách hàng muốn liên hệ với Sale hoặc admin trong trường hợp cần thiết, Từ form liên hệ này chúng ta có thể tùy chỉnh theo ý muốn của mình để việc Hộ trợ khách hoặc Sale hàng hóa được tốt nhất. Để kho contact của bạn thêm phong phú hôm nay tớ share thêm 1 form mà anh em tháy đẹp có yêu cầu RIp lại giúp, Sẳn tớ viết bài share luôn cho anh em nào cần nhé. Để làm được vui long đọc hết bài nhé hj , Hoặc nếu muốn làm được trên bất kỳ web nào xem videos của tớ để biết cách làm nhé
Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất
Để bạn dể hình dung bạn xem qua liên hệ đẹp trên pc và mobile hình bến dưới nhé
Cách Chèn liên hệ đẹp cho web Điện Máy mới nhất
trong flatsome bạn làm theo đường dẫn
Advanced / Global Settings ngay FOOTER SCRIPTS ta dán code này vào ( code bên dưới nhé )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
<!— Contact –>
<div id=”quick_support”><a class=”social-hl” title=”Hotline” target=”_blank” rel=”noreferrer” href=”tel:1900 0255″><img height=”40″ src=”https://baochauelec.com/assets/images/social/call.png” alt=”call”><span> Hotline <strong>1900 0255</strong></span></a><a class=”social-hl social-hlkt” title=”Hotline” target=”_blank” rel=”noreferrer” href=”tel:0868500255″><img height=”40″ src=”https://baochauelec.com/assets/images/social/icon-ky-thuat.png” alt=”call”><span> Hỗ trợ kỹ thuật <strong>0868 500 255</strong></span></a><a class=”social-hl social-fb” title=”Fanpage” target=”_blank” rel=”noreferrer” href=”https://www.facebook.com/baochauelec”><img height=”40″ src=”https://baochauelec.com/assets/images/social/facebook.png” alt=”facebook”><span> Fanpage </span></a><a class=”social-hl social-msg” title=”Chat Messenger” rel=”noreferrer” href=”http://m.me/baochauelec” target=”_blank”><img src=”https://baochauelec.com/assets/images/social/messager.png” height=”40″><span> Chat FB </span></a><a class=”social-hl social-zalo” title=”Chat Zalo” target=”_blank” rel=”noreferrer” href=”https://zalo.me/1721348802370464937″><img height=”40″ src=”https://baochauelec.com/assets/images/social/zalo.png” alt=”zalo”><span> Chat Zalo </span></a><a class=”social-hl social-yt” title=”Youtube Chanel” target=”_blank” rel=”noreferrer” href=”https://www.youtube.com/channel/UCZNQMF8NNPNDOrocQPdrz2w”><img height=”40″ src=”https://baochauelec.com/assets/images/social/youtube.png” alt=”youtube”><span> Youtube </span></a><a class=”social-hl social-tt” title=”Tiktok Chanel” target=”_blank” rel=”noreferrer” href=”https://www.tiktok.com/@baochauelec”><img height=”40″ src=”https://baochauelec.com/assets/images/social/tiktok.png” alt=”Tiktok”><span> Tiktok </span></a></div>
<style>
#quick_support {
position: fixed;
top: 180px;
right: 5px;
z-index: 100;
transition: .5s all;
text-align: center;
width: 40px;
}
#quick_support a.social-hl {
background-color: #13990A;
font-size: 12px;
text-align: center;
}
#quick_support a {
display: flex;
column-gap: 10px;
background-color: #fff;
align-items: center;
margin: 5px 0;
height: 40px;
width: 40px;
overflow: hidden;
border-radius: 50px;
color: #fff;
transition: all .3s ease;
position: relative;
right: 0;
}
#quick_support a>span {
margin-right: 5px;
white-space: nowrap;
}
#quick_support a.social-hl strong {
display: block;
font-size: 14px;
font-weight: bold;
color: #ffd400;
}
#quick_support a.social-hl:hover {
width: 160px;
right: 100px;
}
#quick_support a:hover {
z-index: 1;
}
#quick_support a.social-hl {
background-color: #13990A;
font-size: 12px;
text-align: center;
}
#quick_support a {
display: flex;
column-gap: 10px;
background-color: #fff;
align-items: center;
margin: 5px 0;
height: 40px;
width: 40px;
overflow: hidden;
border-radius: 50px;
color: #fff;
transition: all .3s ease;
position: relative;
right: 0;
}@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
#quick_support {
display: none;
}
}
</style>
<!— Mobile –>
<ul class=”helpbar”><li class=”toggle_categories” id=”toggle_categories”><a rel=”nofollow” href=”#”><i class=”three_bar”></i> Menu </a></li><li><a target=”_blank” rel=”noreferrer” href=”tel:1900 0255″><strong>1900 0255</strong> Gọi Tư Vấn </a></li><li><a target=”_blank” rel=”noreferrer” href=”http://m.me/baochauelec”><i class=”iconmobile-fbmsg”></i> Nhắn Tin </a></li><li><a target=”_blank” rel=”noreferrer” href=”https://zalo.me/1721348802370464937″><i class=”iconmobile-fzalo”></i> Chat Zalo </a></li><li class=”showAdress”><a href=”#”><i class=”iconmobile-fmap”></i> Chỉ Đường </a></li></ul>
<style>
.helpbar {
display: none;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE ***************/
.helpbar {
display: block !important;
width: 100%;
max-width: 640px;
background: #fff;
position: fixed;
height: 60px;
bottom: 0;
z-index: 9;
border: 1px solid #ececec;
padding: 5px;
box-sizing: border-box;
overflow: hidden;
margin: 0px;
}
.helpbar li {
display: inline-block;
float: left;
width: 20%;
text-align: center;
}
.helpbar li a {
display: block;
font-size: 13px;
}
.helpbar li.toggle_categories i {
background: #ee3338;
height: 3px;
width: 35px;
display: block;
position: relative;
margin: 15px auto;
}
.helpbar li.toggle_categories i:before {
top: -6px;
}
.helpbar li.toggle_categories i:before, .helpbar li.toggle_categories i:after {
content: “”;
background: #ee3338;
height: 3px;
width: 35px;
display: block;
position: absolute;
left: 0;
}
.helpbar li a {
display: block;
font-size: 13px;
}
.helpbar li a strong {
display: block;
margin: 2px auto;
line-height: 28px;
overflow: hidden;
color: #ee3338;
}.helpbar li i {
width: 30px;
height: 28px;
display: block;
margin: 2px auto;
}
[class^=iconmobile-], [class^=iconmobile-], [class*=iconmobile-] {
background-image: url(https://baochauelec.com/assets/images/iconmb/iconmobile@2x.webp);
background-image: url(https://baochauelec.com/assets/images/iconmb/iconmobile@2x.png);
background-repeat: no-repeat;
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
vertical-align: middle;
background-size: 265px 65px;
}
.iconmobile-fbmsg {
background-position: 0 -36px;
}
.iconmobile-fzalo {
background-position: -30px -36px;
}
.iconmobile-fmap {
background-position: -60px -36px !important;
}
}
</style>
|
Chú ý Chia sẽ liên hệ đẹp cho web Điện Máy mới nhất : thay số điện thoại và zalo thành của mình nhé
Nhớ download hình và úp lên host mình , sau đó lấy lại đường dẫn hình để chủ động tránh trường hợp trang người ta thay hình (xóa hình của ) hình web mình lỗi theo hi
( Link code full tại đây nhé https://codepen.io/Flatsome/pen/dyLGyQW )
Anh em có thể tham khảo demo của tớ tại : https://gumac.uxthemes.net
Cảm ơn anh em, nếu có thắc mắc vui lòng liên hệ tớ – Chúc anh em thành công
