Tutorial Cara Membuat Tombol Whatsapp Dan Telegram Melayang Disamping Blog

Mei 13, 2023

Jika kamu memiliki sebuah blog dan kamu ingin para pengunjung dapat langsung menghubungimu. kamu dapat menggunakan social media yang kamu sudah kamu berikan pada blog milikmu. atau jika kamu memiliki sebuah website atau blog onlineshop maka tentunya kamu diwajibkan untuk menempatkan social media untuk menghubungi

Nah tentunya hanya dengan menempelkan gambar dari social media tersebut belum tentu dapat membuat tampilan blog mu bagus. jadi tentunya agar social media tersebut tetap terlihat menarik. kamu bisa menambahkan metode hover atau membuatnya melayang agar mudah terlihat pada saat pengunjung melakukan scrolling di web blog milikmu.

Memang. agar para pengunjung dapat langsung menghubungimu kamu setidaknya dapat menambahkan beberapa widget social media yang sudah tersebar diseluruh artikel pada blog atau web lainnya. kamu bisa melihat tutorial tersebut di internet.

Akan tetapi khusus pada kesempatan kali ini. aku akan memberikan sebuah tutorial bagaimana cara membuat tombol whatsapp dan telegram melayang pada blog tepatnya disamping blog. jadi ketika seseorang atau pengunjung yang mengunjungi blog mu. mereka akan langsung melihat ada sebuah aplikasi per-pesanan otomatis yang langsung terhubung pada whatsapp ataupun telegram milikmu. jadi tentunya itu sangat-amat mudah dilihat, digunakan, bahkan diterapkan. nah langsung saja tanpa basa-basi.

Tutorial :

Pertama-tama pastikan kamu telah login pada blogger milikmu.
Setelah itu disini pergilah ke menu "Tema"
Maka sekarang clic tombol segitiga menghadap kebawah tersebut lalu pilih "Edit HTML"
Nah sekarang akan terbuka sebuah tab halaman. pada tab halaman ini berisi ratusan code pembentuk dari template yang kamu miliki.
Jika sudah maka block seluruh code CSS dibawah ini lalu click tombol CTRL + C pada keybord. lalu pastekan code yang telah kamu copy ini diatas code ]]></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 maka selanjutnya copy code Javascript dibawah ini lalu pastekan tepat diatas code </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/Tuoka20' 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 menganti tulisan nomor whatsapp tersebut dengan nomor whatsapp milikmu yang aktif dan ganti tulisan"Tuoka20" tersebut dengan username telegram milikmu.
Untuk "bottom" nya kamu bisa sesuaikan sendiri. agar tak menempel terlalu dekat kamu bisa atur angka pada coding css "bottom" nya. lalu manfaatkan juga coding "right" untuk mengatur posisi fitur tombol whatsapp/telegram ini agar rapi.
Dan satu lagi. jika kotak tulisan whatsapp tersebut terlalu menempel dengan icon whatsappnya. ganti angka "355px" tersebut pada code CSSnya. semakin besar angkanya maka akan semakin kekiri. dan semakin kecil angkanya maka akan semakin ke kanan. pastikan symbol minus pada "-355px" tersebut tidak kamu hilangkan ya. jika kamu hilangkan maka tulisan kotak whatsapp tersebut akan berada di pojok kiri.
Jika sudah maka click symbol disket tersebut untuk menyimpan hasilnya.

Tunggu beberapa menit hingga penyimpanan selesai.
Nah sekarang keluar dari menu coding tersebut dan cobalah membuka blog mu. oh iya bagi kamu yang masih penasaran tombol whatsapp dan telegramnya akan seperti ini. click tombol demo untuk melihatnya

DEMO

Tuoka20 Mei 13, 2023