Dari gambar pasti sudah terbayang bagaimana fungsi dan cara kerja widget chatbox ini. Anda dapat menambahkan 2 ke jumlah akun yang tidak terbatas yang akan terhubung ke WhatsApp. Setelah memilih, pengunjung dapat mengetik pesan sebelum akhirnya masuk ke aplikasi whatsapp secara otomatis. Anda harus menginstal widget ini jika Anda membutuhkan lebih dari 2 Layanan Pelanggan.
Untuk cara memasang dan juga menambahkan akun whatsapp, Anda hanya perlu menyalin salah satu kode yang sudah terpasang sebelumnya. Begitu juga untuk warna dan posisi, semuanya bisa dilakukan dengan mudah. Panduan ini akan disertai dengan video agar mudah memahami tutorial ini.
Panduan ini untuk instalasi di Blogger / Blogspot.
Silahkan masuk ke Blogger > Themes > Edit HTML
Letakkan CSS berikut tepat di atas kode : ]]></b:skin>atau</style>
/* 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.netralidshow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);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.netralidshow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);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}
.netralid-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 .netralid-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}Untuk HTML ini bisa ditaruh di Layout > Widget > HTML / Javascript , sebenarnya bisa ditaruh dimana saja, kalau edit HTML bisa di atas kode Javascript di langkah selanjutnya.
Kode bertanda adalah kode yang harus diubah sesuai data kontak. Untuk nomor whatsapp, jangan gunakan tanda plus +, hanya kode negara seperti 62.
<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hello!</h3>
<p>Click one of our representatives below to chat on WhatsApp or send us an email to netralid@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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMkEVG070w1o8PwnjO5VdS47qqZj9-izLhVGHKhUYjpKOrk85rk3Mu5TUv8arIWwC7i2lys3RQnFZ3E6821-Bb7425Q9RYJcqf8GncF395S0c9kJH7SfTkYYcUrk_wQNa8mznfxsD7Z0/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Support</span>
<span class='chat-nama'>Customer Service 1</span>
</div><span class='my-number'>628875820426</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdpW5mhcFs3d-T5uUGU1M9xcuaJDS0T1oDC0tD8qwKoMq4hSpEnSydBS1EyAPgjSH6Mpyzvs-yBc2ZcNABWsWZT4OQP0sNuYBz7iN_6-mdG5Ita4cedIEppzMBBlPJbo5L41_VfXgbNg/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>6222222222</span>
</a>
<!-- Info Contact End -->
<div class='netralid-msg'>Call us to <b>+628875820426</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hello! What can I do for you?</span></div>
<div class='netralid-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='netralidshow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>How can I help you?</a>Kode bertanda adalah kode yang harus diubah sesuai data kontak. Untuk nomor whatsapp, jangan gunakan tanda plus +, hanya kode negara seperti 62.
Letakkan Javascript di bawah tepat di atas kode</body>
Simpan Template.
Font Mengagumkan
jQuery
Widget obrolan WhatsApp ini sangat cocok jika dipadukan dengan template Toko
<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget */
$(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",".netralidshow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>Simpan Template.
Perlu diketahui, font widget ini secara otomatis akan mengikuti font default dari template yang Anda gunakan. Pastikan Anda telah menginstal font khusus dan juga CSS Eksternal seperti Awesome Fonts dan juga jQuery.Jika Anda belum pernah menggunakan Font Awesome dan jQuery, Anda dapat menambahkan kode berikut di atas kode </head> biasanya template versi terbaru sudah menggunakan Font Awesome (Icons) dan jQuery.
DEMO Langsung - Klik Di Sini
Font Mengagumkan
<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>Widget obrolan WhatsApp ini sangat cocok jika dipadukan dengan template Toko
Di lansir Dari Wikipedia Partai Majelis Syuro Muslimin Indonesia atau disingkat menjadi Masyumi, adalah sebuah partai politik Islam terbesar di Indonesia selama Era Demokrasi Liberal di Indonesia. Partai ini dilarang pada tahun 1960 oleh Presiden Sukarno karena diduga mendukung pemberontakan PRRI.
Masyumi adalah nama yang diberikan kepada sebuah organisasi yang dibentuk oleh Jepang yang menduduki Indonesia pada tahun 1943 dalam upaya mereka untuk mengendalikan umat Islam di Indonesia.[2] Tidak lama setelah Proklamasi Kemerdekaan Indonesia, pada tanggal 7 November 1945 sebuah organisasi baru bernama Masyumi terbentuk. Dalam waktu kurang dari setahun, partai ini menjadi partai politik terbesar di Indonesia. Masyumi termasuk dalam kategori organisasi Islam, sama seperti Nahdlatul Ulama dan Muhammadiyah. Selama periode demokrasi liberal, para anggota Masyumi duduk di Dewan Perwakilan Rakyat dan beberapa anggota dari partai ini terpilih sebagai Perdana Menteri Indonesia, seperti Muhammad Natsir dan Burhanuddin Harahap.
Masyumi menduduki posisi kedua dalam pemilihan umum 1955. Mereka memenangkan 7.903.886 suara, mewakili 20,9% suara rakyat,[4] dan meraih 57 kursi di parlemen. Masyumi termasuk populer di daerah modernis Islam seperti Sumatra Barat, Jakarta, dan Aceh. 51,3% suara Masyumi berasal dari Jawa, tetapi Masyumi merupakan partai dominan untuk daerah-daerah di luar Jawa, dan merupakan partai terdepan bagi sepertiga orang yang tinggal di luar Jawa.[5][6] Di Sumatra, Kalimantan, dan Sulawesi, Masyumi memperoleh jumlah suara yang signifikan. Di Sumatra, 42,8% memilih Masyumi,[7] kemudian jumlah suara untuk Kalimantan mencapai 32%,[8] sedangkan untuk Sulawesi mencapai angka 33,9%.[9]
Pada tahun 1958, beberapa anggota Masyumi bergabung dengan pemberontakan PRRI terhadap Soekarno. Sebagai hasilnya, pada tahun 1960 Masyumi —bersama dengan Partai Sosialis Indonesia— dilarang.[10]
Setelah pelarangan tersebut, para anggota dan pengikut Masyumi mendirikan Keluarga Bulan Bintang untuk mengkampanyekan hukum syariah dan ajarannya. Sebuah upaya untuk membangkitkan kembali partai ini selama masa transisi ke Orde Baru sempat dilakukan, tetapi tidak diizinkan. Setelah kejatuhan Soeharto pada tahun 1998, upaya lain untuk membangkitkan partai ini kembali dilakukan, tetapi para pengikut Masyumi mendirikan Partai Bulan Bintang, yang berpartisipasi dalam pemilihan legislatif tahun 1999, 2004, dan 2009.
Sumber : https://id.m.wikipedia.org/wiki/Partai_Masyumi
Langganan:
Postingan (Atom)