Cara Membuat Tombol WhatsApp dan Telegram Melayang di Blogger Lengkap dengan Kode CSS dan HTML

"Tutorial cara membuat tombol WhatsApp dan Telegram melayang di Blogger dengan mudah, lengkap dengan kode CSS dan HTML agar blog lebih profesional dan "

P. Oka .M April 29, 2026

Jika kamu memiliki blog dan ingin pengunjung dapat langsung menghubungimu, salah satu cara paling efektif adalah dengan menambahkan link menuju media sosial yang kamu miliki, hal ini berlaku untuk semua jenis situs, termasuk blog pribadi maupun website toko online, karena mempermudah komunikasi antara pemilik dan pengunjung.

Gambar telegram (kiri) blogger (tengah) dan whatsapp (kanan)

Namun, jika kamu hanya menempelkan gambar ikon media sosial pada halaman blog saja belum tentu membuat tampilan blog terlihat menarik, agar lebih menonjol dan mudah ditemukan, ikon media sosial dapat diberi efek hover atau dibuat melayang sehingga tetap terlihat saat pengunjung melakukan scroll pada halaman blog.

Dengan menambahkan widget media sosial, peluang interaksi akan meningkat karena pengunjung dapat langsung menghubungi tanpa perlu mencari halaman kontak terlebih dahulu, banyak tutorial di internet yang membahas cara membuat widget tersebut, namun pada pembahasan kali ini aku akan memberikan sebuah tutorial bagaimana caranya membuat tombol WhatsApp dan Telegram melayang di sisi blog.

Ketika tombol ini dipasang, pengunjung akan langsung melihat ikon WhatsApp atau Telegram yang selalu muncul di samping layar, begitu di click, mereka akan langsung diarahkan untuk mengirim pesan ke akun milikmu, metode ini membuat proses komunikasi menjadi lebih cepat, mudah, dan praktis, sekaligus meningkatkan tampilan blog agar terlihat lebih profesional, nah jadi penasaran bagaimanakah tutorialnya ? mari kita bahas bersama dibawah ini :

Tutorial :

Pertama, pastikan kamu sudah masuk ke blogger milikmu.
Setelah itu masuklah ke menu "Tema".
Nah sekarang click tombol segitiga yang menghadap ke bawah kemudian pilih "Edit HTML".
Sekarang akan terbuka tab halaman. pada tab halaman ini berisi ratusan kode bentukan dari template yang kamu miliki.

Jika sudah, blok semua kode CSS yang ada di bawah ini kemudian click tombol CTRL+C pada keybord. kemudian paste kode yang sudah kamu copy di atas kode ]]><b:skin> atau </style> :

/*Tombol Chat WhatsApp*/
.fixed-whatsapp{position:fixed;bottom:20px;right:20px;width:50px;height:50px;z-index:9999}
.fixed-whatsapp:before{content:"";background-repeat:no-repeat;background-size:34px 34px;background-position:center center;width:50px;height:50px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-color:#00C853;position:absolute;top:0;left:0;border-radius:100%;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24)}
.fixed-whatsapp:after{content:"Butuh Bantuan? Tap/Click icon WA melayang ini untuk chat admin";width:300px;padding:5px 5px;position:absolute;bottom:100%;margin-bottom:-50px;left:100%;margin-left:-355px;right:20px;text-align:left;color:#fff;border:5px solid #00c853;background:rgba(0,200,83);border-radius:3px;opacity:0;font-size:90%;line-height:1.1}
.fixed-whatsapp:after{opacity:1;right:0}

/* sticky-chat */
.sticky-chat-button{
  position: fixed;
  background-color: #0088cc;
  border-radius:40px;
  bottom: 80px;
  right: 20px;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.sticky-chat-button a{
  display:inline-block;
  position: relative;
  text-align:center
  height: 25px;
  width: 25px;
  padding: 7px;}

Setelah itu, kemudian salin kode Javascript di bawah ini lalu tempelkan tepat di atas kode </body> :

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=6281936023471' rel='nofollow noopener' target='_blank' title='Whatsapp'/> 
<div class='sticky-chat-button'> 
<a class='telegram-chat-button' href='https://t.me/putuokane' title='tap icon ini untuk chat admin via telegram'>  
<svg height='32' viewBox='0 0 32 32' width='32' xmlns='http://www.w3.org/2000/svg'>   
<path d='M29.919 6.163l-4.225 19.925c-0.319 1.406-1.15 1.756-2.331 1.094l-6.438-4.744-3.106 2.988c-0.344 0.344-0.631 0.631-1.294 0.631l0.463-6.556 11.931-10.781c0.519-0.462-0.113-0.719-0.806-0.256l-14.75 9.288-6.35-1.988c-1.381-0.431-1.406-1.381 0.288-2.044l24.837-9.569c1.15-0.431 2.156 0.256 1.781 2.013z' fill='#fff'/>
</svg>
</a>
</div>

Pastikan kamu mengganti tulisan nomor whatsapp dengan nomor whatsapp kamu yang aktif dan mengganti tulisan "Putuokane" dengan username telegram kamu.
Untuk bagian "bottom" pada /* sticky-chat */
.sticky-chat-button{ kamu bisa mengaturnya sendiri dengan mengganti nilai 80px tersebut agar tidak menempel terlalu berdekatan antara telegram dan whatsapp, kemudian manfaatkan juga coding "left" untuk mengatur posisi fitur tombol whatsapp/telegram ini agar rapi.
Dan satu hal lagi, jika teks whatsapp yang ada di dalam kotak terlalu menempel pada icon whatsapp maka ubahlah angka "355px" pada kode css tersebut, semakin besar angka yang kamu berikan maka posisinya semakin ke kiri dan jika kamu memberikan angka yang lebih kecil maka semakin ke kanan posisi kata tersebut, pastikan kamu tidak menghilangkan simbol minus pada "-355px", jika kamu menghilangkannya maka kata-kata kotak whatsapp akan berada di pojok kiri.
Jika sudah, click simbol disket untuk menyimpan hasilnya.
Tunggu beberapa menit hingga penyimpanan selesai.
Sekarang keluar dari menu coding dan coba buka blog yang kamu miliki, harusnya akan terlihat 2 buah icon whatsapp & telegram melayang disamping blog.

Penutup

Nah dengan mengikuti langkah di atas, sekarang tombol WhatsApp dan Telegram sudah berhasil ditambahkan ke blog, sehingga pengunjung bisa langsung menghubungi tanpa perlu mencari kontak secara manual, fitur ini tidak hanya mempermudah komunikasi tetapi juga membuat tampilan blog terlihat lebih modern, rapi, dan profesional.

Kamu juga bisa mengembangkan widget ini lebih lanjut sesuai kebutuhan, misalnya menambahkan efek animasi, mengganti posisi tombol, atau menambahkan lebih banyak ikon media sosial lain agar interaksi dengan pengunjung semakin luas.

Semoga tutorial ini membantu dan bisa langsung dipraktikkan di blog yang kamu miliki, selamat mencoba dan sampai jumpa di pembahasan berikutnya.