Tutorial Cara Membuat Tombol Widget Whatsapp Dan Telegram Melayang Di Samping Blog

Juni 18, 2024

Jika kamu memiliki blog dan kamu ingin pengunjung dapat langsung menghubungi Anda. Anda dapat menggunakan media sosial yang telah kamu sediakan di blog milikmu. atau jika kamu memiliki website atau blog onlineshop maka tentu saja kamu diharuskan untuk menempatkan media sosial untuk menghubungi.

Nah tentu saja hanya dengan menempelkan gambar dari media sosial belum tentu bisa membuat blog kamu terlihat bagus. jadi tentu saja agar media sosial tetap terlihat menarik. kamu bisa menambahkan metode hover atau membuatnya melayang agar mudah terlihat saat pengunjung melakukan scrolling di web blog milikmu.

Memang. agar pengunjung bisa langsung menghubungimu setidaknya kamu bisa menambahkan beberapa widget media sosial yang sudah tersebar di seluruh artikel di blog atau web lainnya. kamu bisa melihat tutorialnya di internet.

Namun khusus pada kesempatan kali ini. aku akan memberikan tutorial bagaimana cara membuat tombol whatsapp dan telegram melayang di blog tepatnya di samping blog. jadi ketika seseorang atau pengunjung mengunjungi blog kamu , mereka akan langsung melihat bahwa ada aplikasi perpesanan otomatis yang langsung terhubung dengan whatsapp atau telegram milikmu. jadi tentu saja sangat-sangat mudah untuk dilihat, digunakan, dan bahkan diaplikasikan. nah langsung saja tanpa basa-basi lagi.

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 "Tuoka20" dengan username telegram kamu .
Untuk bagian "bottom" kamu bisa mengaturnya sendiri. agar tidak menempel terlalu dekat kamu bisa mengatur angka pada css coding "bottom". kemudian manfaatkan juga coding "left" untuk mengatur posisi fitur tombol whatsapp/telegram ini agar rapi.
Dan satu hal lagi, jika kata whatsapp yang ada di dalam kotak terlalu menempel pada icon whatsapp maka ubahlah angka "355px" pada kode css tersebut, semakin besar angka yang kamu taruh maka posisinya semakin ke kiri dan jika kamu menaruh 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 kamu, oh iya bagi kamu yang masih penasaran dengan tombol whatsapp dan telegram akan seperti ini. click tombol demo untuk melihatnya.