Với dạng button liên hệ blog mình có vài bài viết các bạn cứ tìm kiếm là ra, trước đây khi mình code button thường đặt button dạng chèn link html trực tiếp cho nên trang thường gặp vấn đề về hiệu suất hay SEO báo lỗi này nọ với lại chia css, html, script riêng chèn mỗi nơi một loại cũng không tốt đặc biệt với những bạn không am hiểu về code hay bị rối.
Thôi thì nay mình gộp luôn thành một temp js cho nó gọn chỉ việc chèn vào theme hay trong tiện ích HTML/Javascript ngoài bố cục cũng được, chỉ thêm cài đặt có hiển thị hay không hiển thị button hay không mà thôi.
Thật ra style button mới này nó cũng gần giống với style button của bài viết cũ Thêm các button liên hệ cực chất cho blogspot nhưng có vẻ nó chất hơn vì giao diện bắt mắt hơn, gọn hơn và dễ cài đặt hơn
Cách thực hiện rất đơn giản, các bạn chèn code sau trước thẻ đóng </body> trong theme và cài đặt hiển thị là được
<script>//<![CDATA[
var _widget_settings = {
positions: 'bottom right',
support: {
staff: {
name: 'Uyên',
image: 'https://cdn.jsdelivr.net/gh/thietkeblogspot/images/staff.png',
messages: 'Không biết em có thể hỗ trợ gì cho anh/chị không ạ?'
}
},
buttons: {
contact: {
visible: 'true',
id: 'https://www.thietkeblogspot.com/p/lien-he.html',
messages: 'Liên hệ'
},
email: {
visible: 'true',
id: 'example@gmail.com',
messages: 'Gửi email'
},
call: {
visible: 'true',
id: '0900123456',
messages: 'Gọi điện'
},
sms: {
visible: 'true',
id: '0900123456',
messages: 'Nhắn tin'
},
viber: {
visible: 'false',
id: 'vhost.vn',
messages: 'Chat Viber'
},
telegram: {
visible: 'false',
id: 'vHostbot',
messages: 'Chat Telegram'
},
zalo: {
visible: 'true',
id: '0900123456',
messages: 'Chat Zalo'
},
facebook: {
visible: 'true',
id: 'kequaduongvodanh',
messages: 'Chat Facebook'
}
}
}
//]]></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/thietkeblogspot/js/contact-buttons-widget.min.js'></script>
Nếu theme đã có thư viện link jquery.min.js rồi thì các bạn xóa link của mình đi nhé, mình hướng dẫn các bạn cài đặt
Với giá trị positions các bạn có những tùy chọn cho vị trí hiển thị của button như sau:
- top left: vị trí trên cùng bên trái
- top right: vị trí trên cùng bên phải
- top middle: vị trí trên cùng ở giữa
- bottom left: vị trí dưới cùng bên trái
- bottom right: vị trí dưới cùng bên phải
- bottom middle: vị trí dưới cùng ở giữa
Giá trị support các bạn thay cho phù hợp như ảnh bên dưới
- name: họ tên,
- image: link ảnh
- messages: văn bản hiển thị
Giá trị buttons có tổng cộng 8 button liên hệ tương ứng với các giá trị
- visible: true hiển thị & false không hiển thị
- id: tùy theo mỗi loại button mà thay cho thích hợp
- messages: Văn bản hiển thị khi hover vào button
Để các bạn dễ hình dung link của mỗi button khi các bạn chèn id nó sẽ có dạng này:
- button contact: https://www.thietkeblogspot.com/p/lien-he.html
- button email: mailto:example@gmail.com
- button call: tel:0900123456
- button sms: sms:0900123456
- button viber: viber://pa?chatURI=vhost.vn
- button telegram: https://teleg.one/vHostbot
- button zalo: https://zalo.me/0900123456
- button facebook: http://m.me/kequaduongvodanh
