Skip to main content

Cara Membuat Tombol Chat Whatsapp Melayang Responsive Di Blog

Tombol Chat Whatsapp Melayang Di Blog


Cara Membuat Tombol Chat Whatsapp Melayang Di Blog - Halo guys, kali ini saya akan memberi tahu kalian tentang cara membuat chat whatsapp di blog dengan platform blogger atau blogspot. Namun ini tombol bukan sembarang tombol, disini saya akan memberi tahu cara membuat tombol chat whatsapp yang melayang seperti tombol share melayang amtread.

Fungsi dari adanya tombol chat whatsapp melayang apa sih? Yang paling utama ada supaya memudahkan viewer blog kamu untuk menghubungi kontak whatsapp kamu, sehingga dia tidak perlu lagi repot-repot mengunjungi halaman kontak yang sudah kamu buat.

Baca juga: Penyebab Artikel Terkena Deindex Oleh Google

Jika para viewer blog kamu sudah mudah untuk menghubungi kamu, maka otomatis ia akan mudah bertanya ataupun menawarkan kerjasama antara blog kamu dengan perusahaannya. Wow banget bukan? Oleh karena itu sediakan tombol chat melayang di blog kamu sekarang juga.

Sebenarnya tidak harus tombol chat melayang whatsapp, melainkan messanger, line, gmail, twitter, dan masih banyak lagi yang bisa bisa kamu gunakan selain whatsapp. Namun whatsapp sendiri merupakan aplikasi sosial media paling banyak penggunanya sehingga supaya lebih efektif ialah dengan memasang tombol chat whatsapp yang melayang (fixed). Lalu bagaimana cara membuatnya? Simak di bawah ini.

Baca juga: Cara Memasang Icon Keren Di Menu Bar Blog

Cara Membuat Tombol Chat Whatsapp Melayang Di Blog

1. Pertama-tama buka edit html blog kamu. Oh ya pastikan kamu sudah memasang code untuk mengakses fontawesome. Kalau belum silahkan copy code di bawah ini kemudian paste di atas </body>.

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>


2. Setelah itu copy code html di bawah ini lalu letakkan di bawah <body>.

<!-- html whatsapp contact amtread-->

  <div class="amtread-whatsapp-contact"><a href="https://wa.me/6285891587975?text=Hallo%20admin%20amtread,%20saya%20fans%20kamu" target="_blank" title="Hubungi admin Amtread"><i class="fab fa-whatsapp"></i></a></div>

<!-- Akhir whatsapp contact -->


3. Jika sudah meletakkan kode css, lalu copy code css di bawah ini dan letakkan di bawah <style>.

/* whatsapp contact amtread*/

  .amtread-whatsapp-contact{position:fixed;padding:10px 12px;margin-left:92%;margin-right:5%;z-index:1;background-color:#075e54;margin-top:80vh;text-align:center;border-radius:100%;overflow:hidden;}

  .amtread-whatsapp-contact i{font-size:40px;color:white;}


/* Akhir whatsapp contact */


4. Kemudian kamu setting codenya sesuai anjuran di bawah ini.
  • Angka 6285891587975 bisa kamu ganti dengan nomor whatsapp kamu.
  • Text yang saya beri warna merah bisa kamu ganti dengan tulisan sesuka hati kamu.
  • %20 merupakan simbol yang mewakili spasi di dalam kode (setiap ingin longkap kata, wajib menggunakan %20).
5. Lalu untuk meresponsivekan, kamu copy kode di bawah ini tepat setelah kode css yang tadi kamu paste (di bawah kode css yang tadi kamu copy paste).

@media screen and (max-width:414px){
.amtread-whatsapp-contact{margin-left:80%;}
}

5. Setelah itu kamu tekan tombol save atau simpan kode yang sudah kamu tambahkan di edit html.

Selamat mencoba, dan semoga berhasil. Silahkan komentar di bawah ini mengenai artikel ini dan jika ingin bertanya bisa dengan menuliskannya di kolom komentar.

Baca juga: Cara Mengubah Scrollbar Blog Menjadi Keren

Sekian artikel dari amtread.com mengenai Cara Membuat Tombol Chat Whatsapp Melayang Di Blog menggunakan platform blogger ataupun blogspot. Jangan lupa makan ya, jangan ngurusin blog terus nanti doi ngambek loh hehe.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar