Cara Membuat Tombol Chat WhatsApp dengan Gambar di Blogger Terbaru 2026

Halo, Sobat Blogger!

Pada kesempatan kali ini, saya akan membagikan tutorial lengkap mengenai cara membuat tombol Chat WhatsApp dengan gambar di Blogger. Tombol ini nantinya dapat diklik oleh pengunjung dan secara otomatis akan mengarahkan mereka menuju halaman percakapan WhatsApp admin.

Fitur seperti ini sangat cocok dipasang pada blog bisnis, toko online, website jasa, blog pribadi, landing page, website kuliner, maupun blog yang menjual produk digital. Dengan adanya tombol WhatsApp, pengunjung tidak perlu menyalin dan menyimpan nomor admin secara manual. Mereka cukup menekan gambar atau tombol yang tersedia, kemudian aplikasi WhatsApp akan terbuka secara otomatis.

Selain mengarahkan pengunjung menuju chat, kita juga dapat menambahkan pesan otomatis. Misalnya:

Halo Admin, saya ingin bertanya mengenai produk yang tersedia.

Pesan tersebut akan langsung muncul di kolom percakapan WhatsApp sehingga calon pelanggan hanya perlu menekan tombol kirim.

Tutorial ini dapat digunakan untuk Blogger versi terbaru tahun 2026 dan bisa dipasang melalui halaman statis, postingan, sidebar, footer, maupun menu Tata Letak Blogger.

Mengapa Tombol WhatsApp Penting untuk Blog?

Kontak merupakan salah satu bagian penting yang sebaiknya tersedia pada sebuah blog, terutama apabila blog tersebut digunakan untuk menawarkan produk atau jasa.

Keberadaan informasi kontak menunjukkan bahwa sebuah website memiliki pengelola yang jelas. Pengunjung juga akan merasa lebih percaya karena mereka mengetahui cara menghubungi pemilik blog ketika membutuhkan bantuan.

Pada umumnya, sebuah blog profesional mempunyai beberapa jenis kontak, seperti:

1. Nomor WhatsApp aktif.
2. Alamat email.
3. Formulir kontak.
4. Akun media sosial.
5. Alamat toko atau tempat usaha apabila tersedia.

Dari beberapa jenis kontak tersebut, WhatsApp menjadi salah satu pilihan yang paling praktis. Sebagian besar pengguna internet di Indonesia sudah menggunakan WhatsApp sehingga proses komunikasi antara pengunjung dan admin dapat berlangsung lebih cepat.

Tombol WhatsApp juga sangat berguna untuk meningkatkan peluang terjadinya pemesanan. Ketika pengunjung tertarik pada produk yang ditawarkan, mereka dapat langsung menghubungi penjual tanpa harus mencari halaman kontak terlebih dahulu.

Cara Kerja Tombol Chat WhatsApp

Tombol yang akan kita buat menggunakan tautan Click to Chat WhatsApp dengan format berikut:

https://wa.me/6281234567890

Angka 6281234567890 merupakan contoh nomor WhatsApp dengan format internasional.

Untuk nomor Indonesia, angka 0 pada bagian depan nomor harus diganti menjadi 62.

Contohnya:

081234567890

Diubah menjadi:

6281234567890

Jangan menggunakan tanda tambah, spasi, tanda kurung, atau tanda hubung pada nomor tersebut.

Format yang benar:

6281234567890

Format yang salah:

+62 812-3456-7890

WhatsApp menjelaskan bahwa fitur Click to Chat menggunakan nomor lengkap dalam format internasional tanpa angka nol di depan, tanda kurung, spasi, atau tanda hubung.

Membuat Link WhatsApp dengan Pesan Otomatis

Selain menggunakan nomor WhatsApp, kita dapat menambahkan teks atau pesan otomatis pada tautan tersebut.

Contohnya:

https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya.

Ketika link tersebut diklik, kolom pesan WhatsApp akan terisi dengan tulisan:

Halo Admin, saya ingin bertanya.

Pada alamat URL, spasi tidak dapat ditulis seperti teks biasa. Oleh karena itu, spasi perlu diganti menggunakan kode %20.

Beberapa kode yang sering digunakan antara lain:

%20 = spasi
%0A = baris baru
%2C = tanda koma
%3A = tanda titik dua

Contoh pesan yang lebih lengkap:

https://wa.me/6281234567890?text=Halo%20Admin%2C%0ASaya%20ingin%20bertanya%20mengenai%20produk%20yang%20tersedia.

Hasil pesan yang muncul di WhatsApp:

Halo Admin,
Saya ingin bertanya mengenai produk yang tersedia.

Kode Tombol Chat WhatsApp dengan Gambar

Berikut kode dasar yang dapat digunakan untuk membuat gambar yang bisa diklik dan langsung menuju chat WhatsApp:

<div style="text-align:center;">
  <a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya."
     target="_blank"
     rel="noopener noreferrer"
     aria-label="Chat dengan admin melalui WhatsApp">
     
    <img src="URL-GAMBAR-WHATSAPP"
         alt="Chat dengan Admin melalui WhatsApp"
         width="300"
         height="auto"
         loading="lazy"
         style="max-width:100%;height:auto;border:0;" />
  </a>
</div>

Sebelum memasangnya, silakan ganti beberapa bagian berikut:

1. Ganti Nomor WhatsApp

Ganti nomor:

6281234567890

dengan nomor WhatsApp milik Anda.

Pastikan nomor menggunakan kode negara 62 dan tidak menggunakan angka nol pada bagian depan.

2. Ganti Pesan Otomatis

Bagian berikut merupakan pesan yang akan muncul secara otomatis:

Halo%20Admin%2C%20saya%20ingin%20bertanya.

Anda dapat menggantinya dengan kalimat lain, misalnya:

Halo%20Admin%2C%20saya%20ingin%20memesan%20produk.

Atau:

Halo%20Admin%2C%20apakah%20produk%20ini%20masih%20tersedia?

3. Ganti URL Gambar

Ganti tulisan:

URL-GAMBAR-WHATSAPP

dengan alamat gambar tombol WhatsApp milik Anda.

Contohnya:

<img src="https://blogger.googleusercontent.com/img/contoh-gambar-whatsapp.png"

Anda bisa mengunggah gambar melalui postingan Blogger terlebih dahulu. Setelah gambar berhasil diunggah, salin alamat gambar tersebut dan masukkan ke dalam kode.

Sebaiknya gunakan gambar berformat PNG atau WebP agar tampilannya lebih tajam dan ukuran file tetap ringan.

Cara Memasang Tombol WhatsApp di Halaman Statis Blogger

Cara pertama adalah memasang tombol WhatsApp melalui halaman statis. Metode ini cocok untuk membuat halaman khusus seperti Hubungi Kami, Kontak Admin, Customer Service, Pemesanan, atau Order melalui WhatsApp.

Blogger menyediakan halaman untuk konten yang bersifat tetap, seperti halaman Tentang dan Kontak. Halaman tersebut dapat ditampilkan sebagai menu atau tautan pada bagian tertentu di blog.

Ikuti langkah berikut:

1. Login ke akun Blogger.
2. Pilih blog yang akan diedit.
3. Klik menu Halaman.
4. Klik tombol Halaman Baru.
5. Beri judul halaman, misalnya Hubungi Kami.
6. Ubah tampilan editor dari mode Menulis ke mode HTML.
7. Salin kode tombol WhatsApp.
8. Tempelkan kode tersebut ke dalam editor HTML.
9. Klik Pratinjau untuk memeriksa hasilnya.
10. Apabila sudah sesuai, klik Publikasikan.

Kode yang dapat digunakan:

<div style="text-align:center;margin:25px 0;">
  <a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya."
     target="_blank"
     rel="noopener noreferrer"
     aria-label="Hubungi admin melalui WhatsApp">

    <img src="URL-GAMBAR-WHATSAPP"
         alt="Tombol Chat WhatsApp"
         width="300"
         height="auto"
         loading="lazy"
         style="display:inline-block;max-width:100%;height:auto;border:0;" />
  </a>
</div>

Setelah halaman dipublikasikan, buka halaman tersebut dan tekan gambar WhatsApp untuk memastikan nomor serta pesan otomatisnya sudah benar.

Cara Memasang Tombol WhatsApp melalui Tata Letak Blogger

Cara kedua adalah memasang tombol WhatsApp melalui menu Tata Letak. Metode ini cocok apabila tombol ingin ditampilkan pada sidebar, footer, bagian bawah header, atau area lain yang disediakan oleh template.

Blogger masih menyediakan penambahan gadget melalui menu Tata Letak. Pengguna dapat memilih lokasi gadget, menambahkan gadget yang diperlukan, kemudian menyimpan pengaturannya.

Berikut langkah-langkahnya:

1. Login ke Dashboard Blogger.
2. Pilih blog yang ingin diedit.
3. Klik menu Tata Letak.
4. Tentukan lokasi tombol WhatsApp.
5. Klik Tambahkan Gadget.
6. Pilih gadget HTML/JavaScript.
7. Masukkan judul gadget apabila diperlukan.
8. Tempelkan kode tombol WhatsApp pada kolom konten.
9. Klik Simpan.
10. Simpan kembali pengaturan Tata Letak.
11. Buka blog dan periksa tampilannya.

Kode yang digunakan tetap sama:

<div style="text-align:center;padding:10px 0;">
  <a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya."
     target="_blank"
     rel="noopener noreferrer">

    <img src="URL-GAMBAR-WHATSAPP"
         alt="Klik untuk Chat WhatsApp"
         width="280"
         height="auto"
         loading="lazy"
         style="max-width:100%;height:auto;border:0;" />
  </a>
</div>

Apabila tombol terlalu besar, ubah nilai:

width="280"

menjadi:

width="220"

Sebaliknya, jika tombol terlihat terlalu kecil, nilainya dapat dinaikkan menjadi 300, 350, atau menyesuaikan lebar area blog.

Cara Memasang Tombol WhatsApp di Dalam Postingan

Tombol WhatsApp juga dapat dipasang di dalam artikel. Penempatan ini sangat cocok untuk artikel penjualan, halaman promosi, katalog produk, informasi jasa, maupun landing page.

Langkah-langkahnya:

1. Buka menu Postingan.
2. Buat postingan baru atau buka artikel yang ingin diedit.
3. Pilih lokasi tombol.
4. Ubah editor menjadi mode HTML.
5. Tempelkan kode tombol WhatsApp.
6. Kembali ke tampilan Menulis untuk memeriksa posisinya.
7. Klik Pratinjau.
8. Publikasikan atau perbarui artikel.

Anda dapat menempatkan tombol setelah penjelasan produk atau di bagian akhir artikel.

Contoh kalimat ajakan:

<p style="text-align:center;">
  Tertarik dengan produk ini? Silakan hubungi kami melalui WhatsApp.
</p>

<div style="text-align:center;margin:20px 0;">
  <a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20tertarik%20dengan%20produk%20ini."
     target="_blank"
     rel="noopener noreferrer">

    <img src="URL-GAMBAR-WHATSAPP"
         alt="Pesan Produk melalui WhatsApp"
         width="300"
         height="auto"
         loading="lazy"
         style="max-width:100%;height:auto;" />
  </a>
</div>

Membuat Tombol WhatsApp Tanpa Gambar

Apabila tidak memiliki gambar, Anda dapat menggunakan tombol berbentuk teks dengan desain sederhana.

Gunakan kode berikut:

<div style="text-align:center;margin:25px 0;">
  <a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%20saya%20ingin%20bertanya."
     target="_blank"
     rel="noopener noreferrer"
     style="display:inline-block;
            background:#25D366;
            color:#ffffff;
            padding:14px 24px;
            border-radius:8px;
            font-size:16px;
            font-weight:700;
            text-decoration:none;
            box-shadow:0 4px 12px rgba(0,0,0,.15);">
    Chat Admin via WhatsApp
  </a>
</div>

Tombol tersebut akan berwarna hijau dan tetap terlihat baik pada perangkat komputer maupun smartphone.

Membuat Pesan WhatsApp untuk Pemesanan Produk

Untuk blog toko online, pesan otomatis dapat dibuat lebih lengkap agar admin mudah memahami permintaan calon pembeli.

Contohnya:

<a href="https://wa.me/6281234567890?text=Halo%20Admin%2C%0ASaya%20ingin%20melakukan%20pemesanan.%0A%0ANama%3A%20%0AProduk%3A%20%0AJumlah%3A%20"
   target="_blank"
   rel="noopener noreferrer">
  Pesan melalui WhatsApp
</a>

Pesan yang muncul:

Halo Admin,
Saya ingin melakukan pemesanan.

Nama:
Produk:
Jumlah:

Calon pelanggan tinggal melengkapi data tersebut sebelum mengirimkannya kepada admin.

Tips Memasang Tombol WhatsApp agar Lebih Efektif

Agar tombol WhatsApp benar-benar membantu meningkatkan komunikasi dan pemesanan, perhatikan beberapa hal berikut.

Gunakan Nomor yang Selalu Aktif

Pastikan nomor yang dicantumkan merupakan nomor WhatsApp aktif dan sering diperiksa. Jangan menggunakan nomor yang sudah tidak digunakan karena dapat membuat pengunjung kehilangan kepercayaan.

Gunakan Pesan yang Jelas

Buat pesan otomatis yang sesuai dengan tujuan halaman. Apabila tombol dipasang pada halaman produk, masukkan nama produk pada pesan otomatis.

Contoh:

Halo Admin, saya tertarik dengan Template Blogger Premium.

Gunakan Gambar yang Ringan

Jangan menggunakan gambar dengan ukuran file terlalu besar. Gambar yang berat dapat memperlambat waktu muat halaman. Kompres gambar sebelum diunggah dan gunakan ukuran yang sesuai.

Tambahkan Teks Alternatif

Gunakan atribut alt pada gambar, misalnya:

alt="Chat dengan Admin melalui WhatsApp"

Teks alternatif membantu mesin pencari memahami isi gambar dan meningkatkan aksesibilitas halaman.

Periksa Link Setelah Dipasang

Selalu uji tombol menggunakan smartphone dan komputer. Pastikan link membuka nomor WhatsApp yang benar dan pesan otomatis tampil sesuai keinginan.

Jangan Memasang Terlalu Banyak Tombol

Tombol WhatsApp memang berguna, tetapi jangan memasangnya terlalu banyak dalam satu halaman. Penempatan yang berlebihan dapat mengganggu kenyamanan pembaca.

Lokasi yang biasanya paling efektif adalah:

• Setelah penjelasan produk.
• Pada akhir artikel.
• Di halaman kontak.
• Pada sidebar.
• Di bagian footer.
• Sebagai tombol mengambang di sudut layar.

Mengatasi Tombol WhatsApp yang Tidak Berfungsi

Apabila tombol tidak dapat membuka chat WhatsApp, periksa beberapa kemungkinan berikut.

Pertama, pastikan nomor menggunakan format internasional. Nomor Indonesia harus diawali 62, bukan 0.

Kedua, hapus spasi, tanda tambah, dan tanda hubung pada nomor.

Ketiga, periksa apakah terdapat tanda kutip atau karakter HTML yang hilang.

Keempat, pastikan kode ditempelkan melalui mode HTML, bukan hanya ditampilkan sebagai teks biasa.

Kelima, periksa URL gambar. Apabila gambar tidak muncul, kemungkinan alamat gambar salah, sudah dihapus, atau tidak dapat diakses secara publik.

Keenam, bersihkan cache browser dan buka kembali halaman blog.

Kesimpulan

Memasang tombol Chat WhatsApp dengan gambar di Blogger merupakan salah satu cara sederhana untuk mempermudah komunikasi antara pengunjung dan admin blog.

Dengan menggunakan fitur ini, pengunjung tidak perlu menyimpan nomor WhatsApp terlebih dahulu. Mereka cukup menekan gambar atau tombol yang tersedia, kemudian halaman percakapan WhatsApp akan terbuka secara otomatis.

Tombol tersebut dapat dipasang melalui halaman statis, postingan, sidebar, footer, maupun menu Tata Letak Blogger. Anda juga dapat menambahkan pesan otomatis agar proses tanya jawab dan pemesanan menjadi lebih cepat.

Pastikan nomor WhatsApp ditulis dalam format internasional, gunakan gambar yang ringan, tambahkan teks alternatif pada gambar, dan selalu periksa tombol setelah dipasang.

Demikian tutorial mengenai cara membuat tombol Chat WhatsApp dengan gambar di Blogger terbaru 2026. Semoga artikel ini bermanfaat dan dapat membantu Anda membuat blog yang terlihat lebih profesional serta lebih mudah dihubungi oleh pengunjung.

Selamat mencoba!