Maniac-blog

I accept ads placement / content placement services on my website (backlink). you can contact me via WhatsApp
Go - Maniac-developer Homepage Berita Bisnis Blogging Internet Pemrograman Sosial Media Teknologi Tips dan trik Tutorial Blogspot Tutorial Wordpress About Me / Contact Me Privacy Policy Term Of Service
2008100915063905.jpg
- Tutorial Blogspot

Membuat Tombol Chat Whatsapp - Blogspot

Hallo sahabat blog!

Pada kesempatan kali ini saya akan berbagi informasi tentang cara membuat tombol chat whatsApp di blogger . Pada tutorial kali ini sedikit berbeda dari sebelumnya yang dimana pada sebelumnya banyak pilihan untuk melakukan chat dalam satu kotak Live Chat. 


Script tombol chat whatsApp ini saya dapatkan dari rekan saya yaitu idblanter.com dan sedikit saya modifikasi warnanya supaya adanya perbedaan.


Baiklah, tanpa basa-basi lagi langsung sajake tutorialnya dibawah ini:

1. Login ke akun blogger anda

2. Pada sidebar sebelah kiri pilih Tema > Edit Html

3. Silahkan anda copy kode CSS dibawah ini, dan letakan tepat diatas kode </head>


<style type="text/css">
    /* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.sundakushow-chat{background:linear-gradient(to right);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.sundakushow-chat{background:
linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size: 320% 200%;-webkit-animation:
Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation:
Gradient 15s ease infinite;}@-webkit-keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes
Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
a.sundakushow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#303254,#33b745);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:"f232";z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.sundaku-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:"Arial",sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .sundaku-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
</style>

4. Kemudian anda pergi ke Tata Letak > Tambahkan Widget > HTML/JavaScript > Salin code HTML dibawah ini dan letakan di konten, untuk judul dikosongkan saja lalu simpan/save widget.

<div id="whatsapp-chat" class="hide">
<div class="header-chat">
<div class="head-home"><h3>Hello!</h3>
<p>Klik salah satu perwakilan kami di bawah untuk mengobrol di WhatsApp atau mengirim email kepada kami sundaku.mail@gmail.com</p></div>
<div class="get-new hide"><div id="get-label"></div><div id="get-nama"></div></div></div>
<div class="home-chat">
<!-- Info Contact Start -->
<a class="informasi" href="javascript:void" title="Chat Whatsapp">
<div class="info-avatar"><img src="https://1.bp.blogspot.com/-AaHoL_OFlFw/XgWsBg9NtGI/AAAAAAAAAOM/N5unScwLPZUNxhzEkJUAo-c6zKCR1M-ZACLcBGAsYHQ/s320/512.jpg"/></div>
<div class="info-chat">
<span class="chat-label">Admin1</span>
<span class="chat-nama">Sundaku</span>
</div><span class="my-number">6281585398339</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class="informasi" href="javascript:void" title="Chat Whatsapp">
<div class="info-avatar"><img src="https://1.bp.blogspot.com/-S9MualVdF3s/Xe-RnP3WKeI/AAAAAAAAAKg/SL8CBDAtfiMj7QTJY5oHvT0zm74Apn62ACLcBGAsYHQ/s1600/20191210_193606.png"/></div>
<div class="info-chat">
<span class="chat-label">Admin2</span>
<span class="chat-nama">Calon Desain</span>
</div><span class="my-number">6281585398339</span>
</a>
<!-- Info Contact End -->
<div class="sundaku-msg">Call us to <b>+6281585398339</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class="start-chat hide">
<div class="first-msg"><span>Halo! Apa yang bisa saya lakukan untuk Anda?</span></div>
<div class="sundaku-msg"><textarea id="chat-input" placeholder="Write a response" maxlength="120" row="1"></textarea>
<a href="javascript:void;" id="send-it">Kirim</a></div></div>
<div id="get-number"></div><a class="close-chat" href="javascript:void">×</a>
</div>
<a class="sundakushow-chat" href="javascript:void" title="Show Chat"><i class="fab fa-whatsapp"></i>Apa yang bisa saya bantu?</a>


5. Pada kode HTML diatas, yang saya blok warna biru silahkan anda ganti kata-katanya ataupun link gambar dan no hp sesuai dengan yang anda inginkan.


6. Langkah terakhir anda kembali lagi ke tema > edit html, kemudian copy kode JavaScript dibawah ini dan letakan tepat diatas kode </body>

<script type="text/javascript">
//<![CDATA[
/* Whatsapp Chat Widget by www.sundaku.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, "_blank")}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".sundakushow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

7. Simpan template dan lihat hasilnya.
Jika template anda tidak menggunakan Icon Fontawesome dan jQuery, anda bisa menambahkannya dibawah ini dan letakan diatas kode </head>


Fontawesome:
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" type="text/css"/>

jQuery: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Butuh Hosting

Jika ingin membeli hosting menggunakan refferall kami , Anda akan mendapatkan 1 layanan gratis dari saya pribadi yaitu , saya akan membuat desain website HTML menggunakan Bootstrapstudio untuk anda secara gratis (Cuma cuma) Whatsapp Saya

Hosting Unlimited Indonesia

Maybe You Like


Membuat Tombol Chat Whatsapp - Blogspot
Pubdate : , Tutorial Blogspot

Contact Form atau dalam Bahasa Indonesia formulir kontak adalah sebuah formulir yang dapat digunakan pengunjung blog untuk mengirim pesan atau menghubungi admin blog. Anda sebaiknya membuat contact form pada blog Anda sehingga pengunjung dapat menjangkau Anda dengan mudah. Contact Form dianjurkan untuk dibuat pada sebuah halaman statis tersendiri. Kemudian link nya ditaruh di menu navigasi

Membuat Tombol Chat Whatsapp - Blogspot
Pubdate : , Tutorial Blogspot

Google Analytics adalah layanan gratis buatan Google yang berfungsi untuk memantau traffic blog dan menampilkan data statistik yang lengkap dan akurat. Dengan menggunakan Google Analytics, Anda akan mendapatkan data berupa visitor online, jumlah pengunjung, pageviews, bounce rate, referring site, waktu kunjungan rata-rata dan lainnya. Maka sebaiknya Anda mengetahui bagaimana cara memasang kode Goo

Membuat Tombol Chat Whatsapp - Blogspot
Pubdate : , Tutorial Blogspot

Untuk mengetahui statistik blog dan traffic blog Anda dapat menggunakan fasilitas yang sudah disediakan Blogger di menu Statistik. Namun, banyak yang menilai bahwa fasilitas statistik bawaan Blogger tersebut sangat terbatas dan kurang akurat. Oleh karena itu, banyak orang yang kemudian menggunakan Histats. Jika Anda juga ingin mengetahui statistik blog Anda menggunakan Histats, maka Anda wajib h

Membuat Tombol Chat Whatsapp - Blogspot
Pubdate : , Tutorial Blogspot

Icon merupakan simbol dan identitas dari suatu produk, brand atau merk. Setiap brand perlu memiliki sebuah ikon, begitu pun dengan blog. Secara default, blog yang Anda miliki di Blogger menggunakan icon dari Blogger itu sendiri yang berbentuk simbol huruf “B” berwarna orange. Semua blog yang dibuat menggunakan platform Blogger secara otomatis menggunakan ikon tersebut. Tentu

Hai Sahabat Maniac . Pasang Aplikasi hanya 3 detik untuk membantu anda membaca setiap harinya . Pasang App