(Update) Cara membuat Tombol WhatsApp, SMS dan Telepon Langsung ke Admin Blog

Cara Membuat Tombol WhatsApp, SMS dan Telepon Langsung ke Admin Blog - Tombol WA, SMS dan Telepon ini sangat berguna untuk Anda yang memiliki blog Online Shop. Bisa dibayangkan jika calon pembeli harus mencatat kontak admin blog, pasti akan merepotkan calon pembeli yang akan membeli Produk yang dijual di Online shop anda. Bahkan jika hal ini dibiarkan, menurut hemat saya, mereka akan malas untuk membeli di Online Shop Anda.

Cara Membuat Tombol Whatsapp, SMS, dan Telepon langsung ke Admin Blog

Kali ini saya akan share Cara membuat tombol WA, SMS dan telepon langsung yang bisa digunakan dipostingan blog Anda, yang akan memudahkan pembeli untuk menghubungi anda sebagai admin.

Langkah Pertama

Tulislah postingan blog seperti biasa

Langkah kedua

Jika anda sudah selesai menulis artikel, gantilah mode dari Compose ke mode HTML di menu Entri baru.

Langkah ketiga
Copy dan paste-kan link dibawah ini


    <div class="beli-lewat-chat">
    <a class="chat-wa" href="https://api.whatsapp.com/send?phone=+6285xxxxxxxx" target="_top">
    <i aria-hidden="true" class="fa fa-whatsapp"> Chat WhatsApp
    </i>
    </a>
    <a class="chat-sms" href="sms:085xxxxxxxxx" target="_top">
    <i aria-hidden="true" class="fa fa-paper-plane"> SMS
    </i>
    </a>
    <a class="chat-phone" href="tel:085xxxxxxxxx" target="_top">
    <i aria-hidden="true" class="fa fa-phone"> Call
    </i>
    </a>
    </div>

Gantilah nomor telepon yang berwarna biru dengan nomor telepon yang bisa dihubungkan dengan Link diatas,

Catatan: tampilan mode Compose dan HTML sangat berbeda, untuk saran saja letakan tombol WA, SMS dan Telepon di akhir postingan. Karena ini memudahkan saat mem-paste-kan kode yang ada di langkah Ketiga.

Langkah Keempat

Kembali ke mode Compose dan Preview hasilnya, jika sudah bagus silahkan publikasikan postingan anda.

DEMO

Jika anda ada cara lain untuk Membuat tombol WhatsApp, SMS dan Telepon langsung ke Admin Blog, silahkan berbagi dengan teman lainnya di bagian komentar. Semoga Bermanfaat dan Selamat mencoba

Update Mei 2019

Hampir sama dengan cara diatas hanya saja link yang di-paste-kan di mode HTML sedikit berbeda dan menurut saya lebih baik, karena dilengkapi dengan gambar yang mendukung dan bisa diatur sesuai kebutuhan anda

Untuk Chat Via WHatsApp bisa menambahkan kode dibawah ini

<left>
<a href="https://api.whatsapp.com/send?phone==+6285xxxxxxxxx&amp;text=PESANANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSWCh9d96Ajo-8UMXgRxRDOWLlrmShOPPjdIh8FM2CjCD3pNoX_dCh0_gpNHdoWSsz1L2igSg43qVJUequNpT_jZOlLnz9tYFvzQ0fKRy2DRgF8Wp8NO2gVVZ3pudBjhY07XTC5zAg02s/s1600/IMG_20190411_180110.png" style="max-width: 55%;" /></a></left>

Untuk Telephone langsung ke Admin Blog silahkan salin kode dibawah ini

<left>
</left><br />
<left><a href="tel:+6285xxxxxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi63ph7nDnxCG4gohyphenhyphenjgxDikLj4vC8fPbAX-lIo7r-1RSmEjMzAy3jjSwj4fsREVDHhhzu3pGllgbZKh8I8Jb0bwb_A2CRtoOgU8KMKqMzUizHx7T0yVjSnvluaU88N57mDvTa-eTtOq56o/s1600/IMG_20190411_172235.png" style="max-width: 55%;" /></a></left>

Untuk SMS ke admin Blog gunakan kode ini

<a href="sms:+6285xxxxxxxxxx?body=PESANANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjsCjM3zewMcwRy_dnlKTqmL_rQreZn2Ujyv38cjzbaIezVEOtlz1OULNSJcxMrfU4oJoBjoJiIllfL6zUJcnFUqHjTu-IiddND4pKRE2nrwr2hxLCpcTGijIH1aSElf0MFEk5O_uYMc0/s1600/IMG_20190411_172850.png" style="max-width: 55%;" /></a></div> 

Catatan:

• Ubahlah yang saya tandai dengan warna Biru dengan Nomor telepon yang bisa dihubungi. 
• Sedangkan untuk warna merah ubahlah menjadi pesan yang akan ditampilkan saat pengunjung men-klik tombol tersebut (jika pesan yang ingin ditampilkan menggunakan spasi, maka gunakan kode %20 dalam penulisannya, contoh: haloo%20saya%20mau%20pesan...)
• Kode berwarna biru bisa disesuaikan dengan ukuran gambar yang diinginkan
• Kode warna ungu bisa anda sesuaikan apakah anda ingin tombol rata kiri, tengah atau kanan

Berbagi :