Cara Membuat Tombol Telepon Melayang di Blogger

AdityaTekno.com - Cara Membuat Tombol Telepon Melayang di Blogger Langsung Memanggil ke Admin Blog. Fungsi dari widget tombol Telepon ini yaitu mempermudah pengunjung / pembeli untuk menghubungi admin blog langsung melalui telepon. Cara ini sangat cocok sekali untuk blog anda yang ber-niche Jualan Online atau Toko Online.

Sebetulnya ada banyak cara lain yang bisa dilakukan pengunjung agar bisa melakukan komunikasi dengan admin blog atau website, salah satunya yaitu dengan menyediakan kolom komentar ataupun Contact Form, sehingga memudahkan pengunjung untuk melakukan interaksi dengan pemilik website.

Namun, apabila anda hanya menyediakan Contact Form saja menurut saya tidaklah begitu efektif, karena jika anda tidak membuka email mungkin tidak akan melihat interaksi yang dilakukan oleh pengunjung / pembeli web / blog anda. Lalu bagaimana caranya agar lebih efektif?

Caranya yaitu dengan membuat tombol telepon pada blog anda, tujuannya adalah untuk mempermudah pembeli dalam menghubungi admin blog.

Baca Juga : Cara Membuat Tombol WhatsApp Melayang di 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" height="64px" version="1.1" viewBox="0 0 64 64" width="64px" 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="#77B3D4" 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: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}
.fixed-telepon svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}

Klik Simpan Tema.

Live Demo

Demikian tutorial Cara Membuat Tombol Telepon Melayang di Blogger. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com