Hai sobat semua, selamat datang di blog Masfajrin. Pada kesempatan kali ini kami akan membagikan tutorial Cara Membuat QR Code Generator di Blogger. QR Code adalah kode yang dapat dibaca mesin yang terdiri dari susunan kotak hitam dan putih, biasanya digunakan untuk menyimpan URL atau informasi lain untuk bisa dibaca oleh kamera pada ponsel cerdas ataupun mesin khusus.
Apa Itu QR Code?
Jika kamu melihat gambar kartu nama modern, biasanya kamu akan melihat bahwa di sisi kiri kartu, terdapat grafik aneh yang terdiri dari kotak hitam dan titik-titik. Inilah yang disebut sebagai QR Code.
Ide di balik QR Code adalah untuk membuat gambar yang bisa dipindai oleh Smartphone modern mana pun (dengan aplikasi pembaca QR Code) dan diterjemahkan menjadi sesuatu yang memiliki tujuan tertentu. QR Code sering digunakan untuk memuat informasi alamat web dan tautan, namun demikian kode tersebut juga bisa digunakan untuk mengarahkan pengguna Smartphone ke banyak media lain (misalnya video, gambar, dll).
Itu semua sudah jelas bagus dan bermanfaat, tapi apa sebenarnya kegunaan QR Code? Apakah cukup dengan mengetikkan alamat web di ponsel lalu mengunjungi situs web? Meskipun itu mungkin benar, inti dari QR Code adalah untuk menyederhanakan prosesnya. Keyboard smartphone atau tablet lebih rumit dibandingkan dengan keyboard komputer / laptop dan sebagian besar, waktu seseorang tidak dapat diganggu untuk hanya sekedar mengetikkan alamat situs web pada Smartphone mereka.
QR Code biasanya digunakan oleh para pemasar untuk menyederhanakan proses dan oleh karena itu, bisa menarik lebih banyak orang untuk mengunjungi situs web atau konten mereka. Inilah sebabnya mengapa pemasar secara teratur menempatkan QR Code pada spanduk, kartu nama, selebaran, poster, dan sebagainya.
Bagaimana Cara Kerja QR Code?
Pada dasarnya, QR Code bekerja dengan cara yang sama seperti barcode di supermarket. Ini adalah gambar yang dapat dipindai mesin yang bisa langsung dibaca menggunakan kamera Smartphone. Setiap QR Code terdiri dari sejumlah kotak hitam dan titik-titik yang mewakili informasi tertentu. Ketika Smartphone milikmu memindai kode ini, maka akan menerjemahkan informasi tersebut menjadi sesuatu yang bisa dengan mudah dipahami oleh manusia.
Sederhananya, QR Code adalah bagian data yang disandikan. Data dalam QR Code dapat berupa alfanumerik, numerik, biner atau Kanji (Kanji adalah bentuk karakter China yang digunakan dalam sistem penulisan Jepang modern).
Meskipun itu adalah penjelasan teknis tentang cara kerja QR Code, sesuatu yang jauh lebih penting untuk diperhatikan adalah fakta bahwa QR Code dapat dipindai dengan satu sentuhan tombol oleh ratusan juta orang di seluruh dunia yang menggunakan Smartphone setiap hari. Hal ini yang membuatnya bagus bagi para pemasar.
Jika kamu pernah memindai QR Code dengan Smartphone, mungkin kamu akan memperhatikan bahwa kode tersebut dapat dipindai dengan sangat cepat (kita berbicara dalam satu atau dua detik disini). Ini menjadikan QR Code sebagai cara yang sangat sederhana untuk mengakses informasi yang tersimpan dalam sekejap yang pada gilirannya menjadikan sebuah solusi sempurna bagi para pemasar yang haus konversi.
Kelebihan Alat Generator QR Code
- Ramah seluler
- Responsif
- Kamu dapat dengan mudah membuatnya di Blogger
- QR Code dapat dibuat dengan mudah
- Kamu bisa menambahkan tautan / link apapun dan menghasilkan QR Code dan dapat membagikan QR Code di media sosial
Mari kita mulai ...
DemoBagaimana Cara Membuat Alat Generator QR Code di Blogger?
Langkah 1: Pertama-tama, silahkan login terlebih dahulu ke Dashboard Blogger milikmu.
Langkah 2: Buat Postingan atau Halaman Baru atau Edit postingan atau bisa juga Halaman yang sudah ada.
Langkah 3: Beralih ke 'Tampilan HTML' dengan mengklik ikon Pensil di pojok kiri atas (secara bawaan biasanya akan berada di Tampilan Menulis, alihkan ke Tampilan HTML).
Langkah 4: Salin kode yang Masfajrin bagikan di bawah ini, lalu taruh di Postingan atau Halaman yang kamu buat tadi pada Langkah 2.
<div class='QR-bg'>
<div class="container-fluid" align="center">
<div class="text-center">
<img src="https://chart.googleapis.com/chart?cht=qr&chl=https://www.techydarshan.eu.org&chs=250x250&chld=L|0"
class="qr-code img-thumbnail img-responsive">
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" id="content" placeholder="Enter text here or add any URL here...." rows="4" cols="50"></textarea>
</div>
</div>
<i class="separate"></i>
<div class="form-group btn-group">
<button type="button" class="btn-Generate" id="generate">Generate QR Code</button>
<button type="button" class="URL-style" id="URL">Get URL</button>
</div>
</div>
</div>
</div>
<style>
.QR-bg{width:calc(100% + 40px);max-width:820px;left:-20px;right:-20px;position:relative;border-radius:10px;padding:10px 20px 40px 20px;background-color:#f7f3f6;align-items:center;justify-content:center}
.QR-bg{margin:0 auto}
.container-fluid{margin:20px 0;width:100%;}
.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:10px;line-height:1.42857143;background-color:#fff;border:1px solid #dcdcdc;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.form-control{width:100%;color:#797979;border:5px solid #f3f3f3;padding:15px;margin-top:15px;border-top-left-radius:5px;border-top-right-radius:5px;font-size:15px;outline:none;border-bottom:none;resize:none;}
.btn-group{background:#f3f3f3;width:100%;padding:21px;margin-top:-4px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;}
.btn-Generate,.URL-style{width:100%;font-size:14px;height:auto;margin-top:-5px;margin-bottom:10px;border:none;padding:10px 12px;background-color:#8775f5;border-radius:3px;color:#fefefe;transition:all .3s;}
.btn-Generate:hover,.URL-style:hover{opacity:0.7;transition:all .3s;cursor:pointer;}#URL{display:none;}
.drK .QR-bg{background-color:var(--dark-bgSec)}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
function htmlEncode(c){return $("<div/>").text(c).html()}$(function(){$("#generate").click(function(){$(".qr-code").attr("src","https://chart.googleapis.com/chart?cht=qr&chl="+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0"),$("#URL").css("display","block"),$("#URL").attr("href","https://chart.googleapis.com/chart?cht=qr&chl="+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0")})}),$(function(){$("#URL").click(function(){window.location="https://chart.googleapis.com/chart?cht=qr&chl="+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0"})});
</script>
Penyesuaian / Customization
- Kami telah menyoroti warna latar belakang, kamu dapat mengubahnya sesuai dengan keinginan.
- Ubah latar belakang tombol sesuai dengan Tema / Template yang kamu gunakan.
- Kamu dapat mengubah Textarea atau Teks yang telah kami soroti jika perlu.
- Jika tema blog kamu memiliki fitur mode gelap, ubah kelas mode gelap sesuai dengan tema tersebut agar alat ini dapat terlihat lebih baik dalam mode gelap.