Hyperlink Dan Tombol Chat SMS (Short Message Service)Hyperlink sms atau disebut juga anchor link sms adalah link yang mengarah ke layanan SMS (Short Message Service) ketika di klik. Secara umum hyperlink sms difungsikan untuk membuat pintasan layanan chat sms di halaman web misalnya tombol chat sms Meskipun di era smartphone, sms cenderung jarang digunakan tidak ada salahnya jika membuat layanan chat sms di website / blog dengan menggunakan hyperlink / anchor link khususnya website jual beli dan web penyedia jasa. Karena semakin banyak cara terhubung dengan konsumen semakin besar pula peluang. Format dasar hyperlink sms di html <a href="sms:081261043687">Chat SMS</a> Output: Chat SMS .demo-output{background-color:rgba(155,155,155,0.1);padding:10px;margin:10px 0;border:1px solid rgba(155,155,155,0.3);border-radius:6px;}.demo-output a{font-weight:bold;} [ads id="ads1"] Ketika link sms di klik melalui hp atau smartphone maka link akan langsung menuju ke sms dan menginput nomor tujuan secara otomatis, silahkan di uji coba untuk membuktikan. Lebih dari itu kamu juga bisa menambahkan auto input text message pada link sms dengan menambahkan body message pada link sms dengan format link sms sebagai berikut: <a href="sms:081261043687?&body=Hallo, you can help me to">Chat SMS</a> Output: Chat SMS Dengan demikian teks pada link sms akan di input secara otomatis ke body message atau kotak pesan dan nomor hp pada link sms akan di input ke kolom nomor tujuan. Selanjutnya agar tombol pintasan chat sms terlihat lebih menarik dan menonjol kita dapat menambahkan icon sms dan style pada tombol chat sms, seperti yang saya contohkan dibawah ini: Kode HTML Tombol Chat Via SMS + SVG Icon <button class="chat-sms"> <a href="sms:081261043687?&body=Hallo, you can help me to" title="Chat SMS"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"> <path d="M464,48H48A16,16,0,0,0,32,64V352a16,16,0,0,0,16,16h80V480h8L248,368H464a16,16,0,0,0,16-16V64A16,16,0,0,0,464,48ZM184,272H144V232h40Zm96,0H240V232h40Zm96,0H336V232h40Z"/> </svg> Chat SMS </a> </button> Kode CSS Tombol Chat SMS <style type="text/css"> button.chat-sms { display: flex; width: 160px; margin: 10px auto; background-color: #3367d6; border: 1px solid #3367d6; border-radius: 4px; } button.chat-sms a svg { width: 40px; height: 40px; padding: 2px; fill: #fff; margin-right: 10px; } button.chat-sms a { padding: 0; display: flex; font-size: 18px; color: #fff; font-weight: bold; align-items: center; } </style> Demo Tombol Chat SMS Chat SMS button.chat-sms{display:flex;width:160px;margin:10px auto;background-color:#3367d6;border:1px solid #3367d6;border-radius:4px;}button.chat-sms a svg{width:40px;height:40px;padding:2px;fill:#fff;margin-right:10px;}button.chat-sms a{padding:0;display:flex;font-size:18px;color:#fff;font-weight:bold;align-items:center;} Nah, keren kan! Sekarang cobalah untuk membuat pintasan atau tombol chat via sms dengan menggunakan hyperlink sms diatas dan kreasikan dengan ide anda sendiri, atau jika ingin menggunakan tombol chat sms di atas maka admin persilahkan dengan segala hormat, tetapi jangan lupa untuk mengganti nomor hp yang ada pada link sms di atas dengan nomor hp anda sendiri.

Hyperlink sms atau disebut juga anchor link sms adalah link yang mengarah ke layanan SMS (Short Message Service) ketika di klik. Secara umum hyperlink sms difungsikan untuk membuat pintasan layanan chat sms di halaman web misalnya tombol chat sms

Meskipun di era smartphone, sms cenderung jarang digunakan tidak ada salahnya jika membuat layanan chat sms di website / blog dengan menggunakan hyperlink / anchor link khususnya website jual beli dan web penyedia jasa. Karena semakin banyak cara terhubung dengan konsumen semakin besar pula peluang.
SMS Chat Button

Format dasar hyperlink sms di html



<a href="sms:081261043687">Chat SMS</a>

Output:
Chat SMS
[ads id="ads1"] Ketika link sms di klik melalui hp atau smartphone maka link akan langsung menuju ke sms dan menginput nomor tujuan secara otomatis, silahkan di uji coba untuk membuktikan.

Lebih dari itu kamu juga bisa menambahkan auto input text message pada link sms dengan menambahkan body message pada link sms dengan format link sms sebagai berikut: 


<a href="sms:081261043687?&body=Hallo, you can help me to">Chat SMS</a>

Output:
Chat SMS
Dengan demikian teks pada link sms akan di input secara otomatis ke body message atau kotak pesan dan nomor hp pada link sms akan di input ke kolom nomor tujuan.

Selanjutnya agar tombol pintasan chat sms terlihat lebih menarik dan menonjol kita dapat menambahkan icon sms dan style pada tombol chat sms, seperti yang saya contohkan dibawah ini:

Kode HTML Tombol Chat Via SMS + SVG Icon

<button class="chat-sms">

 <a href="sms:081261043687?&body=Hallo, you can help me to" title="Chat SMS">

  <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512">

   <path d="M464,48H48A16,16,0,0,0,32,64V352a16,16,0,0,0,16,16h80V480h8L248,368H464a16,16,0,0,0,16-16V64A16,16,0,0,0,464,48ZM184,272H144V232h40Zm96,0H240V232h40Zm96,0H336V232h40Z"/>

  </svg>

Chat SMS

 </a>

</button>

Kode CSS Tombol Chat SMS

<style type="text/css">

button.chat-sms {

  display: flex;

  width: 160px;

  margin: 10px auto;

  background-color: #3367d6;

  border: 1px solid #3367d6;

  border-radius: 4px;

}

button.chat-sms a svg {

  width: 40px;

  height: 40px;

  padding: 2px;

  fill: #fff;

  margin-right: 10px;

}

button.chat-sms a {

  padding: 0;

  display: flex;

  font-size: 18px;

  color: #fff;

  font-weight: bold;

  align-items: center;

}

</style>
Demo Tombol Chat SMS Nah, keren kan! Sekarang cobalah untuk membuat pintasan atau tombol chat via sms dengan menggunakan hyperlink sms diatas dan kreasikan dengan ide anda sendiri, atau jika ingin menggunakan tombol chat sms di atas maka admin persilahkan dengan segala hormat, tetapi jangan lupa untuk mengganti nomor hp yang ada pada link sms di atas dengan nomor hp anda sendiri.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengatasi Render Blocking Resources Dari Template Blogger

Gambar
Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript. Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut. Dampak Negatif Render-Blocking Resources [ads id="ads1"] Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu
Baca selengkapnya

Cara Mengatasi URL Yang Dikecualikan (Discovered-Currently Not Indexed Status)

Gambar
Tahukah kamu apa itu " Discovered currently not indexed " dengan status " Excluded "? Discovered currently not indexed maksudnya adalah halaman (url) sudah ditemukan oleh google tetapi belum di-crawl, sedangkan status excluded adalah status url yang masuk dalam ketegori pengecualian atau di kecualikan. Biasanya halaman ( url ) yang dikecualikan juga tidak diindeks oleh google karena menurut google halaman (url) merupakan duplikat dari halaman yang diindeks, atau diblokir dari pengindeksan oleh beberapa mekanisme di situs web itu sendiri. Jika tag canonical url di terapkan dengan benar beberapa url atau halaman di situs web akan dikecualikan oleh crawler google, biasanya halaman yang dikecualikan merupakan halaman (url) yang memang tidak penting untuk diindeks seperi url ?m=1, ?m=0 dan /search. Pengecualian pada yang url seperti itu baik untuk situs web, dengan begitu url (halaman) duplikat akan terjaring kedalam keranjang pengecualian di search console. [ads id=&
Baca selengkapnya

Cara Mendaftarkan Blog Ke Google Adsense (Panduan Terupdate)

Gambar
Google adsense menjadi terget utama kebanyakan blogger di dunia, pasalnya google adsense memberikan penghasilan kepada konten kreator melalui monetisasi konten blog dengan iklan adsense. Oleh karena itu bagi kamu yang baru saja memulai blogging khususnya yang ngeblog di platform blogger saya akan menunjukkan cara mendaftarkan blog anda ke google adsense agar dapat dimonetisasi dengan iklan adsense. Tapi sebelumnya harap perhatikan dan terapkan beberapa poin di bawah ini agar blog anda dapat dimonetisasi dengan iklan adsense. Syarat Agar Blog Diterima Adsense Untuk Monetisasi Daftarkan blog anda ke google adsense jika sudah rampung. Pastikan konten blog tidak berisi konten dewasa dan perjudian. Buat navigasi yang relevan dengan konten dan niche blog. Pastikan blog memiliki trafik organik. [ads id="ads1"] Jika ke empat poin di atas yang menjadi syarat kelayakan situs (blog) untuk dimonetisasi dengan iklan adsense sudah dipenuhi oleh blog anda maka blog sudah siap untuk didaftar
Baca selengkapnya