Tombol WhatsApp dapat mempermudah pembaca untuk menghubungi Anda setelah membaca artikel di situs web Anda.
Dengan menambahkan tombol WhatsApp di setiap postingan artikel, Anda bisa mendapatkan komunikasi yang lebih langsung.
Dan berikut Cara Membuat Tombol WhatsApp di Setiap Postingan Artikel
Langkah 1: Siapkan Kode Tombol WhatsApp
Dalam langkah pertama, siapkan kode tombol WhatsApp yang akan ditempatkan di setiap postingan artikel:
<hr> <div style="position: fixed; bottom: 70px; right: 27px; z-index: 99;"> <a href="https://wa.me/6283155710579" target="_blank" rel="noopener"> <img src="https://www.pengacaraanda.com/wp-content/uploads/2023/08/WA-logo@65x.png" width="40" height="40" alt="Hubungi Kami Melalui WhatsApp" /> </a> </div>
Langkah 2: Tempatkan Kode pada Artikel
Tempatkan kode di bawah setiap artikel pada situs web Anda. Gunakan format html ketika menempelkan kode ini.
<!-- Konten artikel Anda --> <!-- Tempatkan kode tombol WhatsApp di sini --> <hr> <div style="position: fixed; bottom: 70px; right: 27px; z-index: 99;"> <a href="https://wa.me/6283155710579" target="_blank" rel="noopener"> <img src="https://www.pengacaraanda.com/wp-content/uploads/2023/08/WA-logo@65x.png" width="40" height="40" alt="Hubungi Kami Melalui WhatsApp" /> </a> </div>
Dan berikut Cara Membuat Tombol WhatsApp di Website Anda
Penutup
Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan tombol WhatsApp di setiap postingan artikel di situs web Anda. Tombol ini akan memberikan kemudahan bagi pembaca untuk menghubungi Anda melalui WhatsApp dan berbagi tanggapan mereka tentang artikel yang telah mereka baca. Pastikan kode Anda bekerja dengan baik di berbagai perangkat dan browser.
Cobain ini:
<style> .message-box { text-align: center; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background-color: #c7dcff; width: 300px; } .message-box label { display: block; margin-bottom: 10px; font-weight: bold; } .message-box input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 7px; background-color: #e0ecff; } .message-box button { background-color: #007BFF; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } .message-box button:hover { background-color: #0056b3; } </style> <center> <div class="message-box"> <label>Tulis pesan pertama Anda atau biarkan kosong dan klik tombol di bawah untuk kirim pesan via WhatsApp:</label> <input id="pesan" type="text" placeholder="Tulis pesan pertama Anda di sini" /> <button id="kirim" onclick="sendMessage()">Kirim Pesan Via WA</button> </div> <script> function sendMessage() { var pesan = encodeURIComponent(document.getElementById("pesan").value); var link = "https://wa.me/6283155710579?text=" + pesan; window.open(link, "_blank"); } </script> </center>
Dan ini perintah uktuk membuat artikel dengan AI:
Saya hendak membuat artikel yang ditargetkan ke xxxx yang berada di xxxx.Serta tambahkan call to action di bagian akhir.