Cara Membuat Tombol Telepon Melayang di Blogger atau Blog

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 19, 2024

www.gurudzgn.com - Hi Web Developer! kembali lagi bersama guru design, kali ini guru design akan berbagi trik cara Cara Membuat Tombol Telepon Melayang di Blogger atau blog guna dari widget tombol telepon ini ialah untuk memudahkan pengunjung/pembeli menghubungi admin blog langsung lewat telepon. Metode ini sangat sesuai sekali buat web kamu yang ber-niche Jualan Online ataupun Toko Online.

Tombol Telepon Melayang di Blogger atau Blog

Cara Membuat Tombol Telepon Melayang di Blogger atau Blog

Sebenarnya terdapat banyak metode yang dapat dicoba supaya pengunjung dapat melakukan komunikasi dengan admin web ataupun blog, salah satunya ialah dengan sediakan kolom komentar maupun Contact Form, sehingga mempermudah pengunjung untuk melakukan interaksi dengan pemilik web.

Tetapi, apabila kamu hanya sediakan Contact Form saja menurut saya tidaklah begitu efisien, sebab jika kamu tidak membuka email bisa jadi tidak akan melihat pesan yang dicoba oleh pengunjung/pembeli website/blog kamu. Lalu bagaimana triknya supaya lebih efisien?

Triknya ialah dengan membuat tombol telepon pada blog kamu, tujuannya yakni untuk memudahkan pembeli dalam menghubungi admin blog. 

Nah, bagi anda yang tertarik mencobanya, langsung saja ke topik pembahasan.

Cara Membuat Tombol Telepon Melayang di Blog

Pertama, buka Blogger >> Tema >> Edit HTML.

Kemudian letakkan kode berikut diatas kode </body>

<a class='fixed-telepon' href='tel:+628xxxxxxxxxx' rel='nofollow noopener' target='_blank'> <svg enable-background="new 0 0 64 64"  version="1.1" viewBox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"><g><circle cx="32" cy="32" fill="#008ae4" r="32"/></g><g opacity="0.2"><g><path d="M28.962,25.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085     c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63     c0.362,0.1,0.661,0.181,0.888,0.255C42.943,49.985,43.056,50,43.169,50c0.155,0,0.31-0.033,0.452-0.098     c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724     c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978     c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,25.954,28.991,25.649,28.962,25.343z" fill="#231F20"/></g></g><g><g><path d="M28.962,23.343c-0.417-4.794-5.418-7.146-5.63-7.242c-0.199-0.094-0.421-0.122-0.635-0.085     c-5.774,0.958-6.642,4.318-6.677,4.458c-0.048,0.196-0.039,0.399,0.022,0.589c6.886,21.366,21.198,25.327,25.903,26.63     c0.362,0.1,0.661,0.181,0.888,0.255C42.943,47.985,43.056,48,43.169,48c0.155,0,0.31-0.033,0.452-0.098     c0.144-0.065,3.544-1.667,4.375-6.891c0.037-0.227,0-0.463-0.105-0.668c-0.074-0.144-1.853-3.528-6.784-4.724     c-0.345-0.089-0.698,0.002-0.964,0.229c-1.556,1.329-3.705,2.745-4.632,2.891c-6.217-3.04-9.688-8.872-9.819-9.978     c-0.076-0.622,1.348-2.806,2.987-4.582C28.886,23.954,28.991,23.649,28.962,23.343z" fill="#FFFFFF"/></g></g></g><g id="Layer_2"/></svg> </a>

Ganti kode 628xxxxxxxxxx dengan nomor Telepon anda.

Setelah itu, tambahkan kode CSS berikut diatas ]]></b:skin> atau </style>

/*Tombol Telepon*/
.fixed-telepon {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}
.fixed-telepon svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}
  a svg{height:50px;
    width:50px
}

Klik Simpan Tema.

Demikian tutorial Cara Membuat Tombol Telepon Melayang di Blogger. Semoga bisa bermanfaat dan terima kasih sudah berkunjung.
Rafiqi, S.Kom.