Thực hiện trong phần quản trị Blogger > Chủ đề > Chỉnh sửa HTML tìm đến thẻ </body> thông thường nằm dưới cùng và thêm đoạn css sau :
+ Hiển thị nút gọi trên máy tính và điện thoại
<!-- Start Quick Buttons By share123bloggertemplates.com -->
<div class='quick-call-button'></div>
<div class='call-now-button'>
<div><p class='call-text'><a href='tel:0965196224' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>
<a href='tel:0965196224' title='Liên Hệ Chúng Tôi' >
<div class='quick-alo-ph-circle'></div>
<div class='quick-alo-ph-circle-fill'></div>
<div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'></div>
</a>
</div>
</div>
<style>
@media screen and (max-width: 1920px) {
.call-now-button { display: flex !important; background: #d818db; }
.quick-call-button { display: block !important; }
}
@media screen and (min-width: px) {
.call-now-button .call-text { display: none !important; }
}
@media screen and (max-width: 1024px) {
.call-now-button .call-text { display: none !important; }
}
.call-now-button { top: 80%; }
.call-now-button { left: 3%; }
.call-now-button { background: #d818db; }
.quick-alo-ph-btn-icon { background-color: #ffffff !important; }
.call-now-button .call-text { color: #fff; }
</style>
<!-- /End Quick Buttons By Share123bloggertemplates.com -->
<link rel='stylesheet' id='lv_css-css' href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css' type='text/css' media='all' />
<!--nut goi share123bloggertemplates.com-->
+ Chỉ hiển thị nút gọi trên di động
<b:if cond='data:blog.isMobileRequest != "true"'>
<!-- Start Quick Buttons By share123bloggertemplates.com -->
<div class='quick-call-button'></div>
<div class='call-now-button'>
<div><p class='call-text'><a href='tel:0965196224' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>
<a href='tel:0965196224' title='Liên Hệ Chúng Tôi' >
<div class='quick-alo-ph-circle'></div>
<div class='quick-alo-ph-circle-fill'></div>
<div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'></div>
</a>
</div>
</div>
<style>
@media screen and (max-width: 1920px) {
.call-now-button { display: flex !important; background: #d818db; }
.quick-call-button { display: block !important; }
}
@media screen and (min-width: px) {
.call-now-button .call-text { display: none !important; }
}
@media screen and (max-width: 1024px) {
.call-now-button .call-text { display: none !important; }
}
.call-now-button { top: 80%; }
.call-now-button { left: 3%; }
.call-now-button { background: #d818db; }
.quick-alo-ph-btn-icon { background-color: #ffffff !important; }
.call-now-button .call-text { color: #fff; }
</style>
<!-- /End Quick Buttons By Share123bloggertemplates.com -->
<link rel='stylesheet' id='lv_css-css' href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css' type='text/css' media='all' />
<!--nut goi share123bloggertemplates.com-->
</b:if>
Lưu ý : Những nội dung yêu cầu thay đổi theo nhu cầu sử dụng
1 - Số điện thoại : Các bạn thay đổi số đt 0965196224 thành số của mình, ở đoạn code trên có 2 số điện thoại cần thay đổi.
2 - Dòng chữ Liên Hệ Với Chúng Tôi : Các bạn có thể thay đổi dòng chữ hiển thị trên máy tính tùy ý.
3 - Icon hiển thị : Ở đoạn code trên mình đang để hiển thị Icon nút gọi nằm ở đoạn code quick-alo-ph-btn-icon quick-alo-phone-img-circle là Icon cho dành cho nút gọi, các bạn có thể thay thế nó bằng các nút khác dưới đây :
- quick-alo-ph-btn-icon quick-alo-zalo-img-circle : Hiển thị Icon Zalo (Nếu liên kết zalo thì sửa tel:0965196224 thành https://zalo.me/0965196224)
- quick-alo-ph-btn-icon quick-alo-email-img-circle : Hiển thị Icon Email (Nếu liên kết Email thì sửa tel:0965196224 thành mailto:web2ngay@gmail.com)
- quick-alo-ph-btn-icon quick-alo-cart-img-circle : Hiển thị Icon Giỏ Hàng (Nếu liên kết Giỏ hàng thì sửa tel:0965196224 thành liên kết giỏ hàng)
- quick-alo-ph-btn-icon quick-alo-facebook-img-circle : Hiển thị Icon Facebook (Nếu liên kết Facebook thì sửa tel:0965196224 thành liên kết Facebook )
- quick-alo-ph-btn-icon quick-alo-messenger-img-circle : Hiển thị Icon Messenger (Nếu liên kết Messenger thì sửa tel:0965196224 thành liên kết Messenger)
Đối với website bạn cũng thêm tương tự trên hosting của mình nhé cách đơn giản nhưng bạn có một nút gọi đẹp lung linh tại sao không làm nhỉ. Ahii Nhớ chỉnh sửa lại số điện thoại của mình nha...Chúc các bạn thành công !
No comments:
Post a Comment