➥✪ Kode HTML Whatsapp
Tutorial ini membahas tentang Cara Membuat Kode HTML Whatsapp yang bisa Teman-Teman gunakan pada artikel blog, pada postingan penjualan dan lain sebagainya.
Karena kode HTML pada Whatsapp ini sebenarnya ada link WA yang kita berikan anchro teks ataupun anchro berupa gambar logo/icon Whatsapp sehingga memudahkan orang lain untuk menghubungi kita melalui WA.
Dalam membuat link WA dengan kode HTML dan menerapkannya di postingan website atau blog, kita harus membuat postingan dalam bentuk HTML.
Kalau di Blogger bisa dengan mengubahnya dulu ke Tampilan HTML saat membuat artikel dan kalau di Wordpress kita jadikan dulu edit sebagai HTML juga.
Kode HTML Whatsapp
Untuk menambahkan kode HTML pada blog atau website sehingga menjadi sebuah tombol WA yang menarik dan bagus untuk di klik, silakan Teman-Teman ikuti tutorial berikut ini.
Menambahkan tombol Whatsapp dengan Teks
Untuk membuat tombol chat whatsapp dalam bentuk teks, Kalian perlu memahami dulu format penulisannya.
Untuk penulisan atau pembahasan mengenai link WA silakan baca dulu artikel yang sudah Admin terbitkan sebelumnya tentang Cara Membuat Link ke Whatsapp.
Script HTML Link WA secara umum yaitu ada 2 jenis, menggunakan wa.me dan juga menggunakan api.whatsapp.com
Dalam artikel ini akan Admin contohkan script link HTML dalam membuat tombol WA dengan kedua alamat website tersebut.
Format Tombol WA dengan wa.me
Template yang bisa Teman-Teman pakai untuk buat link WA dengan HTML yaitu :
<a href="https://wa.me/nomorHP">AnchorTeks</a>
Kemudian untuk AnchorTeks adalah teks yang akan ditampilkan untuk menjadi tombol WA. Misalnya saja dengan kata-kata Hubungi di Whatsapp, Chat melalui WA atau lainnya.
Contoh penulisannya yaitu
<a href="https://wa.me/6281234567890">Hubungi melalui Whatsapp</a>
Sebenarnya kalau Kalian seorang blogger, format penulisan tersebut adalah seperti kita menambahkan link dalam postingan blog dengan anchor teks tertentu dan menuju ke alamat link WA.
Template membuat tombol Whatsapp dengan api.whatsapp.com
Format menambahkan tombol whatsapp yang ini yaitu hanya link tujuannya saja yang diubah.
Untuk format anchor teksnya bisa sama saja atau disesuaikan dengan keinginan Kalian ya.
Formatnya yaitu :
<a href="https://api.whatsapp.com/send?phone=nomorHP">AnchorTeks</a>
Sama ketentuannya pada wa.me di atas bahwa untuk NomorHP bisa diisi dengan nomor HP dalam format internasional, AnchorTeks disesuaikan juga sesuai kebutuhan.
Contoh penulisan dengan format api whatsapp ini sebagai berikut :
<a href="https://api.whatsapp.com/send?phone=6281234567890">Hubungi Kami melalui WA</a>
Penulisan format dan contoh diatas sengaja Admin tuliskan dalam blockquote supaya Kalian bisa copy dan paste kode HTML untuk WA tersebut, sehingga Teman-Teman mudah dalam memodifikasi sesuai kebutuhan Kalian.
Membuat tombol WA dengan Gambar
Supaya lebih menarik pelanggan atau calon customer, sebaiknya Kalian perlu juga mempertimbangkan opsi menambahkan tombol WA dalam bentuk gambar.
Terlihat lebih interaktif juga sih dengan mengganti tombol Whatsapp menggunakan gambar, apalagi jika dikombinasikan dengan kata-kata ajakan yang membuat pengunjung blog atau website menjadi penasaran untuk menghubungi melalui WA.
Seperti apa format penulisannya?
Buat Gambar Tombol WA dengan WA.ME
Supaya lebih menarik orang lain untuk menghubungi dengan WA, format untuk penulisannya yaitu :
<a href="https://wa.me/nomorHP"><img src="LinkLogoWA"></a>
Keterangan :
- NomorHP, seperti biasa itu merupakan format internasional nomor HP yang ada WA nya, misalnya nomor HP Kalian adalah 081234567890 maka ubah pada penulisan diatas menjadi 6281234567890;
- LinkLogoWA adalah link logo atau icon atau foto Whatsapp dimana logo itu ditempatkan, kita bisa menguploadnya terlebih dahulu dan dapatkan URL link dari logo WA tersebut.
Misalnya saja link logo WA nya adalah https://blogmu.com/logo-wa.png, dimana blogmu.com merupakan link blog atau website Teman-Teman.
Contoh penulisannya yaitu
<a href="https://wa.me/6281234567890"><img src="https://blogmu.com/logo-wa.png"></a>
Menambahkan Icon Whatsapp di Blog dengan api.whatsapp.com
Kalau Kalian mau membuat tombol WA dengan alamat api.whatsapp.com tinggal ubah saja format https://wa.me/nomorHP menjadi https://api.whatsapp.com/send?phone=nomorHP
Sehingga penulisan formatnya menjadi seperti berikut ini :
<a href="https://api.whatsapp.com/send?phone=nomorHP"><img src="LinkLogoWA"></a>
Contoh penulisan secara lengkapnya yaitu
<a href="https://api.whatsapp.com/send?phone=6281234567890"><img src="https://blogmu.com/logo-wa.png"></a>
Hasil atau contoh logo dari tutorial ini silakan bisa dilihat selengkapnya pada video tutorial dibawah. Jadi Kalian harus stay tune dan tonton video tersebut dari awal hingga akhir supaya lebih mudah memahaminya.
Video Tutorial Membuat Kode HTML Whatsapp
Supaya Teman-Teman lebih memahami dalam tutorial membuat kode HTML untuk Whatsapp di postingan blog atau menambahkannya dalam widget blog atau website, silakan lihat pada tutorial dibawah ini.
Jangan lupa untuk bagikan video tersebut ke orang lain, terutama bagi Teman-Teman yang sedang merintis jualan online yang memanfaatkan media website atau blog.
Dengan adanya tutorial dalam bentuk video, Admin berharap apa yang dituliskan dalam artikel ini semuanya dapat dipahami dan bisa dipraktekkan secara langsung oleh Teman-Teman dan Kalian mendapatkan nilai lebih dan nilai tambah dari artikel yang Admin buat ini.
Penutup
Demikian Teman-Teman cara membuat Kode HTML Whatsapp yang bisa Admin bagikan.
Dengan opsi menambahkan kode HTML untuk Whatsapp pada postingan blog berupa teks maupun gambar, semoga Kalian bisa menambahkan sendiri pada blog atau website Kalian agar lebih menarik.
Semoga dengan adanya tutorial dalam bentuk video, Kalian bisa dengan mudah memahami dan mempraktekkannya, jangan lupa subscribe di channel tersebut ya.
Semoga bermanfaat!