Cara buat Kode QR menggunakan HTML, CSS, dan JavaScript

Kami sebagai tim SEO dan penulis konten yang berpengalaman, siap membantu Anda meningkatkan peringkat website Anda di Google.

Salah satu strategi efektif yang dapat Anda gunakan adalah dengan mengimplementasikan QR code dalam HTML, CSS, dan JavaScript.

QR code adalah kode dua dimensi yang dapat dengan mudah di-scan menggunakan perangkat mobile untuk mengakses informasi atau tautan yang terkait. Dalam artikel ini, kami akan membahas cara membuat QR code menggunakan kode dalam HTML, CSS, dan JavaScript untuk membantu Anda memperbaiki peringkat website Anda di Google.

Mengapa QR Code Penting untuk SEO

QR code dapat menjadi alat yang sangat efektif dalam meningkatkan peringkat website Anda di Google.

Berikut adalah beberapa alasan mengapa QR code penting untuk SEO:

Peningkatan Pengalaman Pengguna (User Experience):

QR code dapat memberikan pengalaman pengguna yang interaktif dan praktis. Pengguna dapat dengan mudah mengakses informasi tambahan atau tautan yang terkait dengan konten di website Anda melalui QR code. Pengalaman pengguna yang baik dapat meningkatkan kualitas website Anda di mata Google.

Peningkatan Interaksi Pengguna (User Engagement):

QR code dapat digunakan untuk mempromosikan interaksi pengguna dengan website Anda. Pengguna dapat memindai QR code untuk mengakses konten tambahan seperti promosi khusus, penawaran khusus, atau konten eksklusif. Interaksi pengguna yang aktif dapat meningkatkan tingkat retensi pengguna dan mempengaruhi peringkat website Anda di Google.

Diversifikasi Konten:*

QR code dapat digunakan untuk menghadirkan variasi konten yang menarik bagi pengguna. Misalnya, Anda dapat menggunakan QR code untuk mengakses video, gambar, atau konten multimedia lainnya yang dapat meningkatkan kualitas konten Anda dan membuatnya lebih menarik di mata Google.

Promosi Offline:*

QR code dapat digunakan untuk mempromosikan website Anda secara offline, misalnya di cetakan atau bahan promosi fisik lainnya. Ini dapat membantu Anda mencapai audiens baru dan memperluas cakupan promosi Anda, yang dapat berdampak positif pada peringkat website Anda di Google.

Bagikan kode pembuat Kode QR menggunakan HTML, CSS, dan JavaScript

Berikut ini adalah kode sumber alat pembuat Kode QR, saya akan membagikan kode HTML dan JavaScript sebagai yang utama, dan CSS hanya untuk referensi dan Anda perlu mengedit CSS atau menyesuaikannya agar sesuai dengan Blog Anda.

Kode HTML disisipkan pada posisi yang ingin ditampilkan.

< div  class = "qr-wrapper" > 
  < div  class = "qr-header" > 
    < h4 > Pembuat Kode QR </ h4 > 
    < p > Tempel url atau masukkan teks untuk membuat kode QR </ p > 
  </ div > 
  < div  class = "qr-form" > 
    < input  type = "qr-text"  spellcheck = "false"  placeholder = "Masukkan teks atau url" > 
    <button  class = "qr-button" > Hasilkan Kode QR </ button > 
  </ div > 
  < div  class = "qr-code" > 
    < img  src = ""  alt = "qr-code" > 
  </ div > 
</ div >

Kode CSS (referensi) disisipkan sebelum tag</head>

< style > /* <![CDATA[ */ 
.qr-wrapper { max-width : 100% ; latar belakang : #fff ; border-radius : 7px ; bantalan : 15px ; transisi : tinggi . 2s kemudahan}
 .qr-header  h4 { font-size : 21px ; font-weight : 500 }
 .qr-header  p { margin-top : 5px ; warna : #575757 ; ukuran huruf: 16px }
 .qr-wrapper  .qr-form { margin : 20px  0  25px }
 .qr-form  :where(input , button ){ width : 100% ; tinggi : 55px ; batas : tidak ada; garis besar :tidak ada; border-radius : 5px ; transisi :. 1s kemudahan}
 .qr-form  input { font-size : 18px ; padding : 0  17px ; berbatasan: 1px padat #eee ; transisi :. 2s kemudahan}
 .qr-form  input :focus { border : 1px solid #7577a9 }
 .qr-form  input ::placeholder { color : #999 }
 .qr-form  button { color : #fff ; kursor :penunjuk; margin-atas : 20px ; ukuran font : 17px ; background : #7577a9 }
 .qr-code{ opasitas : 0 ; tampilan :tidak ada; padding : 33px  0 ; border-radius : 5px ; menyelaraskan-item :pusat; pointer-events :none; justify-content :center; perbatasan : 1px padat #ccc }
 .qr-wrapper .aktif  .qr-code { opacity : 1 ; tampilan :fleksibel; pointer-events :auto; transisi : opasitas . 5 detik . kemudahan 05 }
.qr-code  img { lebar : 170px }
@ media (lebar-maks: 430px ) {
 .qr-header  p { color : #696969 }
 .qr-form  :where(input , button ){ height : 52px }
 .qr-code  img { width : 160px }
}
/* ]]> */ </ gaya >

Kode JavaScript disisipkan sebelum tag</body>

<script> //<![CDATA[ 
  const qrWrapper = dokumen .querySelector( ".qr-wrapper" ),
qrInput = qrWrapper.querySelector( ".qr-masukan formulir" ),
generateBtn = qrWrapper.querySelector( ".qr-form tombol" ),
qrImg = qrWrapper.querySelector( ".qr-code img" );
biarkan preValue;
generateBtn.addEventListener( "click" , () => {
     biarkan qrValue = qrInput.value.trim();
     if (!qrValue || preValue === qrValue) return ;
    preValue = qrValue;
    generateBtn.innerText = "Membuat Kode QR..." ;
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data= ${qrValue} ` ;
    qrImg.addEventListener( "beban" , () => {
        qrWrapper.classList.add( "aktif" );
        generateBtn.innerText = "Hasilkan Kode QR" ;
    });
});

qrInput.addEventListener( "keyup" , () => {
     if (!qrInput.value.trim()) {
        qrWrapper.classList.remove( "aktif" );
        preValue = "" ;
    }
});
//]]></skrip>

Itu saja kode untuk membuat QR Code generator menggunakan HTML, CSS dan JavaScrip yang saya bagikan di atas