Cara Membuat Auto QR Code Link Artikel Blogger

---

QR Code dapat menjadi cara praktis untuk membagikan sebuah artikel Blogger dari layar komputer ke smartphone. Daripada membuat gambar QR secara manual untuk setiap posting, kita dapat membuat widget yang membaca URL halaman secara otomatis kemudian menghasilkan QR Code sesuai alamat artikel yang sedang dibuka.

Dengan cara ini satu kode widget dapat digunakan pada seluruh artikel. Ketika pengunjung membuka artikel berbeda, QR Code akan ikut berubah karena data yang digunakan berasal dari URL halaman saat itu.

Pada versi terbaru artikel ini saya tetap menggunakan layanan QR generator online, tetapi struktur JavaScript dibuat lebih sederhana dan tidak lagi menggunakan document.write(). Widget juga dibuat responsif, mempunyai tombol copy URL, native share, serta generator QR Code untuk URL atau teks lain.

AUTO ARTICLE QR QR Code Link Generator

DATA Auto URL

OUTPUT QR Code

ACTION Copy

SHARE Native

INFO

---

QR Code pada widget ini dibuat berdasarkan URL halaman yang sedang dibuka. Jika widget dipasang pada template Blogger, satu kode yang sama dapat menghasilkan QR berbeda untuk setiap artikel tanpa mengganti URL secara manual.

Apa Itu Auto QR Code Artikel Blogger?

Auto QR Code Artikel Blogger adalah widget yang mengambil URL halaman secara otomatis kemudian mengubahnya menjadi gambar QR Code. Ketika halaman berbeda dibuka, data QR akan berubah mengikuti URL halaman tersebut.

Konsepnya sederhana:

Artikel Dibuka Browser membaca halaman saat ini.

URL Dibaca JavaScript mengambil alamat halaman.

QR Dibuat URL dikirim sebagai data QR Code.

Preview Auto QR Code Artikel

ARTICLE LINK QR Code

CURRENT URL Loading URL...

QR Ready

Cara Kerja Widget QR Code

Widget membaca alamat halaman menggunakan window.location.href. URL tersebut kemudian diubah menjadi format yang aman untuk parameter URL menggunakan encodeURIComponent().

Secara sederhana proses JavaScript-nya seperti berikut:

var articleUrl = window.location.href;
var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=" + encodeURIComponent(articleUrl);

Kemudian URL gambar tersebut dimasukkan ke atribut src dari elemen gambar QR.

Kode Auto QR Code Versi Baru

Jika hanya membutuhkan QR Code otomatis tanpa tombol tambahan, gunakan kode ringan berikut.

<div class="cfAutoQR">
<div class="cfAutoQRTitle">QR Code Link</div>
<img class="cfAutoQRImage" alt="QR Code artikel" />
</div>

<script>
(function(){
"use strict";

var img=document.querySelector(".cfAutoQRImage");
if(!img)return;

var url=window.location.href;

img.src=
"https://api.qrserver.com/v1/create-qr-code/?size=300x300&data="+
encodeURIComponent(url);

})();
</script>

<style>
.cfAutoQR{
width:100%;
max-width:300px;
margin:auto;
box-sizing:border-box;
border:1px solid rgba(0,131,218,.22);
border-radius:9px;
overflow:hidden;
text-align:center;
}

.cfAutoQRTitle{
padding:7px 10px;
background:#0083da;
color:#fff;
font-size:16px;
font-weight:700;
}

.cfAutoQRImage{
display:block;
width:100%;
max-width:300px;
height:auto;
margin:auto;
}
</style>

Tidak menggunakan document.write() Elemen gambar sudah tersedia di HTML, kemudian JavaScript hanya mengubah nilai atribut src.

Manfaat QR Code pada Artikel Blog

Pindah Desktop ke Smartphone Pengunjung dapat membuka artikel pada smartphone dengan memindai QR dari layar komputer.

Berbagi Link QR dapat digunakan sebagai alternatif membagikan URL artikel.

Media Cetak Link artikel dapat dihubungkan dari poster, brosur, kartu nama, atau media fisik.

URL Panjang Lebih Praktis Pengguna tidak perlu mengetik alamat artikel yang panjang.

Promosi Produk Dapat diarahkan ke halaman katalog, promo, formulir, atau halaman produk.

Lokasi dan Kontak QR juga dapat digunakan untuk alamat Maps, nomor kontak, atau informasi lainnya.

QR Code Tidak Otomatis Memiliki Analytics

Salah satu bagian artikel lama menyebut QR Code dapat digunakan untuk mengetahui berapa kali kode dipindai. Hal tersebut hanya benar jika URL tujuan menggunakan sistem tracking atau redirect yang memang mencatat akses.

QR Code biasa pada dasarnya hanya menyimpan data. Jika isinya berupa URL artikel langsung, gambar QR itu sendiri tidak mengetahui berapa kali telah dipindai.

STATIC QR Menyimpan URL

QR hanya berisi alamat tujuan dan tidak mempunyai statistik scan sendiri.

VS

TRACKED LINK URL + Analytics

Tracking dilakukan oleh URL tujuan, redirect, UTM, atau sistem analytics.

Tentang Sejarah QR Code

QR Code dikembangkan pada tahun 1994 oleh tim Denso Wave yang dipimpin Masahiro Hara. Sistem tersebut awalnya dikembangkan untuk membantu proses pelacakan komponen dalam industri otomotif.

Seiring perkembangan smartphone dan kamera digital, QR Code kemudian digunakan jauh lebih luas untuk website, pembayaran, tiket, autentikasi, informasi produk, menu digital, lokasi, dan berbagai jenis data lainnya.

1994

QR Code Dikembangkan

Dikembangkan oleh tim Denso Wave untuk kebutuhan industri.

WEB

URL & Informasi

QR mulai banyak digunakan untuk menghubungkan media fisik dengan website.

MOBILE

Scan dari Smartphone

Kamera smartphone membuat penggunaan QR jauh lebih praktis.

Cara Memasang Widget Auto QR Code

01

Buka Blogger

Login ke dashboard Blogger kemudian pilih blog yang akan dipasang widget.

02

Buka Tata Letak

Pilih menu Tata Letak lalu tentukan area tempat widget akan dipasang.

03

Tambahkan Gadget

Klik Tambahkan Gadget pada sidebar atau area widget lainnya.

04

Pilih HTML/JavaScript

Gunakan gadget HTML/JavaScript untuk memasukkan kode QR.

05

Paste dan Simpan

Masukkan kode lalu simpan gadget dan periksa hasilnya pada halaman artikel.

Widget Lengkap dengan Copy dan Share

Jika ingin tampilan seperti preview di atas, gunakan versi lengkap berikut.

<div class="cfQrBox">

<div class="cfQrBoxHead">
<i class="fa fa-qrcode"></i>
<div>
<small>ARTICLE LINK</small>
<strong>QR Code</strong>
</div>
</div>

<div class="cfQrBoxImage">
<img class="cfQrBoxImg" alt="QR Code artikel" />
</div>

<div class="cfQrBoxUrl"></div>

<div class="cfQrBoxActions">
<button class="cfQrBoxCopy" type="button">
<i class="fa fa-copy"></i> Copy URL
</button>

<button class="cfQrBoxShare" type="button">
<i class="fa fa-share-alt"></i> Share
</button>
</div>

</div>

<script>
(function(){
"use strict";

var box=document.querySelector(".cfQrBox");
if(!box)return;

var img=box.querySelector(".cfQrBoxImg");
var urlText=box.querySelector(".cfQrBoxUrl");
var copy=box.querySelector(".cfQrBoxCopy");
var share=box.querySelector(".cfQrBoxShare");

var url=window.location.href;

img.src=
"https://api.qrserver.com/v1/create-qr-code/?size=300x300&data="+
encodeURIComponent(url);

urlText.textContent=url;

copy.addEventListener("click",function(){

if(navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(url);
return;
}

var area=document.createElement("textarea");
area.value=url;
document.body.appendChild(area);
area.select();

try{
document.execCommand("copy");
}catch(error){}

document.body.removeChild(area);

});

share.addEventListener("click",function(){

if(navigator.share){
navigator.share({
title:document.title,
url:url
}).catch(function(){});
return;
}

if(navigator.clipboard && window.isSecureContext){
navigator.clipboard.writeText(url);
}

});

})();
</script>

<style>
.cfQrBox{
width:100%;
max-width:300px;
box-sizing:border-box;
padding:10px;
border:1px solid rgba(0,131,218,.20);
border-radius:11px;
}

.cfQrBoxHead{
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
}

.cfQrBoxHead>i{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 36px;
border-radius:8px;
background:#0083da;
color:#fff;
}

.cfQrBoxHead small,
.cfQrBoxHead strong{
display:block;
}

.cfQrBoxHead small{
font-size:16px;
color:#0083da;
}

.cfQrBoxHead strong{
font-size:16px;
}

.cfQrBoxImage{
width:100%;
text-align:center;
}

.cfQrBoxImg{
display:block;
width:100%;
max-width:280px;
height:auto;
margin:auto;
}

.cfQrBoxUrl{
margin-top:7px;
padding:7px;
border:1px solid rgba(128,128,128,.18);
border-radius:6px;
font-size:16px;
line-height:1.4;
overflow-wrap:anywhere;
}

.cfQrBoxActions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px;
margin-top:7px;
}

.cfQrBoxActions button{
padding:8px 5px;
border:0;
border-radius:6px;
background:#0083da;
color:#fff;
font:inherit;
font-size:16px;
font-weight:700;
cursor:pointer;
}

@media(max-width:220px){
.cfQrBox{padding:8px;}
.cfQrBoxActions{grid-template-columns:1fr;}
}
</style>

Generator QR Code Manual

Selain QR otomatis dari URL artikel, generator berikut dapat digunakan untuk membuat QR dari link atau teks apa pun.

QR GENERATOR Custom Data Builder

URL atau teks Ukuran QR 150 × 150 200 × 200 250 × 250 300 × 300 400 × 400

Versi Sebelumnya

Versi asli artikel menggunakan JavaScript document.write() untuk menulis elemen gambar QR secara langsung ke dokumen. Kode tersebut tetap saya pertahankan sebagai referensi bagi pengguna yang sudah menggunakannya. Kode sumber lama memang berbentuk satu pemanggilan document.write().

LEGACY VERSION Auto QR document.write()

Sederhana dan masih berguna sebagai arsip implementasi widget lama.

<script>
document.write('<img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data='+window.location.href+'" style="width:100%;"/>');
</script>

WARNING

Versi lama memasukkan URL halaman langsung ke parameter query dan memakai document.write(). Untuk pemasangan baru, gunakan versi terbaru karena URL sudah melalui encodeURIComponent() dan elemen HTML tidak dibuat menggunakan document.write.

Hal yang Perlu Diperhatikan

URL Harus Di-encode Gunakan encodeURIComponent agar karakter khusus URL aman dikirim sebagai parameter.

Gunakan HTTPS Gunakan endpoint generator QR melalui koneksi HTTPS.

QR Jangan Terlalu Kecil Ukuran sekitar 200–300px nyaman untuk tampilan artikel atau sidebar.

Uji dengan Smartphone Pastikan QR dapat dipindai dari layar desktop maupun mobile.

Perhatikan URL Tracking Jika memakai parameter UTM atau tracking, QR akan menyimpan URL tersebut juga.

Siapkan Fallback QR berbasis API online bergantung pada ketersediaan server generator.

QR Code Berbasis API atau Generator Lokal?

ONLINE API Lebih Ringan

Browser hanya meminta gambar QR dari layanan eksternal.

VS

LOCAL JS Lebih Mandiri

QR dapat dibuat di browser dengan library JavaScript tanpa API gambar.

Untuk widget sederhana Blogger, API gambar lebih mudah dipasang karena tidak perlu memuat library tambahan. Jika membutuhkan sistem tanpa ketergantungan API eksternal, library JavaScript QR dapat menjadi alternatif.

Butuh QR Code Widget Custom?

CODEFLARE DEVELOPMENT Buat QR Generator Sesuai Kebutuhan Website

CodeFlare dapat membantu membuat QR Code generator, QR artikel otomatis, QR kontak, QR WhatsApp, WiFi QR, URL builder, printable QR, download QR, atau tool Blogger custom lainnya dengan tampilan responsif.

DISKUSIKAN TOOL

Auto QR Code merupakan salah satu widget kecil yang tetap berguna ketika pembaca ingin memindahkan sebuah artikel dari desktop ke smartphone dengan cepat. Karena data URL diambil secara otomatis, pemilik Blogger tidak perlu membuat QR berbeda setiap kali menerbitkan artikel.

Untuk penggunaan sederhana, QR berbasis API sudah cukup ringan. Yang terpenting adalah memastikan URL di-encode dengan benar, widget tetap responsif, dan ukuran QR masih mudah dipindai dari berbagai perangkat.