Việc tạo các nút Facebook Messenger, Zalo chat, Skype chat và Email với một nút này rất phức tạp, đặc biệt nếu nó sẽ làm xáo trộn giao diện blog của chúng ta, tại sao bạn không kết hợp nó thành một nút, hay nói đơn giản là gom nó vào một nút và bấm xổ ra để chọn. Và sử dụng nút để hiển thị menu trong một cú nhấp chuột, điều này là rất thoải mái phải không?
Tại sao cần nút liên hệ trên blog của bạn?
Một câu hỏi rất hay phải không nào? Vì kiểu gì khi bạn chia sẻ điều gì đó mà người đọc còn vướng mắc thì họ còn biết chỗ mà tìm hỏi bạn. Đặc biệt với những bạn làm các site về bán hàng thì nút liên hệ trên site là rất cần thiết để khách hành liên hệ cũng như chăm sóc khác hàng.
Nút liên hệ tích hợp là sao?
Hiểu đơn giản là bạn có các kênh liên hệ mà mình nói ở trên. Thay vì đặt nó ra hết ngoài site thì nhìn cái site nó rất bề bộn. Chúng ta gom các nút liên hệ này lại vừa tăng tính thẩm mỹ cho site, vừa trông rất chuyên nghiệp. OK, lòng vòng nãy giờ để bạn hiểu thêm một chút về cái mà chúng ta sắp làm dưới đây nhé.
Cách tạo nút liên hệ cực chất tích hợp nhiều lựa chọn cho Blogger
Trước khi làm bạn hãy xem DEMO trước nhé. Thấy cần thì hãy làm theo còn không thì bỏ đi cho khỏe.
Các bước thực hiện rất đơn giản như sau, bạn cứ làm theo không được thì xóa đi chả sao, cũng không mất nhiều thời gian đâu.
Bước 1- Đăng nhập vào Tài khoản Blogger của bạn> Chủ đề > Chỉnh sửa HTML.
Bước 2- Copy và thêm đoạn mã bên dưới này ngay phía trên thẻ đóng </body> nhé.
<link href='https://raw.githack.com/Shaampc/NQnia/master/f6941b7c.css' rel='stylesheet'/>
<script src='https://raw.githack.com/Shaampc/NQnia/master/contactus.js' type='text/javascript'></script>
<div id='arcontactus'></div>
<script>//<![CDATA[
var arCuMessages = ["Contact Us!", "You Need Our Help?"];
var arCuLoop = false;
var arCuCloseLastMessage = false;
var arCuPromptClosed = false;
var _arCuTimeOut = null;
var arCuDelayFirst = 2000;
var arCuTypingTime = 2000;
var arCuMessageTime = 4000;
var arCuClosedCookie = 0;
var nqnia = [];
window.addEventListener('load', function() {
arCuClosedCookie = arCuGetCookie('arcu-closed');
jQuery('#arcontactus').on('arcontactus.init', function() {
if (arCuClosedCookie) {
return false;
}
arCuShowMessages();
});
jQuery('#arcontactus').on('arcontactus.openMenu', function() {
clearTimeout(_arCuTimeOut);
arCuPromptClosed = true;
jQuery('#contact').contactUs('hidePrompt');
arCuCreateCookie('arcu-closed', 1, 30);
});
jQuery('#arcontactus').on('arcontactus.hidePrompt', function() {
clearTimeout(_arCuTimeOut);
arCuPromptClosed = true;
arCuCreateCookie('arcu-closed', 1, 30);
});
var arcItem = {};
arcItem.id = 'msg-item-1';
arcItem.class = 'msg-item-facebook-messenger';
arcItem.title = 'Messenger';
arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z"></path></svg>';
arcItem.href = 'https://m.me/shaampc01';
arcItem.color = '#567AFF';
nqnia.push(arcItem);
var arcItem = {};
arcItem.id = 'msg-item-9';
arcItem.class = 'msg-item-telegram-plane';
arcItem.title = 'Zalo Chat';
arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg>';
arcItem.href = 'https://zalo.me/xxxxxxx';
arcItem.color = '#1EBEA5';
nqnia.push(arcItem);
var arcItem = {};
arcItem.id = 'msg-item-6';
arcItem.class = 'msg-item-skype';
arcItem.title = 'Skype Chat';
arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M424.7 299.8c2.9-14 4.7-28.9 4.7-43.8 0-113.5-91.9-205.3-205.3-205.3-14.9 0-29.7 1.7-43.8 4.7C161.3 40.7 137.7 32 112 32 50.2 32 0 82.2 0 144c0 25.7 8.7 49.3 23.3 68.2-2.9 14-4.7 28.9-4.7 43.8 0 113.5 91.9 205.3 205.3 205.3 14.9 0 29.7-1.7 43.8-4.7 19 14.6 42.6 23.3 68.2 23.3 61.8 0 112-50.2 112-112 .1-25.6-8.6-49.2-23.2-68.1zm-194.6 91.5c-65.6 0-120.5-29.2-120.5-65 0-16 9-30.6 29.5-30.6 31.2 0 34.1 44.9 88.1 44.9 25.7 0 42.3-11.4 42.3-26.3 0-18.7-16-21.6-42-28-62.5-15.4-117.8-22-117.8-87.2 0-59.2 58.6-81.1 109.1-81.1 55.1 0 110.8 21.9 110.8 55.4 0 16.9-11.4 31.8-30.3 31.8-28.3 0-29.2-33.5-75-33.5-25.7 0-42 7-42 22.5 0 19.8 20.8 21.8 69.1 33 41.4 9.3 90.7 26.8 90.7 77.6 0 59.1-57.1 86.5-112 86.5z"></path></svg>';
arcItem.href = 'skype://XXXXXXXXXXXXX?chat';
arcItem.color = '#1C9CC5';
nqnia.push(arcItem);
var arcItem = {};
arcItem.id = 'msg-item-7';
arcItem.class = 'msg-item-envelope';
arcItem.title = 'Get an email';
arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg>';
arcItem.href = 'mailto:shammalik098@gmail.com';
arcItem.color = '#FF643A';
nqnia.push(arcItem);
var arcItem = {};
arcItem.id = 'msg-item-8';
arcItem.class = 'msg-item-phone';
arcItem.title = 'Call 923000762460';
arcItem.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>';
arcItem.href = 'tel:923000762460';
arcItem.color = '#4EB625';
nqnia.push(arcItem);
jQuery('#arcontactus').contactUs({
items: nqnia
});
});
//]]></script>{codeBox}
Lưu ý quan trọng nhé: Nhớ thay mấy cái thông tin được bôi vàng bằng thông tin của bạn nhé. Ngoài ra Code này có thể không chạy được trên một số giao diện do bị xung đột JS nhé.{alertSuccess}
OK, Vậy là mình vừa chia sẻ cho bạn cách để tạo nút liên hệ cực chất cho Blogger rồi đó. Chúc các bạn thành công.
