Panduan Memasang Tombol WhatsApp Melayang di Sebelah Kiri Bawah pada CMS Sekolahku

November 4, 2025Wawasan

Fitur tombol WhatsApp melayang (floating button) sangat berguna untuk memudahkan pengunjung website menghubungi pihak sekolah secara langsung.
Di CMS Sekolahku, kita bisa menambahkan tombol ini dengan menempelkan sedikit kode HTML, CSS, dan JavaScript tanpa perlu plugin tambahan.

Panduan berikut akan menjelaskan langkah demi langkah cara memasang tombol WhatsApp melayang di sebelah kiri bawah halaman website CMS Sekolahku.

Daftar Isi

🧩 Langkah 1: Siapkan Nomor WhatsApp Sekolah

Pastikan Anda sudah memiliki nomor WhatsApp resmi sekolah, misalnya:

TU Sekolah: 6281234567890
Guru BK: 6289876543210
Kepala Sekolah: 6281122334455

Nomor tersebut harus menggunakan format internasional tanpa tanda + dan tanpa angka 0 di depan.
Contoh:
+62 812-3456-7890 → tulis menjadi 6281234567890

⚙️ Langkah 2: Buka File Template Footer CMS Sekolahku

Biasanya CMS Sekolahku menggunakan file template di folder seperti:

atau

Buka file tersebut menggunakan editor (misal: Notepad++, VS Code, atau editor bawaan CMS Sekolahku).

💻 Langkah 3: Tempelkan Kode Tombol WhatsApp

Letakkan kode berikut tepat sebelum tag </body> agar tampil di semua halaman:

🟢 Pilihan 1: Tiga Tombol WhatsApp Terpisah

<!-- Tombol WhatsApp Melayang -->

<div class="wa-container">

<a href="https://wa.me/6281234567890" class="wa-float" target="_blank" title="Hubungi TU">

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WA TU" width="42" height="42">

</a>

<a href="https://wa.me/6289876543210" class="wa-float" target="_blank" title="Hubungi Guru BK">

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WA BK" width="42" height="42">

</a>

<a href="https://wa.me/6281122334455" class="wa-float" target="_blank" title="Hubungi Kepala Sekolah">

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WA Kepsek" width="42" height="42">

</a>

</div>

.wa-float {
background-color: #25D366;
border-radius: 50%;
padding: 8px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
transition: transform 0.2s ease;
}
.wa-float:hover {
transform: scale(1.1);
}
</style>

Tombol ini akan tampil berjejer ke atas di sisi kiri bawah dan tetap terlihat meskipun halaman digulir.

🟢 Pilihan 2: Satu Tombol Utama + Menu Pop-up

Kalau ingin tampil lebih rapi, gunakan versi menu pop-up berikut:

<!-- Tombol WA dengan Menu Pop-up -->

<div class="wa-menu">

<div class="wa-main" onclick="toggleWaMenu()">

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" width="50" height="50">

</div>

<div class="wa-list" id="waList">

<a href="https://wa.me/6281234567890" target="_blank">TU Sekolah</a>

<a href="https://wa.me/6289876543210" target="_blank">Guru BK</a>

<a href="https://wa.me/6281122334455" target="_blank">Kepala Sekolah</a>

</div>

</div>

.wa-main {
background-color: #25D366;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
cursor: pointer;
}

.wa-list {
display: none;
flex-direction: column;
margin-bottom: 10px;
}

.wa-list a {
background-color: #25D366;
color: #fff;
text-decoration: none;
padding: 8px 12px;
border-radius: 20px;
margin-bottom: 5px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
transition: background 0.2s ease;
}
.wa-list a:hover {
background-color: #20ba5a;
}
</style>

🧠 Langkah 4: Simpan dan Cek Hasilnya

Setelah menempelkan kode:

Simpan file template.
Refresh halaman website sekolah.
Anda akan melihat tombol WhatsApp melayang di sisi kiri bawah layar.

Jika menggunakan model pop-up, coba klik ikon WhatsApp untuk melihat daftar kontak muncul.

🎨 Langkah Opsional: Ubah Warna atau Ukuran

Anda bisa mengganti warna tombol sesuai warna tema sekolah dengan mengubah bagian CSS:

Misalnya, ganti menjadi warna biru sekolah:

✅ Kesimpulan

Dengan menambahkan tombol WhatsApp melayang di CMS Sekolahku, komunikasi antara sekolah dan pengunjung jadi lebih cepat, mudah, dan interaktif.
Anda dapat menyesuaikan tampilan, posisi, serta jumlah kontak sesuai kebutuhan.