Cara Memasang Widget WhatsApp di Blog

GEMA.MY.ID

Sunday, May 9, 2021

Widget WhatsApp Blog - CMS apapun itu, komentar adalah salah satu jenis fitur yang disediakan sebagai metode komunikasi sesama pembaca maupun penulis. Misalnya saja seperti komentar bawaan maupun Disqus.

Tapi layanan diskusi tersebut tidak membuahkan banyak hasil. Pengunjung cenderung malas dengan semua keribetan yang ada. Harus pakai email, verifikasi captcha, tanpa notifikasi, tampilan membosankan, fitur usang, dll.

Rekomendasi: Cara Memasang Notifikasi Cookies di Blog

Apa yang Salah dengan Blog?

Memang tidak adil rasanya jika melihat perbandingan antara audiens YouTube dan blog. Tapi apapun itu, mungkin salah kita juga yang tidak bisa memberikan fitur yang nyaman dan mudah digunakan. Atau, konten yang kita sajikan memang tidak berkualitas / bermanfaat.

Tapi tahukah kamu, ternyata WhatsApp juga bisa digunakan sebagai alat komunikasi di halaman web. Ya, wijet ini diharapkan bisa menjadi solusi di tengah usangnya fitur bawaan yang disediakan.

Siapa sih yang tidak tahu WhatsApp, media sosial ini menjadi salah satu aplikasi dengan jumlah pengguna paling banyak di dunia. Publik figur saja menggunakan WhatsApp, apalagi dengan netizen.

Lalu, bagaimana cara memasang? Mudah, let's go.

Cara Memasang Widget WhatsApp di Blog

Oh iya, skrip berikut diadaptasi langsung dari Jago Desain milik Muhammad Maki. Jangan lupa untuk berkunjung melalui tautan pada bagian referensi.

Masuk ke BLOGGER
Pilih menu TEMA
Pilih EDIT HTML
Tempel di atas </body>:

<input class="waIn" id="waOut" type="checkbox"/>
<label class="waButton" for="waOut">
  <svg class="svg-1" viewBox="0 0 32 32"><g><path d="M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z"></path><path d="M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z"></path></g></svg>
  <svg class="svg-2" viewBox="0 0 512 512"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg>
</label>
<div class="waContainer">
  <div class="waSubContainer">
    <div class="waHeader">
      <svg viewBox="0 0 32 32"><g><path d="M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z"></path><path d="M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z"></path></g></svg>
      <div class="waTitle">Silahkan hubungi kami<span>Online</span></div>
    </div>
    <div class="waInfo">
      <span>Halo, ada yang bisa kami bantu?</span>
      <span class="waTyping">...</span>
    </div>
  </div>
  <a class="waLink" href="https://api.whatsapp.com/send?phone=6285340560450&text=Assalamualaikum,%20dengan%20Feris?" rel="nofollow noopener noreferrer" target="_blank">Mulai</a>
</div>

Tempel di atas ]]></b:skin>:

.waIn,.waButton .svg-2{display:none}
.waButton{position:fixed;display:flex;align-items:center;justify-content:center;width:55px;height:55px;background-color:#20c659;right:20px;bottom:20px;border-radius:50px;overflow:hidden;z-index:20;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.waButton svg{margin:auto;fill:#fff}
.waContainer{position:fixed;width:320px;bottom:70px;right:20px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;opacity:0;visibility:hidden;line-height:normal;z-index:21}
.waSubContainer{background-color:#f7ffff;border-radius:15px;box-shadow:0 0 8px 0 rgba(0,0,0,.08);overflow:hidden}
.waHeader{position:relative;display:flex;align-items:center;background-color:#1ebea5;padding:15px 20px;overflow:hidden}
.waHeader svg{width:32px;height:32px;flex-shrink:0;fill:#fff}
.waHeader .waTitle{padding-left:15px;font-size:14px;color:#fff}
.waHeader .waTitle span{display:block;font-size:11.5px;line-height:1.58em}
.waInfo{display:flex;flex-wrap:wrap;color:#333;font-size:12px;margin:25px 20px}
.waInfo span{display:inline-block;background-color:#eee;margin-right:auto;padding:10px 10px 10px 20px;border-radius:3px 15px 15px}
.waInfo span:after{content:"Baru saja";color:#1ebea5;font-size:9px;margin-left:15px}
.waInfo .waTyping{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.waInfo .waTyping:after{display:none}
.waLink{display:block;background-color:#1ebea5;color:#fff;font-size:13px;margin-top:20px;padding:15px;border-radius:5px;overflow:hidden}
a.waLink:hover{color:#fff}
.waIn:checked+.waButton{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
.waIn:checked+.waButton .svg-1{display:none}
.waIn:checked+.waButton .svg-2{display:block}
.waIn:checked~.waContainer{bottom:90px;opacity:1;visibility:visible}
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}

Pilih SIMPAN
Selesai.

Sesuaikan tampilan dan nomor WhatsApp yang akan digunakan untuk menerima pesan. Semua telah ditandai berdasarkan jenis tampilannya masing-masing.

Demo

Rekomendasi: Cara Memasang Floating Ads di Bagian Bawah Halaman Blog

Penutup

Meningkatkan interaksi antara pembaca dan penulis sebenarnya bisa dilakukan dengan berbagai cara. Sudah banyak sekali plugin atau widget yang tersedia untuk digunakan. Silahkan pilih yang memang sesuai dengan kebutuhan.

Anda bisa pikir sendiri mengapa interaksi tersebut sangat penting untuk keberlangsungan blog kedepannya.

Cukup sekian artikel tentang Cara Memasang Widget WhatsApp di Blog ini, Terima kasih.

Referensi:
www.jagodesain.com / tinyurl.com/bvkarw9a

Cancel