Skip to main content

follow us


www.azid.web.id - Cara Membuat Tombol Chat Whatsapp Melayang Pada Blogger AMP dan Non AMP. Pada kesempatan ini saya akan share ulang tentang cara membuat tombol chat whatsapp melayang pada blogger. Mengapa share ulang?, ya, saya kali ini belum ada inspirasi untuk memposting tutorial atau sejenisnya, oleh karena itu saya mengambil artikel dari kompiajaib.com untuk di share ulang.

Apakah artikel ini merupakan artikel copas?, tentunya secara ilmiah artikel ini tidak copas secara keseluruhan. Saya hanya copas script untuk membuat tombol whtasappnya saja. Adapun dari segi tatacara penyampaian dan tatacara penulisan tetaplah berbeda.

Baik, sebenarnya sudah banyak layanan penyedia tombol whatsapp melayang, bahkan ada beberapa sekaligus yaitu phone, whatsapp, facebook, twitter dan lain sebagainya. Salah satunya adalah whatshelp.io dengan tampilan bisa klik disini atau klik disni. Mengapa terdapat tombol media sosial seperti whatsapp melayang dibawah sebelah kanan atau kiri?, hal tersebut tidak lain dikarenakan agar mempermudah pengunjung blog atau websitenya jika ingin bertanya atau order sesuatu. Tombol media sosial seperti whatsapp melayang di blogger biasanya digunakan para blogger tentang produk penjualan atau jasa lainnya.

BACA JUGA: Template Magazine SEO Friendly, Responsive dan Fast Loading

Ok, mungkin diantara sobat yang menemukan artikel ini salah satunya adalah tujuannya sebagaimana yang saya katakan diatas. Apapun tujuannya, jika sobat ingin membuat tombol whatsapp melayang diblogger bisa mengikuti cara berikut;

Pertama, hal pertama yang sobat lakukan adalah menuju menu Edit HTML, kemudian letakkan kode berikut tepat diatas kode </head>


<style>
.fixed-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  text-align: center;
}

.fixed-whatsapp:before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #00C853;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  z-index: 1;
  top: 0;
  left: 0;
}

.fixed-whatsapp svg {
  vertical-align: middle;
  z-index: 2;
  position: relative;
}
.fixed-whatsapp:after {
  content: "Jika anda ingin bertanya bisa chat kami disini";
  width: 100px;
  padding: 5px 10px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 10px;
  right: -150px;
  text-align: right;
  color: #555;
  border: 1px solid #dedede;
  background: rgba(255,255,255,.5);
  border-radius: 4px;
  opacity: 0;
  transition:all .4s ease-in-out;
  font-size: 90%;
  line-height: 1.1;
}

.fixed-whatsapp:hover:after {
  opacity: 1;
  right: 0;
}
</style>

Kedua, Jika sudah langkah selanjutnya adalah menuju kode </body> dan letakkan script HTML tepat diatasnya.


<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>
<svg viewBox='0 0 24 24' width='34' height='34'>
<path fill='#ffffff' 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'/>
</svg>
</a>

Ketiga, langkah terakhir adalah Save Template sobat.

PERHATIAN: ganti phone 628xxxxxxxxxx dengan nomor whatsapp sobat.

Klik disini untuk lihat DEMO-nya

Apakah tutorial ini bisa digunakan untuk template blogger AMP?, tentunya bisa karena pada script buatan mas Adhy Suryadi pemilik blog kompiajaib.com tidak menggunakan kode Js atau javascript atau hosting eksternal.

Lantas caranya untuk memasukkan pada blog AMP?, untuk blog AMP sobat bisa mengikuti cara sebagaimana langkah diatas, hanya saja script <style> dan </style> dihapus dan didalam kode style copas kemudian letakkan di dalam tag <style amp-custom='amp-custom'>

Demikianlah tutorial Cara Membuat Tombol Chat Whatsapp Melayang Pada Blogger AMP dan Non AMP. Semoga artikel ini bermanfaat, Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar