Cara Membuat Tombol Telepon Otomatis di Blogger

---

Bagi website atau blog yang menawarkan produk dan jasa, memberikan cara cepat bagi calon pelanggan untuk menghubungi kita dapat membuat pengalaman pengguna jauh lebih nyaman. Selain WhatsApp, email, dan formulir kontak, tombol telepon langsung masih menjadi pilihan sederhana ketika bisnis memang menerima komunikasi melalui panggilan suara.

HTML menyediakan cara sederhana untuk membuat link nomor telepon menggunakan skema tel:. Ketika digunakan pada perangkat yang memiliki aplikasi atau layanan panggilan, browser dapat meneruskan nomor tersebut ke aplikasi yang sesuai sehingga pengunjung tidak perlu menyalin nomor secara manual.

Pada artikel ini kita akan membahas beberapa implementasi tombol telepon yang praktis untuk Blogger: link telepon sederhana, tombol modern, floating call button, tombol dengan fallback copy nomor untuk desktop, serta generator kode yang dapat digunakan langsung tanpa library JavaScript tambahan.

DIRECT CONTACT HTML Telephone Link

SCHEME tel:

MOBILE Call App

DESKTOP Copy Number

SCRIPT Native JS

PHONE LINK NOTE Gunakan format nomor yang konsisten

Untuk nomor telepon publik, gunakan format internasional bila memungkinkan. Sebagai contoh, nomor Indonesia 081234567890 dapat ditulis menjadi +6281234567890, sehingga alamat teleponnya menjadi tel:+6281234567890.

Apa itu Anchor Tag Hyperlink Telepon?

Anchor tag hyperlink telepon adalah link HTML yang menggunakan skema tel: pada atribut href. Link tersebut memberikan nomor telepon kepada perangkat pengguna agar dapat diteruskan ke aplikasi atau layanan panggilan yang tersedia.

Struktur dasarnya sangat sederhana:

<a href="tel:+6281234567890">Hubungi Kami</a>

Hasil dari kode tersebut:

Hubungi Kami

Format Nomor Telepon yang Disarankan

FORMAT LOKAL 0812 3456 7890

FORMAT GLOBAL +6281234567890

Untuk nomor Indonesia yang diawali angka nol, angka nol tersebut biasanya diganti kode negara. Jadi 081234567890 ditulis menjadi +6281234567890.

Mengapa Tombol Telepon Masih Berguna?

Kontak Lebih Cepat Pengunjung tidak perlu menyalin nomor telepon secara manual.

Nyaman di Smartphone Satu sentuhan dapat meneruskan nomor ke aplikasi panggilan.

Cocok untuk Bisnis Berguna untuk customer service, sales, booking, atau konsultasi.

Call to Action Jelas Pengunjung langsung mengetahui cara menghubungi bisnis.

Tombol Telepon Modern untuk Blogger

Versi baru menggunakan struktur sederhana tanpa jQuery. Tombol dapat dipasang di artikel, halaman Contact, maupun sidebar Blogger.

CALL US NOW Hubungi Kami

Salin kode berikut:

<a class="cfTelButton" href="tel:+6281234567890">

<span class="cfTelButtonIcon">
<i class="fa fa-phone"></i>
</span>

<span class="cfTelButtonText">
<small>CALL US NOW</small>
<strong>Hubungi Kami</strong>
</span>

<i class="fa fa-angle-right cfTelButtonArrow"></i>

</a>

<style>
.cfTelButton{
width:100%;
min-width:0;
box-sizing:border-box;
display:flex;
align-items:center;
gap:9px;
padding:10px;
border:1px solid rgba(0,131,218,.22);
border-radius:11px;
text-decoration:none!important;
transition:transform .25s ease,border-color .25s ease;
}

.cfTelButton:hover{
transform:translateY(-2px);
border-color:#0083da;
}

.cfTelButtonIcon{
width:40px;
height:40px;
flex:0 0 40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:#0083da;
color:#fff;
font-size:18px;
}

.cfTelButtonText{
flex:1;
min-width:0;
}

.cfTelButtonText small,
.cfTelButtonText strong{
display:block;
}

.cfTelButtonText small{
font-size:11px;
color:#0083da;
}

.cfTelButtonText strong{
font-size:14px;
line-height:1.4;
}

.cfTelButtonArrow{
flex:0 0 auto;
color:#0083da;
font-size:18px;
}

@media(max-width:220px){
.cfTelButton{padding:8px;gap:7px;}
.cfTelButtonIcon{width:35px;height:35px;flex-basis:35px;font-size:16px;}
.cfTelButtonText small{font-size:11px;}
.cfTelButtonText strong{font-size:13px;}
.cfTelButtonArrow{display:none;}
}
</style>

Bagian yang perlu diubah Ganti +6281234567890 dengan nomor telepon yang akan digunakan.

Pilihan Warna Tombol

Dengan struktur yang sama, warna icon dan aksen dapat dibuat berbeda tanpa mengulang seluruh kode tombol.

BLUE SIGNAL Hubungi Kami GREEN SIGNAL Hubungi Kami ORANGE SIGNAL Hubungi Kami RED SIGNAL Hubungi Kami

Floating Call Button Native JavaScript

Floating call button berikut menggunakan JavaScript native dan dapat bersembunyi otomatis ketika pengguna menggulir halaman ke bawah, lalu muncul kembali saat pengguna menggulir ke atas.

Tombol akan bersembunyi ketika halaman digulir ke bawah dan muncul kembali ketika pengguna menggulir halaman ke atas.

CALL

Kode floating call button:

<a href="tel:+6281234567890" class="cfCallFloat" aria-label="Hubungi kami melalui telepon">
<i class="fa fa-phone"></i>
<span>Call</span>
</a>

<style>
.cfCallFloat{
position:fixed;
right:16px;
bottom:16px;
z-index:9999;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:1px;
box-sizing:border-box;
border-radius:50%;
background:#0083da;
color:#fff!important;
text-decoration:none!important;
box-shadow:0 7px 22px rgba(0,131,218,.30);
transition:transform .25s ease,opacity .25s ease,bottom .3s ease;
}

.cfCallFloat i{
font-size:20px;
}

.cfCallFloat span{
font-size:10px;
font-weight:700;
text-transform:uppercase;
}

.cfCallFloat:hover{
transform:translateY(-2px);
}

.cfCallFloat.cfCallHidden{
bottom:-80px;
opacity:0;
pointer-events:none;
}

.cfCallFloat::before{
content:"";
position:absolute;
inset:-5px;
border:1px solid rgba(0,131,218,.45);
border-radius:50%;
animation:cfCallPulse 2.2s ease-out infinite;
}

@keyframes cfCallPulse{
0%{transform:scale(.9);opacity:.7;}
70%{transform:scale(1.25);opacity:0;}
100%{opacity:0;}
}

@media(max-width:300px){
.cfCallFloat{right:10px;bottom:10px;width:52px;height:52px;}
}

@media(prefers-reduced-motion:reduce){
.cfCallFloat::before{animation:none;}
.cfCallFloat{transition:none;}
}
</style>

<script>
(function(){
"use strict";

var btn=document.querySelector(".cfCallFloat");
if(!btn)return;

var lastScroll=window.scrollY;
var ticking=false;

function updateButton(){
var current=window.scrollY;

if(current > lastScroll && current > 150){
btn.classList.add("cfCallHidden");
}else{
btn.classList.remove("cfCallHidden");
}

lastScroll=current;
ticking=false;
}

window.addEventListener("scroll",function(){
if(!ticking){
window.requestAnimationFrame(updateButton);
ticking=true;
}
},{passive:true});

})();
</script>

Mengubah posisi tombol Gunakan right:16px untuk posisi kanan. Jika ingin di kiri, ganti dengan left:16px.

Tombol Telepon dengan Copy Nomor di Desktop

Untuk pengunjung smartphone, tombol dapat membuka aplikasi telepon. Pada komputer desktop, kita juga dapat menyediakan perilaku alternatif berupa copy nomor telepon.

Kode:

<button class="cfSmartCall" type="button" data-phone="+6281234567890">

<i class="fa fa-phone"></i>

<span class="cfSmartCallData">
<small>CONTACT LINE</small>
<strong>+62 812 3456 7890</strong>
</span>

<span class="cfSmartCallAction">Call</span>

</button>

<script>
(function(){
"use strict";

document.addEventListener("click",function(event){

var btn=event.target.closest(".cfSmartCall");
if(!btn)return;

var phone=btn.getAttribute("data-phone");
if(!phone)return;

var touchDevice=window.matchMedia("(pointer:coarse)").matches;

if(touchDevice){
window.location.href="tel:"+phone;
return;
}

copyPhone(phone,btn);

});

function copyPhone(phone,btn){

if(navigator.clipboard && window.isSecureContext){

navigator.clipboard.writeText(phone).then(function(){
showStatus(btn);
});

return;
}

var area=document.createElement("textarea");
area.value=phone;
area.style.position="fixed";
area.style.opacity="0";
document.body.appendChild(area);
area.select();

try{
document.execCommand("copy");
}catch(error){}

document.body.removeChild(area);
showStatus(btn);

}

function showStatus(btn){

var label=btn.querySelector(".cfSmartCallAction");
if(!label)return;

var oldText=label.textContent;
label.textContent="Copied";

setTimeout(function(){
label.textContent=oldText;
},1500);

}

})();
</script>

<style>
.cfSmartCall{
width:100%;
min-width:0;
box-sizing:border-box;
display:flex;
align-items:center;
gap:9px;
padding:10px;
border:1px solid rgba(0,131,218,.23);
border-radius:11px;
font:inherit;
cursor:pointer;
}

.cfSmartCall>i{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 38px;
border-radius:9px;
background:#0083da;
color:#fff;
font-size:17px;
}

.cfSmartCallData{
flex:1;
min-width:0;
text-align:left;
}

.cfSmartCallData small,
.cfSmartCallData strong{
display:block;
}

.cfSmartCallData small{
font-size:11px;
color:#0083da;
}

.cfSmartCallData strong{
font-size:13px;
overflow-wrap:anywhere;
}

.cfSmartCallAction{
padding:5px 7px;
border-radius:6px;
background:#0083da;
color:#fff;
font-size:11px;
font-weight:700;
}

@media(max-width:220px){
.cfSmartCall{padding:8px;gap:6px;}
.cfSmartCall>i{width:34px;height:34px;flex-basis:34px;font-size:15px;}
.cfSmartCallData strong{font-size:12px;}
.cfSmartCallAction{padding:4px 5px;font-size:11px;}
}
</style>

Generator Tombol Telepon Blogger

Generator berikut membantu membuat link telepon dasar. Masukkan nomor dalam format internasional dan teks tombol yang diinginkan.

CODE GENERATOR Telephone Link Builder

Nomor telepon Teks tombol

Cara Memasang Tombol di Blogger

01

Pilih Lokasi

Tentukan apakah tombol akan dipasang pada artikel, halaman Contact, sidebar, footer, atau dibuat melayang.

02

Masukkan Nomor

Gunakan nomor aktif yang memang ditujukan untuk menerima komunikasi dari pengunjung.

03

Salin Kode

Gunakan salah satu contoh kode atau generator yang tersedia pada artikel.

04

Pasang di Blogger

Untuk sidebar gunakan gadget HTML/JavaScript. Untuk artikel gunakan mode HTML pada editor Blogger.

05

Uji dari Smartphone

Pastikan nomor yang diteruskan ke aplikasi telepon sudah benar sebelum tombol digunakan pada website produksi.

Hal yang Perlu Diperhatikan

Nomor Harus Benar Uji nomor sebelum tombol dipublikasikan.

Label Harus Jelas Gunakan teks seperti Hubungi Kami agar fungsi tombol mudah dipahami.

Jangan Menutup Konten Floating button perlu diberi jarak dari navigasi atau tombol lainnya.

Responsif Tombol harus tetap nyaman pada sidebar sempit hingga sekitar 200px.

Animasi Secukupnya Gunakan animasi untuk menarik perhatian tanpa mengganggu membaca.

Sediakan Alternatif WhatsApp, email, atau form dapat menjadi jalur komunikasi tambahan.

WARNING

Jangan memasang nomor pribadi yang sebenarnya tidak ditujukan untuk komunikasi publik. Untuk blog bisnis lebih baik menggunakan nomor customer service atau nomor bisnis khusus.

Tombol Telepon atau WhatsApp?

Tombol telepon dan WhatsApp sebenarnya dapat dipakai bersamaan. Panggilan suara cocok ketika pelanggan membutuhkan komunikasi langsung, sedangkan WhatsApp lebih nyaman ketika percakapan membutuhkan gambar, alamat, katalog, atau riwayat pesan.

Telephone Percakapan langsung

+

WhatsApp Chat dan media

+

Email Pesan formal

Untuk website bisnis atau jasa, beberapa pilihan komunikasi memberi pengunjung kebebasan memilih metode yang paling nyaman.

Anda juga dapat membaca Cara Membuat Redirect Link WhatsApp Chat dan Tombol Chat WhatsApp Bentuk 3D Cube.

Butuh Tombol Kontak Custom?

CODEFLARE DEVELOPMENT Buat Sistem Kontak yang Sesuai Website Anda

CodeFlare dapat membantu membuat tombol telepon, WhatsApp, Telegram, multi-chat floating button, contact widget, generator, maupun sistem komunikasi custom yang disesuaikan dengan template Blogger.

DISKUSIKAN WIDGET

Incoming Search Terms

cara membuat tombol telepon di Blogger, link tel HTML, tombol call Blogger, HTML telephone link, tombol telepon otomatis, floating call button Blogger, tel link smartphone, tombol kontak Blogger, click to call Blogger