Cara Membuat Tool URL to QR Code Generator di Blog

membuat tool url to qr generator

Bazaman.com - URL to QR Code generator merupakan salah satu tool online populer yang banyak digunakan orang. Tujuannya adalah merubah link url yang Anda miliki menjadi berupa QR code atau barcode hanya dengan beberapa langkah dan dilakukan secara otomatis.

Apa Itu URL to QR Generator?

URL to QR Code generator adalah sebuah tool yang berfungsi untuk merubah link url atau tautan Anda menjadi sebuah kode QR atau barcode yang dapat dipindai seara umum

Apa Itu QR Code?

Lalu apa yang dimaksud dengan QR Code?, QR Code adalah versi dua dimensi dari kode batang yang memiliki pola pixel biasanya terdiri dari warna hitam dan putih, walaupun sekarang banyak variasi warna dan bentuk pixel nya. QR sendiri merupakan singkatan dari (quick response) atau Respon Cepat yang mengacu pada akses instan kepada informasi yang terinskripsi dan tersembunyi didalam kode QR

Apa Manfaat Kode QR?

Perlu Anda ketahui bahwa kode QR memiliki banyak sekali manfaat karena fleksibelitasnya tersebut. Anda dapat menggunakannya untuk berbagai keperluan penting, seperti :

1. Membagikan tautan lebih mudah
2. Meningkatkan produk dan layanan Anda
3. Informasi yang dimasukkan mudah discan oleh orang lain
4. Mempersingkat waktu kerja, karena pelanggan hanya perlu sekali scan tanpa perlu mengetikkan url secara manual
5. dan lainnya

Bagaimana Cara Memindai Code QR

Karena sangat flexibel, kode QR sangat mudah untuk dipindai. Namun tergantung perangkat Anda, misalnya beberapa smartphone sudah memiliki fitur QR scanner bawaan dikamera ponsel mereka. Untuk memindainya, buka kamera > Arahkan pada QR Code bebeapa detik > Maka tautan akan otomatis terbuka

Walaupun demikian, beberapa perangkat lain membutuhkan aplikasi pihak ketiga untuk melakukan scan pada kode QR, namun tenang Anda bisa menjumpainya banyak sekali di Google Play Store, ataupun App Store.

Cara Membuat Tool URL to QR Code Generator

Berikutnya saya akan membagikan sebuah script sederhana yang memiliki fungsi untuk meng-generate URL menjadi QR code. Saya membagikan QR Code generator free ini, Anda hanya perlu menerapkannya pada halaman HTML postingan

<div class="qr-wrapper">
  <div class="qr-header">
    <h4>QR Code Generator</h4>
    <p>Paste a url or enter text to create QR code</p>
  </div>
  <div class="qr-form">
    <input type="qr-text" spellcheck="false" placeholder="Enter text or url">
    <button class="qr-button">Generate QR Code</button>
  </div>
  <div class="qr-code">
    <img src="" alt="qr-code">
  </div>
</div>

<style>/* <![CDATA[ */
.qr-wrapper{max-width:100%;background:#fff;border-radius:7px;padding:15px;transition:height .2s ease}
.qr-header h4{font-size:21px;font-weight:500}
.qr-header p{margin-top:5px;color:#575757;font-size:16px}
.qr-wrapper .qr-form{margin:20px 0 25px}
.qr-form :where(input,button){width:100%;height:55px;border:none;outline:none;border-radius:5px;transition:.1s ease}
.qr-form input{font-size:18px;padding:0 17px;border:1px solid #eee;transition:.2s ease}
.qr-form input:focus{border:1px solid #7577a9}
.qr-form input::placeholder{color:#999}
.qr-form button{color:#fff;cursor:pointer;margin-top:20px;font-size:17px;background:#7577a9}
.qr-code{opacity:0;display:none;padding:33px 0;border-radius:5px;align-items:center;pointer-events:none;justify-content:center;border:1px solid #ccc}
.qr-wrapper.active .qr-code{opacity:1;display:flex;pointer-events:auto;transition:opacity .5s .05s ease}
.qr-code img{width:170px}
@media (max-width: 430px) {
.qr-header p{color:#696969}
.qr-form :where(input,button){height:52px}
.qr-code img{width:160px}
}
/* ]]> */</style>

  const qrWrapper = document.querySelector(".qr-wrapper"),
qrInput = qrWrapper.querySelector(".qr-form input"),
generateBtn = qrWrapper.querySelector(".qr-form button"),
qrImg = qrWrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Generating QR Code...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        qrWrapper.classList.add("active");
        generateBtn.innerText = "Generate QR Code";
    });
});

qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        qrWrapper.classList.remove("active");
        preValue = "";
    }
});

Penutup

Membuat tool URL to QR code generator cukup berguna, Anda dapat membagikannya kepada orang lain yang membutuhkannya, selain itu Anda juga bisa menggunakannya untuk keperluan pribadi sehingga penggunaan waktu lebih efisien. Jika Anda memiliki pertanyaan seputar tutorial ini silahkan berdiskusi dengan kami melalui kolom komentar dibawah