Tidak ada pin yang di tentukan
Home BloggerWidget Cara membuat floatin...

Cara membuat floating chat di blogger otomatis

Cara membuat floating chat di blogger otomatis
Apakah blog kamu mempunyai floating chat yang berguna untuk berkomunikasi dengan pengunjung setia kamu?..
Kali ini saya akan membagikan floating chat secara gratis untuk dipasang di blog kamu dengan tujuan agar navigasi di blog kamu menjadi user friendly, dan dimana si pengunjung akan dengan mudah bertanya kepada kamu melalu floating chat yang nantinya akan otomatis masuk ke WhatsApp milik kamu sendiri.
Terkadang si pengunjung memilih untuk berinteraksi langsung dengan kamu dari pada harus menuangkan pertanyaan mereka melalui kolom komentar, kenapa?. Karena bila melalui itu maka jawaban mereka ada kemungkinan lama mendapatkan respon dari kamu sendiri dan secara otomatis si pengunjung out, dan pindah mencari jawaban ke blog lain.

Apa sih fungsi dan manfaat terhadap floating chat di blogger?

Floating chat yang kita pasang di blogger mempunyai fungsi dimana pengunjung bisa saja bertanya melalui floating chat yang kita pasang.
Nah untuk manfaat dari floating chat tersebut ialah, dimana si pengunjung akan merasa nyaman bila sudah menemukan jawaban dari pertanyaan mereka melalui floating chat kepada kamu sendiri.
Lantas bagaimana sih cara memasang floating chat dan seperti apakah tampilan nya, penasaran?..

Cara membuat floating chat di blogger material design

Untuk cara pemasangan floating chat di blogger sangatlah mudah dan tidak ribet, dan saya juga menyediakan dua cara pemasangan floating chat tersebut untuk dipilih sesuai selera kamu.

Selain itu, floating chat ini nantinya akan saya update dengan perubahan yang banyak, gimana enak bukan!, Dan tentunya gratis hehe.

Sebelum melanjutkan langkahnya, salin terlebih dahulu semua mulai dari jQuery, css html dan javascript agar mempermudah proses pemasangan dan berikut semua jQuery, css dan html floating chat.

ADVERTISEMENT

Dan jangan lupa ganti yang di blok orange sesuai dengan komentar, bila tidak paham tanyakanlah melalui kolom komentar dibawah

Cdn jQuery, material-icons, typed

Semua cdn ini berfungsi untuk mengfungsikan semua elmen  yang di panggil oleh floating chat tersebut mulai dari icon, fungsi dan yabg dibutuhkan oleh floating chat blogger tersebut.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script src='https://cdn.statically.io/gh/mattboldt/typed.js/950d4527/lib/typed.min.js' type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  

CSS floating chat blogger

Berfungsi untuk mempercantik tampilan dari html floating chat blogger tersebut layaknya cat sebuah rumah.

    <style>
/*== Animasi ==*/
.close{animation:rotation
  ease .4s;animation-iteration-count:infinite;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(1040deg)}}
.kirman-chat-con{animation:slideright
  ease .4s;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes slideright{from{left:-200px}to{left:15px}0%{opacity:0}100%{opacity:1}}
.kirman_chat_item{animation:poup;ease .4s;animation-iteration-count:1;animation-fill-mode:forwards}
.kirman_btn_chat{background:#fff;transition:.4s;position:fixed;bottom:20px;right:20px;padding:15px;border-radius:100px;-webkit-box-shadow:0 0 16px 0 rgba(0,0,2,0.20);-moz-box-shadow:0 0 16px 0 rgba(0,0,2,0.20);box-shadow:0 0 16px 0 rgba(0,0,2,0.20)}
.kirman_btn_chat > i{color:#2196F3}
.close{background:#fff;display:none;transition:.4s;transform:rotate(40deg)}
.kirman-chat-con{-webkit-box-shadow:0 0 16px 0 rgba(0,0,2,0.20);-moz-box-shadow:0 0 16px 0 rgba(0,0,2,0.20);box-shadow:0 0 16px 0 rgba(0,0,2,0.20);height:auto;padding:20px;border-radius:10px;position:fixed;bottom:80px;right:15px;left:15px;max-width:300px;display:none;transition:.4s}
.kirman-chat-header{display:flex;align-items:center;margin-bottom:20px;border-bottom:1px solid #e0e0e0;padding-bottom:20px}
.kirman-chat-header > img{border-radius:100px;width:40px;height:40px}
.kirman-chat-header > .info{margin-left:20px}
.kirman-chat-header > .info > h3{padding:0;font-size:14px;margin:0}
.kirman-chat-header > .info > p{font-size:10px;padding:0;margin:0}
.kirman_chat_body{margin:10px 0}
.kirman_chat_item{font-size:10px;width:120px;color:#fff;line-height:1.6em;padding:10px;background:#2196F3;position:relative;margin-right:20px;left:20px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px 10px 10px 10px}
.kirman_chat_item:before{content:"";position:absolute;right:100%;top:10px;width:0;height:0;border-top:10px solid transparent;border-right:10px solid #2196F3;border-bottom:10px solid transparent}
.kirman_chat_item > input{padding:5px;font-size:10px;outline:none}
.kirman_chat_item > input:first-child{border-radius:8px 8px 0 0;border:none;margin-top:20px}
.kirman_chat_item > input:last-child{border-radius:0 0 8px 8px;border:none}
.kirman_chat_footer{display:flex;align-items:center;margin-top:80px;padding-top:20px;border-top:1px solid #e0e0e0}
.kirman_chat_footer > textarea{border:1px solid #e0e0e0;border-radius:10px;padding:10px 5px;width:80%;font-size:8px;outline:none}
.kirman_chat_footer > a >{}
.kirman_chat_footer > a > i{color:#2196F3;margin-left:20px}
.kirman-chat-c > .kirman_copy{font-size:8px;color:gray;display:flex;align-items:center;justify-content:center;margin:auto;margin-top:20px;text-decoration:none}
/*== Efek ==*/
.d-none{display:none;transition:.4s;transform:rotate(1000deg)}
.d-block{display:block;transition:.4s}
.kirman-rotate{transition:.4s;transform:rotate(1000deg)}
</style>
  

HTML floating chat blogger

Berfungsi untuk menampilkan semua mulai dari js, css dan kemudian di konversi ke WhatsApp web.

<div class="kirman_btn_chat" href="javascript:void;">
<i class="material-icons">question_answer</i>
</div>
<div class="kirman_btn_chat close" href="javascript:void;">
<i class="material-icons">add</i>
</div>
<form class="kirman-chat-con">
<div class="kirman-chat-header">
<!-- == Foto kamu (url gambar) == -->
<img src="https://4.bp.blogspot.com/-Jd6VGeVRHg4/XpBkfCOpSrI/AAAAAAAABa4/4K-nlEYK42cBihq8-h8WSGjRLHa0cb05wCK4BGAYYCw/s220/Tak%2Bberjudul56_20200410191936.png" alt="autor" />
<div class="info">
<h3>
<!-- == Nama kamu == -->
Kirman alidris
</h3>
<p>
<!-- == Info kamu == -->
Front End Designer
</p>
</div>
</div>
<div class="kirman_chat_body">
<div class="kirman_chat_item">
<span id='typed' style='white-space:pre;'></span>
<div id="typed-strings">
<p>
Hi!..<br />Ada yang bisa kami bantu?,<br />Untuk melanjutkan obrolan<br />silahkan isi formulir<br />dibawah ini 🥰....
</p>
</div>
</div>
</div>
<div style="width:60%" class="kirman_chat_item">
<input class="validate" id="kirman_chat_name" name="name" required="" placeholder="Nama kamu" type="text" value="" />
<input class="validate" id="kirman_chat_email" name="email" required="" type="email" placeholder="email" value="" />
</div>
<div class="kirman_chat_footer">
<textarea id="kirman_chat_textarea" maxlength="5000" placeholder="tulis pesan anda" required="" row="1"></textarea>
<a class="send_form" href="javascript:void" title="Send to Whatsapp" type="submit"><i class="material-icons">send</i></a>
</div>
<div class="kirman-chat-c"></div>
</form>

JavaScript floating chat blogger

Berfungsi sebagai layaknya engsel sebuah pintu, yabg berfungsi untuk menggerakkan atau mengfungsikan sebuah elemen dalam HTML floating chat blogger tersebut.

<script type="text/javascript" charset="utf-8">
/* Plug-in Settings */
var
walink = 'https://web.whatsapp.com/send',
phone = '6285722115950',
walink2 = 'Ada pesan masuk boss!.',
text_yes = 'Terkirim.',
text_no = 'Isi semua Formulir lalu klik Send.';
</script>

<script type="text/javascript">
//<![CDATA[
//Call out WhatsApp plug-in
var _0x200e = ["\x63\x6C\x69\x63\x6B", "\x2E\x73\x65\x6E\x64\x5F\x66\x6F\x72\x6D", "\x6B\x69\x72\x6D\x61\x6E\x5F\x63\x68\x61\x74\x5F\x65\x6D\x61\x69\x6C", "\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64", "\x75\x73\x65\x72\x41\x67\x65\x6E\x74", "\x74\x65\x73\x74", "\x77\x68\x61\x74\x73\x61\x70\x70\x3A\x2F\x2F\x73\x65\x6E\x64", "", "\x76\x61\x6C\x75\x65", "\x76\x61\x6C", "\x23\x6B\x69\x72\x6D\x61\x6E\x5F\x63\x68\x61\x74\x5F\x6E\x61\x6D\x65", "\x23\x6B\x69\x72\x6D\x61\x6E\x5F\x63\x68\x61\x74\x5F\x65\x6D\x61\x69\x6C", "\x23\x6B\x69\x72\x6D\x61\x6E\x5F\x63\x68\x61\x74\x5F\x74\x65\x78\x74\x61\x72\x65\x61", "\x3F\x70\x68\x6F\x6E\x65\x3D", "\x26\x74\x65\x78\x74\x3D", "\x25\x30\x41\x25\x30\x41", "\x2A\x4E\x61\x6D\x65\x2A\x20\x3A\x20", "\x25\x30\x41", "\x2A\x45\x6D\x61\x69\x6C\x20\x41\x64\x64\x72\x65\x73\x73\x2A\x20\x3A\x20", "\x2A\x50\x65\x73\x61\x6E\x20\x53\x69\x6E\x67\x6B\x61\x74\x2A\x20\x3A\x20", "\x5F\x62\x6C\x61\x6E\x6B", "\x6F\x70\x65\x6E", "\x6F\x6E", "\x64\x2D\x62\x6C\x6F\x63\x6B", "\x74\x6F\x67\x67\x6C\x65\x43\x6C\x61\x73\x73", "\x2E\x6B\x69\x72\x6D\x61\x6E\x2D\x63\x68\x61\x74\x2D\x63\x6F\x6E", "\x6B\x69\x72\x6D\x61\x6E\x2D\x72\x6F\x74\x61\x74\x65", "\x2E\x6B\x69\x72\x6D\x61\x6E\x5F\x62\x74\x6E\x5F\x63\x68\x61\x74", "\x2E\x63\x6C\x6F\x73\x65", "\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x27\x6B\x69\x72\x6D\x61\x6E\x5F\x63\x6F\x70\x79\x27\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x73\x3A\x2F\x2F\x68\x65\x6C\x70\x67\x75\x65\x2E\x78\x79\x7A\x27\x3E\x20\x70\x6C\x75\x67\x2D\x69\x6E\x20\x62\x79\x20\x40\x6B\x69\x72\x6D\x61\x6E\x61\x6C\x69\x64\x72\x69\x73\x3C\x2F\x61\x3E", "\x68\x74\x6D\x6C", "\x2E\x6B\x69\x72\x6D\x61\x6E\x2D\x63\x68\x61\x74\x2D\x63", "\x72\x65\x61\x64\x79"]; $(document)[_0x200e[22]](_0x200e[0], _0x200e[1], function() {
var _0x5590x1 = document[_0x200e[3]](_0x200e[2]); if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i[_0x200e[5]](navigator[_0x200e[4]])) {
var _0x5590x2 = _0x200e[6]}; if (_0x200e[7] != _0x5590x1[_0x200e[8]]) {
var _0x5590x3 = $(_0x200e[10])[_0x200e[9]](),
_0x5590x4 = $(_0x200e[11])[_0x200e[9]](),
_0x5590x5 = $(_0x200e[12])[_0x200e[9]](); var _0x5590x6 = _0x5590x2+ _0x200e[13]+ phone+ _0x200e[14]+ walink2+ _0x200e[15]+ _0x200e[16]+ _0x5590x3+ _0x200e[17]+ _0x200e[18]+ _0x5590x4+ _0x200e[17]+ _0x200e[19]+ _0x5590x5+ _0x200e[17]; window[_0x200e[21]](_0x5590x6, _0x200e[20])}}); $(document)[_0x200e[32]](function() {
$(_0x200e[27])[_0x200e[0]](function() {
$(_0x200e[25])[_0x200e[24]](_0x200e[23]); $(_0x200e[27])[_0x200e[24]](_0x200e[26]); $(_0x200e[28])[_0x200e[24]](_0x200e[23])}); $(_0x200e[31])[_0x200e[30]](_0x200e[29])})

// Typed animasi
document.addEventListener('DOMContentLoaded', function() {
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 80,
backSpeed: 20,
startDelay: 500,
loop: true,
loopCount: Infinity,
onBegin: function(self) {
prettyLog('onBegin ' + self);
},
onComplete: function(self) {
prettyLog('onComplete ' + self);
},
preStringTyped: function(pos, self) {
prettyLog('preStringTyped ' + pos + ' ' + self);
},
onStringTyped: function(pos, self) {
prettyLog('onStringTyped ' + pos + ' ' + self);
},
onLastStringBackspaced: function(self) {
prettyLog('onLastStringBackspaced ' + self);
},
onTypingPaused: function(pos, self) {
prettyLog('onTypingPaused ' + pos + ' ' + self);
},
onTypingResumed: function(pos, self) {
prettyLog('onTypingResumed ' + pos + ' ' + self);
},
onReset: function(self) {
prettyLog('onReset ' + self);
},
onStop: function(pos, self) {
prettyLog('onStop ' + pos + ' ' + self);
},
onStart: function(pos, self) {
prettyLog('onStart ' + pos + ' ' + self);
},
onDestroy: function(self) {
prettyLog('onDestroy ' + self);
}
});

document.querySelector('.toggle').addEventListener('click', function() {
typed.toggle();
});
document.querySelector('.stop').addEventListener('click', function() {
typed.stop();
});
document.querySelector('.start').addEventListener('click', function() {
typed.start();
});
document.querySelector('.reset').addEventListener('click', function() {
typed.reset();
});
document.querySelector('.destroy').addEventListener('click', function() {
typed.destroy();
});
document.querySelector('.loop').addEventListener('click', function() {
toggleLoop(typed);
});

var typed2 = new Typed('#typed2', {
strings: [
'Some <i>strings</i> with',
'Some <strong>HTML</strong>',
'Chars &times; &copy;'
],
typeSpeed: 0,
backSpeed: 0,
fadeOut: true,
loop: true
});
document.querySelector('.loop2').addEventListener('click', function() {
toggleLoop(typed2);
});

new Typed('#typed3', {
strings: [
'My strings are: <i>strings</i> with',
'My strings are: <strong>HTML</strong>',
'My strings are: Chars &times; &copy;'
],
typeSpeed: 0,
backSpeed: 0,
smartBackspace: true,
loop: true
});

new Typed('#typed4', {
strings: ['Some strings without', 'Some HTML', 'Chars'],
typeSpeed: 0,
backSpeed: 0,
attr: 'placeholder',
bindInputFocusEvents: true,
loop: true
});

new Typed('#typed5', {
strings: [
'1 Some <i>strings</i> with',
'2 Some <strong>HTML</strong>',
'3 Chars &times; &copy;'
],
typeSpeed: 0,
backSpeed: 0,
shuffle: true,
cursorChar: '_',
smartBackspace: false,
loop: true
});

new Typed('#typed6', {
strings: [
'npm install^1000\n`installing components...` ^1000\n`Fetching from source...`'
],
typeSpeed: 40,
backSpeed: 0,
loop: true
});
});

function prettyLog(str) {
console.log('%c ' + str,
'color: green; font-weight: bold;');
}

function toggleLoop(typed) {
if (typed.loop) {
typed.loop = false;
} else {
typed.loop = true;
}
}
//]]>
</script>
  

Melalui edit-HTML

1. Log-in ke dashboard blogger
2. Theme dan klik “Edit html”
3. Cari “<head>” dan tempelkan jQuery di bawah “<head>”

jika di template kamu sudah terpasang jQuery dan material icon maka jangan lakukan langkah ke tiga ini

4. Masih di situ, dan tempelkan CSS floating chat di bawah <head>
5. Cari </body> dan tempelkan HTML dan JS floating chat di atas </body>

Melalui Layout

1. Log-in ke dashboard blogger
2. Layout dan tambahkan HTML/javascript dimana saja dan tempelkan semua elemen floating chat mulai dari jQuery, CSS, HTML dan selanjutnya JS supaya berjalan dengan normal.

Apa sih perbedaan terhadap dua cara pemasangan floating chat di atas?

Untuk perbedaan ialah, jika menggunakan cara pertama (melalui edit-HTML), memang sih proses pemasangan bisa disebut lebih sulit daripada cara yang kedua (melalui layout), tapi manfaat nya blog kamu akan tetap ringan bila menggunakan cara pertama (edit-HTML).
Sedangkan cara yang kedua (melalui layout) memang lebih mudah daripada cara pertama (melalui edit-HTML), tapi ada kemungkinan proses loading menjadi bertambah berat dan memungkinkan blog menjadi lambat.
Bagaimana mudah bukan, tentunya karena kamu tinggal salin dan tempelkan sesuai langkah yang diberikan, perlu di ingat bila kamu mengalami kesulitan saat pemasangan saya siap membantu demi kenyamanan pengunjung setia saya.
jika misalnya kamu bilang mas, kak “boleh gk saya share di blog saya tentang cara membuat floating chat di blogger material design”. Yups, tentunya boleh tapi saya harapkan buat konten yang orisinil dan harap cantumkan nama author dan website pembuat widget tersebut, supaya tidak terkena pelanggaran.
SHARE

Satu tanggapan untuk “Cara membuat floating chat di blogger otomatis”

  1. Abdul muti berkata:

    Ternyata mudah juga ya hehe terimakasi mas kirman

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *


URL berhasil di salin
Data off atau jaringan lambat
Memuat content..
Lihat versi AMP