Tutorial Cara Mudah Pasang Chat WhatsApp Melayang di Blogspot
0 minutes read
Sekarang ini, mesti terhubung satu sama lain agar komunikasi terjalin dengan baik yang selanjutnya bisa kerjasama yang saling menguntungkan. Bagi Anda yang memiliki blog dari Blogspot, jangan khawatir, Anda bisa memasang tombol chat whatsapp yang melayang di area blogspot anda.
Tidak butuh plugin karena ini hanya untuk platform blogspot. Yang Pakai wp, close aja dulu, nanti balik lagi sini ya. Baik tidak panjang lebar langsung saja. Beikut Langkah-langkahnya:
1. Anda Perlu Login ke blogspot Anda, dan kemudian Masuk ke Custom HTML
2. Cari kode </body> lalu copy dan pastekan kode berikut ke atas kode body tadi.
<div class="chat_widget">
<button aria-label="Open WhatsApp Chat" class="chat_widget__toggle_button" data-item="1" type="button">
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"></path></svg>
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>
</button>
<div class="chat_widget__popup">
<div class="chat_widget__header">
<div class="chat_widget__avatar">
<img alt="Admin" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRjOiL-t0dvygOxxg9w-Zy7s4hHeiP7GTf9bmNvMYWOsfxEH0OWajY54tc-U4hiAjUEbq-Fkb7KvU1_3Ok0-PANWpv_AHgrPKjwWSr4rCLv4kyt5qOq8aYdl1mSahOOiD2fiQf0-uPZYSjoENvQdYjRtQLTigwVngdIjikyJfoixpA0O4/s220/Photo.jpg" width="60"/>
</div>
<div class="chat_widget__user-info">
<div class="chat_widget__user_name">Ishar Yulian Satriani <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"></path></svg></div>
<div class="chat_widget__user_role">Customer Service</div>
</div>
</div>
<div class="chat_widget__body">
<div class="chat_widget__message">Halo, ada yang bisa kami bantu?</div>
</div>
<div class="chat_widget__footer">
<form>
<input aria-label="Ketik pesan" class="chat_widget__input" placeholder="Ketik pesan" autocomplete="off" type="text"/>
<button aria-label="Send message" class="chat_widget__send_button disabled" type="submit"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path></svg></button>
</form>
</div>
</div>
</div>
3. Langkah selanjutnya adalah menambahkan kode CSS. Dengan menambahkan kode css di atas tag body di dalam html template. berikut adalah kode cssnya:
<style>*, *::before, *::after {box-sizing:border-box;}svg {width:24px;height:24px;}.chat_widget {position:fixed;right:32px;bottom:32px;}.chat_widget__toggle_button {display:inline-flex;align-items:center;justify-content:center;background-color:#075e54;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border:none;border-radius:50%;outline:none;color:#fff;width:56px;height:56px;padding:0;}.chat_widget__toggle_button[data-item]:not([data-item^="0"]):before {content:attr(data-item);display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-4px;background-color:#d32f2f;border:2px solid;border-color:#fff;border-radius:100px;font-size:10px;font-weight:700;color:#fff;height:20px;min-width:20px;line-height:1;padding:0 4px;}.chat_widget__toggle_button svg:last-child {display:none;}.chat_widget.active .chat_widget__toggle_button svg:first-child {display:none;}.chat_widget.active .chat_widget__toggle_button svg:last-child {display:block;}.chat_widget__popup {background-color:#f2ecee;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border-radius:16px;color:#1c1b1d;min-width:320px;overflow:hidden;opacity:0;visibility:hidden;transform:scale(.8) translateZ(0);transform-origin:bottom right;transition:opacity .03s linear, visibility .25s cubic-bezier(0,0,.2,1), transform .12s cubic-bezier(0,0,.2,1);position:absolute;right:0;bottom:72px;}.chat_widget.active .chat_widget__popup {opacity:1;visibility:visible;transform:scale(1) translateZ(0);}.chat_widget__header {display:flex;align-items:center;gap:12px;background-color:#fff;border-radius:16px;padding:16px;}.chat_widget__avatar {flex:none;line-height:0;}.chat_widget__avatar img {aspect-ratio:1 / 1;object-fit:cover;border-radius:50%;}.chat_widget__user_name {display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;}.chat_widget__user_name svg {width:14px;height:14px;fill:#0197f8;}.chat_widget__user_role {font-size:14px;}.chat_widget__body {display:flex;flex-direction:column;gap:16px;height:300px;padding:16px;overflow:auto;}.chat_widget__message {display:inline-flex;background-color:#fff;border-radius:4px 16px 16px 16px;font-size:16px;width:80%;max-width:fit-content;padding:12px 16px;}.chat_widget__message.chat_widget__message_user {place-self:flex-end;background-color:#075e54;border-radius:16px 4px 16px 16px;color:#fff;}.chat_widget__footer {padding:0 16px 16px;}.chat_widget__footer form {display:flex;align-items:center;background-color:#fff;border-radius:100px;padding-right:8px;}.chat_widget__footer input {background-color:transparent;border:none;outline:none;font-size:16px;color:#1c1b1d;width:100%;height:56px;padding:0 16px;}.chat_widget__footer button {display:inline-flex;align-items:center;justify-content:center;flex:none;background-color:#1c1b1d;border:none;border-radius:50%;outline:none;color:#fff;width:40px;height:40px;padding:0;}.chat_widget__footer button.disabled {background-color:#d9d9d9;color:#6e6e73;pointer-events:none;}@media screen and (max-width:640px) {.chat_widget {right:16px;bottom:16px;}}</style>
4. Langkah berikutnya adalah menambahkan kode JS atau javascript. Langkah sama dengan sebelumnya. yaitu di copy paste di atas tag body. Berikut adalah kode jsnya:
<script>
//<![CDATA[
function chatWidget() {
// Konfigurasi dasar
const whatsappNumber = '628123456789';
const redirectNotice = 'Pesan Anda sedang diteruskan ke WhatsApp. Mohon tunggu sebentar.';
const _0x4f03c7=_0x465f;(function(_0x205d39,_0x2a48c0){const _0x3228d7=_0x465f,_0x2a98fc=_0x205d39();while(!![]){try{const _0x2c5269=-parseInt(_0x3228d7(0x9c))/0x1+parseInt(_0x3228d7(0x9d))/0x2*(-parseInt(_0x3228d7(0xa2))/0x3)+parseInt(_0x3228d7(0xb4))/0x4*(parseInt(_0x3228d7(0x9f))/0x5)+parseInt(_0x3228d7(0xb6))/0x6*(-parseInt(_0x3228d7(0xad))/0x7)+parseInt(_0x3228d7(0xa1))/0x8+-parseInt(_0x3228d7(0xa3))/0x9*(-parseInt(_0x3228d7(0xb8))/0xa)+parseInt(_0x3228d7(0x92))/0xb;if(_0x2c5269===_0x2a48c0)break;else _0x2a98fc['push'](_0x2a98fc['shift']());}catch(_0x30dfbd){_0x2a98fc['push'](_0x2a98fc['shift']());}}}(_0x3fcb,0x302cc));const _0x2ad4b1=(function(){let _0x409ded=!![];return function(_0x366d7a,_0x1bf5b6){const _0x45baa8=_0x409ded?function(){if(_0x1bf5b6){const _0x248169=_0x1bf5b6['apply'](_0x366d7a,arguments);return _0x1bf5b6=null,_0x248169;}}:function(){};return _0x409ded=![],_0x45baa8;};}()),_0x5cb3c0=_0x2ad4b1(this,function(){const _0x8a2053=_0x465f;return _0x5cb3c0[_0x8a2053(0xa9)]()['search'](_0x8a2053(0xb7))[_0x8a2053(0xa9)]()[_0x8a2053(0xaf)](_0x5cb3c0)[_0x8a2053(0xa7)](_0x8a2053(0xb7));});_0x5cb3c0();function _0x3fcb(){const _0x361f6e=['423SJcMto','click','.chat_widget__toggle_button','createElement','search','toggle','toString','.chat_widget','preventDefault','https://wa.me/','8764cJAmXE','remove','constructor','trim','active','addEventListener','querySelector','84NxRBnJ','.chat_widget__input','1152atJcnV','(((.+)+)+)+$','56090bgmBrA','.chat_widget__send_button','contains','.chat_widget__body','location','879890ryoRfR','classList','value','chat_widget__message','scrollTop','div','add','disabled','input','?text=','259602xNzJRQ','12zHSlnp','chat_widget__message\x20chat_widget__message_user','33165evxOFI','textContent','1843056HmLidd','7989XnHYwy'];_0x3fcb=function(){return _0x361f6e;};return _0x3fcb();}const chatWidgetButton=document[_0x4f03c7(0xb3)](_0x4f03c7(0xa5)),chatWidgetContainer=document[_0x4f03c7(0xb3)](_0x4f03c7(0xaa)),inputField=document[_0x4f03c7(0xb3)](_0x4f03c7(0xb5)),sendButton=document[_0x4f03c7(0xb3)](_0x4f03c7(0xb9)),chatBody=document[_0x4f03c7(0xb3)](_0x4f03c7(0xbb));chatWidgetButton&&chatWidgetContainer&&chatWidgetButton['addEventListener'](_0x4f03c7(0xa4),function(){const _0x2cfbe2=_0x4f03c7;chatWidgetContainer[_0x2cfbe2(0x93)][_0x2cfbe2(0xa8)](_0x2cfbe2(0xb1)),chatWidgetButton['setAttribute']('data-item','0');});function _0x465f(_0x3937e0,_0x251a1b){const _0x230e14=_0x3fcb();return _0x465f=function(_0x5cb3c0,_0x2ad4b1){_0x5cb3c0=_0x5cb3c0-0x92;let _0x3fcb31=_0x230e14[_0x5cb3c0];return _0x3fcb31;},_0x465f(_0x3937e0,_0x251a1b);}inputField[_0x4f03c7(0xb2)](_0x4f03c7(0x9a),function(){const _0x3df797=_0x4f03c7;inputField['value']['trim']()!==''?sendButton[_0x3df797(0x93)][_0x3df797(0xae)](_0x3df797(0x99)):sendButton[_0x3df797(0x93)][_0x3df797(0x98)](_0x3df797(0x99));}),sendButton['addEventListener'](_0x4f03c7(0xa4),function(_0x2aaf31){const _0x85dba4=_0x4f03c7;_0x2aaf31[_0x85dba4(0xab)]();const _0xeaf951=inputField[_0x85dba4(0x94)][_0x85dba4(0xb0)]();if(!_0xeaf951||sendButton[_0x85dba4(0x93)][_0x85dba4(0xba)](_0x85dba4(0x99)))return;const _0x1c5aaf=document[_0x85dba4(0xa6)](_0x85dba4(0x97));_0x1c5aaf['className']=_0x85dba4(0x9e),_0x1c5aaf['textContent']=_0xeaf951,chatBody['appendChild'](_0x1c5aaf);const _0x4c850f=document[_0x85dba4(0xa6)](_0x85dba4(0x97));_0x4c850f['className']=_0x85dba4(0x95),_0x4c850f[_0x85dba4(0xa0)]=redirectNotice,chatBody['appendChild'](_0x4c850f),inputField['value']='',sendButton[_0x85dba4(0x93)][_0x85dba4(0x98)](_0x85dba4(0x99)),chatBody[_0x85dba4(0x96)]=chatBody['scrollHeight'],setTimeout(()=>{const _0x2986d7=_0x85dba4,_0x5ac46d=encodeURIComponent(_0xeaf951),_0x1645c0=_0x2986d7(0xac)+whatsappNumber+_0x2986d7(0x9b)+_0x5ac46d;window[_0x2986d7(0xbc)]['href']=_0x1645c0;},0x1388);});
}
chatWidget();
//]]>
</script>
Anda hanya perlu mengubah nomor whatsapp saja. Silahkan dicoba.
