Cara Membuat QR Code Generator Menggunakan QRCode.js - QR Code sering kali kerap kita temukan dalam sebuah desain cetak atau visual, dokumen atau media lainnya. Baik digunakan untuk menyampaikan informasi berupa alamat URL, nomer telepon, teks, gambar, ataupun hal lainnya tergantung keperluan.
javascript
dan QRCode.js
. Table of Contents
Membuat QR Code Generator Menggunakan Javascript dan QRCode.js
QRCode.js adalah library javascript untuk membuat QRCode.QRCode.js
mendukung Cross-browser dengan HTML5 Canvas dan tag tabel di DOM. QRCode.js tidak memiliki ketergantungan. Ini adalah pustaka sumber terbuka yang keren, dan mudah dimengerti. Membuat Halaman QR Code Generator di Blogger
- Buka Dashboard Blogger
- Pilih menu Halaman > Buat Halaman
- Ubah tampilan nya ke Mode HTML
- Salin Code berikut HTML, CSS dan Javascript dan template di halaman
- Klik Publish
<input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here">
<p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p>
<button class="button" onclick="refreshqr()">Generate QR Code</button>
<br><br>
<div align="center" id="yourid"></div>
<style>
.user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;}
.button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>
<!--[ Script to QR Code Generator ]-->
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("yourid"), {
text: 'MyText',
width: 350,
height: 350,
colorDark : "#000",
colorLight : "#fff",
correctLevel : QRCode.CorrectLevel.H
});
function refreshqr(){
qrcode.makeCode(document.getElementById('myinput').value); // make another code.
}
</script>
Kamu bisa sesuaikan kode CSS sesuai dengan tampilan template Blogger yang kamu gunakan agar lebih menarik.
Membuat Halaman QR Code Generator di Wordpress
- Buka Dashboard Worpdress
- Pilih Halaman > Buat Halaman Baru
- Ubah tampilan nya ke Mode HTML
- Salin Code berikut dan template di halaman
- Klik Publish
<style>
.user-input {width: 100%;outline: none;border: none;border-radius: 0.5rem;background: #9b8774ad;}
.button {display:inline-flex;align-items:center; margin:10px 0;padding:12px 15px;outline:0;border:0; border-radius:3px;line-height:20px; color:#fffdfc; background:#204ecf; font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px}
</style>
<input class="user-input" id="myinput" type="text" onchange="refreshqr()" placeholder="Enter Your QR Here">
<p class='note'>Supports Dynamic Codes, Tracking, Analytics, Free text, vCards and more.</p>
<button class="button" onclick="refreshqr()">Generate QR Code</button>
<br><br>
<div align="center" id="yourid"></div>
<!--[ Script to QR Code Generator ]-->
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("yourid"), {
text: 'MyText',
width: 350,
height: 350,
colorDark : "#000",
colorLight : "#fff",
correctLevel : QRCode.CorrectLevel.H
});
function refreshqr(){
qrcode.makeCode(document.getElementById('myinput').value); // make another code.
}
</script>
Kamu bisa sesuaikan kode CSS sesuai dengan tampilan tema wordpress yang kamu gunakan agar lebih menarik.