Code call now button - Tạo nút gọi trên Blogspot / Website

8/20/2017
Call now button là nút gọi các bạn thường thấy trên một webssite hay Blogspot lắc lư trông khá ngộ nghĩnh và gây sự chú ý của người dùng. Nút gọi này đa phần được hiển thị trên di động khi các bạn vào blogspot hay website nhưng có khi cũng hiển thị trên desktop hoặc PC.

>> 4 bước tối ưu hóa seo blogspot "Chuẩn SEO" top Google

Những lý do bạn nên thêm code nút gọi trên Blogspot / Website 

  1. Gây sự chú kích thích khách hàng gọi
  2. Đáp ứng nhu cầu nhanh chóng của người dùng
  3. Làm cho Blogspot hay Website sinh động hơn
Code call now button - Tạo nút gọi trên Blogspot / Website
Code call now button - Tạo nút gọi trên Blogspot / Website
Hôm nay Share123 Blogger Templates sẽ hướng dẫn các bạn chi tiết về thực hiện cách thêm nút gọi cho Blogspot hay Website đơn giản chỉ là dùng CSS thêm code vào file HTML là xong thôi mà;

Code tạo nút gọi trên Blogspot / Website đơn giản dùng CSS


Code tạo nút gọi mà mình muốn gởi cho các bạn khá đơn giản đặc biệt không sử dụng javascript làm website bạn load chậm nên cứ yên tâm sử dụng nhé. vậy bây giờ chúng ta bắt đầu nhé...

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:0967849934' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>
<a href='tel:0967849934' 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.staticaly.com/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 != &quot;true&quot;'>
<!-- 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:0967849934' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>
<a href='tel:0967849934' 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.staticaly.com/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 0967 84 99 34 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:0967849934 thành https://zalo.me/0967849934)
- 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:0967849934 thành mailto:manhongit.dhp@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:0967849934 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:0967849934 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:0967849934 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 !

VIDEO HƯỚNG DẪN

CÁCH TẠO NÚT ZALO

Nguồn bài viết : http://www.share123bloggertemplates.com/2017/08/code-call-now-button-tao-nut-goi-tren-blogspot-website.html

Bài viết liên quan