Cara Membuat Tool Pembuat QR Generator di Blogger

Tools untuk merubah teks, alamat url ke kode QR

Tool Pembuat QR Generator di Blogger

---

Tools Pembuat QR Generator

Tools QR Generator adalah perangkat lunak online yang menghasilkan atau membuat Kode QR Anda di mana Anda dapat menyimpan berbagai data/informasi dalam kode Anda. Misalnya, URL yang akan mengarahkan Anda ke laman video, teks, gambar, atau situs web saat Kode QR Anda dipindai.

---

Tutorial

Bagaimana cara membuat Tool Pembuat QR Generator? Cara membuat Tool Pembuat QR Generator di blog, ikuti langkah-langkahnya sebagai berikut.

Kode Script QR Generator

1. Pertama masuk ke Dashboard Blogger.
2. Kemudian buat halaman postingan.
3. Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
4. Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'.
5. Pilih' Tampilan HTML. '.
6. Salin kode script di bawah ini dan di tempelkan ke dalam editor halaman blog.

<div class='QR-bg'>
  <div class="container-fluid" align="center">
   <div class="text-center">
      <img src="https://chart.googleapis.com/chart?cht=qr&chl=Sentra%20Bloggers%20-%20https://sae.icu/&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>

7. Terakhir - Simpan

Demikian cara membuat Alat Pembuat Kode QR di Blogger, semoga bermanfaat.

Go to Link