Tahukah kamu dengan kode QR? Kali ini, kami akan membagikan tutorial bagaimana cara membuat tombol share via QR code di blogger. Sebelum itu, yuk berikan DONASI untuk mendukung kemajuan dari situs web member IzRu Web.
Kode QR atau kode respon cepat (bahasa Inggris: Quick Response) adalah bentuk evolusi kode batang dari satu dimensi menjadi dua dimensi. Kode QR pertama kali diciptakan dan dikembangkan oleh Denso Wave, sebuah perusahaan otomotif ternama di Jepang. Awalnya kode QR digunakan untuk pelacakan kendaraan bagian di manufaktur, namun kini kode QR digunakan dalam konteks yang lebih luas.
Tombol share menjadi salah satu widget yang ada di setiap postingan Blogger. Untuk membuat tombol share sosial media, sudah banyak situs web atau blog yang membagikan tutorialnya, namun kali ini ada tutorial cara membuat tombol share via QR code. Sepertinya belum ada situs yang lain membagikan tutorial ini.
Baca Juga: 5 AI Chatbot Terpopuler Versi IzRu Berbagi
- Baca Juga:
Untuk membuat tombol share via QR Code ini, blog kita harus terpasang CSS Font Awesome. Pertama, buka Blogger > Tema > Edit HTML. Jika blog kamu belum memiliki Font Awesome, kamu bisa salin kode dibawah ini lalu tempelkan di atas kode
</head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Baca Juga: Linktree Edisi Buatan Anak Bangsa
Setelah blog kamu dipastikan sudah terpasang Font Awesome, sekarang kita mulai masuk ke tahap awal. Pertama, salin kode CSS yang ada di bawah ini kemudian tempelkan di atas kode
</head>
<b:if cond='data:view.isPost'>
<style>
/* Share with QR Code by IzRu Berbagi */
#irbqr {display:none;visibility: hidden;opacity: 0;position:absolute;margin:0;} #irbqr:target{display:block;visibility:visible;opacity:1;background-color:rgba(0,0,0,0.5);position:fixed!important;display:flex!important;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s} .qr-wrap{margin: auto} .qr{display:block;margin:auto;width:550px;max-width:50%;background:#fff;color:#333;padding:20px;overflow:auto;max-height:calc(100vh - 150px)} .close{background:#3498db;color:#333;padding:10px;margin:auto;text-align:center;width:550px;max-width:55%;} .close a{color:#fff;}
.buttonqr{list-style:none;text-align:center;margin:10px!important;padding:1px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .qrlink{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .qrlink {background-color:#3498DB;} .qrlink:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .qrlink:before {content:'\f029';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
</style>
</b:if>Keterangan:
Ubah #3498db dengan warna background tutup popup sesuai keinginan.
- Baca Juga:
Tahap kedua
Salin kode tombol QR Code yang ada di bawah ini, kemudian tempelkan dibawah kode
<data:post.body/> yang kedua atau yang ketiga, atau diatas kode <div class='post-footer'>
<span class='buttonqr'><a class='qrlink' href='#irbqr' target='_top'>QR Code</a></span>
<div id='irbqr' style='display:none;'><div class='qr-wrap'><div class='close'><a href='#tutup'>Tutup</a></div>
<div class='qr'><center><i style='font-size:12px;'>Scan QR dibawah ini pada ponsel Anda</i><hr>
<img alt='Scan QR Code' expr:src='"https://chart.googleapis.com/chart?chs=250x250&cht=qr&chl=" + data:post.url'></center></div></div></div>Keterangan:
Ubah Scan QR dibawah ini pada ponsel Anda dengan kata-kata sesuai yang kamu inginkan.
Kamu bisa lihat klik disini untuk melihat demonya. Klik tulisan "QR Code" dan akan muncul pop-up QR Code.
Bagaimana, mudah bukan? Jika tertarik, kamu boleh mencobanya pada blog milikmu. Jika masih bingung, bisa kasih pertanyaan di kolom komentar. Jika bermanfaat, silahkan bagikan artikel ini kepada sahabatmu. Terima kasih.
Posting Komentar