Cara Membuat Tombol Kontak terintegrasi dengan beberapa opsi di Blogger
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeN19rQ7brqLSAlwuJ2OwxyVNAObbJjEGw89AH5QcINrmSsD09AI81aCaO2nL-6hBuxRH77BgnC3h6zB2DTxHcATVeBtRftb0GiVh4JBvA5QTo318Q1Z2S0Nh-n5Q7TMY-sIXHBomUGfDa/s1600/Cara+Membuat+Tombol+Kontak+terintegrasi+dengan+beberapa+opsi+di+Blogger.jpg)
Maka dari itu Theboegis Memberika Tutorial Cara Membuat Tombol Kontak terintegrasi dengan beberapa opsi di Blogger
Demo nya anda bisa lihat disini :
Langkah Pertama yang harus Anda lakukan yaitu:
1. Masuk ke akun blogger Anda > Tema > Edit Html
2. Menambahkan kode css di bawah ini tepat di atas kode </body>
<link href='https://cdn.statically.io/gh/wiendhy/theboegis/f6941b7c/arcontactus.css' rel='stylesheet'/>
<script src='https://cdn.statically.io/gh/wiendhy/theboegis/7429d8c8/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 arcItems = [];
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/kequaduongvodanh';
arcItem.color = '#567AFF';
arcItems.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/08875820426';
arcItem.color = '#1EBEA5';
arcItems.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://nguyenanhtuan2401_2?chat';
arcItem.color = '#1C9CC5';
arcItems.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:nadianikami@gmail.com';
arcItem.color = '#FF643A';
arcItems.push(arcItem);
var arcItem = {};
arcItem.id = 'msg-item-8';
arcItem.class = 'msg-item-phone';
arcItem.title = 'Call 0908562750';
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:08875820426';
arcItem.color = '#4EB625';
arcItems.push(arcItem);
jQuery('#arcontactus').contactUs({
items: arcItems
});
});
//]]></script>
3. Simpan Template Keterangan : yang saya tandai ganti dan sesuaikan