Postingan

Menampilkan postingan dengan label a-href

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.

Gambar
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 [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 ...

Link wa.me Dan Tombol Chat WhatsApp

Gambar
Link wa.me adalah url navigasi panggilan dan pesan whatsapps melalui laman web. Meskipun link wa.me tidak masuk dalam ulasan MDN di artikel navigator metode atau navigator.registerprotocolhandler() , wa.me juga merupakan link navigasi yang berbasis protokol http/s . Perlu diketahui juga bahwa wa.me adalah versi short link dari https://api.whatsapp.com/send/?phone=number . Jadi untuk membuat navigasi panggilan dan message whatsapp di website/blog dapat menggunakan kedua type link WA yaitu: Type 1 https://wa.me/nomor hp Contoh: https://wa.me/6281261043687 [ads id="ads1"] Type 2 https://api.whatsapp.com/send/?phone=number Contoh: https://api.whatsapp.com/send/?phone=6281261043687 //Dengan teks (Chat Message) https://api.whatsapp.com/send/?phone=6281261043687&text=Hi can you help me? Di HTML <a href="https://wa.me/6281261043687" title="Hubungi Saya" rel="noopener" target="_blank">Hubungi Via WhatsApp</a> Outp...

Cara Menambahkan icon-link Pada Tautan Di Postingan

Gambar
Setiap tautan atau anchor text yang disematkan dalam artikel hendaknya dibedakan dengan teks biasa, tujuannya agar pengunjung tau bahwa anchor text tersebut bisa di klik (dibuka). Ada beberapa cara yang paling umum digunakan untuk membedakan anchor text dengan teks biasa diantaranya menggunakan huruf tebal, warna yang berbeda, style font khusus hingga menambahkan icon-link pada tautan (anchor text). Oleh karena itu, di tutorial kali ini saya akan memberikan trik untuk menambahkan icon-link pada tautan yang disematkan dalam artikel atau postingan blog. Ingin tahu bagaimana caranya? simak selengkapnya di bawah ini. Untuk menambakan ikon link pada tautan yang ada di halaman post sebenarnya tidak sulit, cukup tambahkan css berikut di atas kode ]]></b:skin> yang ada di dalam template blog anda. .post-body a:after { content: " \f0c1 "; font-family: FontAwesome; font-size: 11px; vertical-align: middle; display: inline-block; margin-left: 4px; ...