Cara Membuat Tool Pembuat QR Generator di Blogger

Tools untuk merubah teks, alamat ke kode QR

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.

class="qr-code img-thumbnail img-responsive">

Bagaimana Cara membuat Alat Pembuat Kode QR di Blogger?

Tutorial

Langkah 1: Pertama-tama Login ke Dashboard Blogger Anda.

Langkah 2: Buat Postingan atau Halaman Baru atau Edit postingan atau Halaman yang ada

Langkah 3: Beralih ke 'Tampilan HTML' dengan mengeklik icon Pensil di pojok kiri atas jari kaki (secara default akan berada di tampilan Tulis, alihkan ke Tampilan HTML

Langkah 4: 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://sentrabloggers.blogspot.com/&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>

Demikian semoga bermanfaat.

Tool Pembuat QR Generator di Blogger