Dalam kesempatan kali ini kami akan berbagi cara membuat tombol telepon melayang/fixed. Di dalam sebuah website ataupun blog biasanya orang akan membuat telepon. Agar memudahkan pengunjung maka tombol telepon dibuat melayang atau fixed di sisi kiri/kanan bawah.
Fungsi dari menuliskan tombol telepon tersebut agar mempermudah pengunjung untuk menghubungi pemilik atau admin web tersebut. Membuat tombol telepon ini akan sangat membantu apabila website tersebut berupa toko online, marketplace ataupun e-commerce lainnya. Sehingga bisa meningkatkan penjualan barang dan jasa yang dipromosikan.
Apalagi sekarang banyak orang yang mengakses internet menggunakan smartphone atau tablet. Dengan adanya tombol telepon tersebut akan mempermudah orang menghubungi pemilik web. Tinggal klik tombol tersebut maka secara otomatis akan menjalankan fungsi telepon tanpa perlu repot menulis nomor telepon.
Untuk membuat tombol melayang itu cukup mudah atau simple dan tanpa menggunakan pluginpun sebenarnya bisa. Hanya memerlukan HTML dan CSS saja tanpa perlu javascript, java, JSON atau bahasa pemograman yang sulit lainnya.
Untuk tombolnya kami menggunakan icon Font Awesome, namun bisa diganti dengan gambar atau icon lainnya.
Membuat Tombol Telepon Melayang
Pertama, Buat dulu HTML,nya. Silakan lihat contoh dibawah ini agar lebih jelas.
<div class="telpfixed"> <a href="tel:0823928XXX" target="_blank"><span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span></a></div>*Selanjutnya silakan ganti nomor telepon tersebut
Kedua, Silakan setting menggunakan CSS, contohnya seperti ini
.telpfixed {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 999;
}dan hasilnya kurang lebih akan seperti ini, silakan lihat di pojok kanan bawah.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar