How to make a QR Code Generator Tool in Blogger?

Hello Everyone! Welcome to PH Wizards. Today on this occasion our tutorial is How to make a QR Code Generator Tool in Blogger? A QR Code is a machine-readable code consisting of an array of black and white squares, typically used for storing URLs or other information for reading by the camera on a smartphone.

What is QR Code?

Assuming that you investigate the picture of the business card above, you'll see that on the left-hand side of the card, there is a bizarre realistic comprising of dark squares and dabs. This, basically, is what a QR code resembles.

The thought behind a QR code is to make a picture that can be examined by any current Smartphone (with a QR code peruser application) and converted into something more significant. QR codes are frequently used to contain web address data and connections, yet they can be utilized to guide Smartphone clients to a large number of different media as well (for example recordings, pictures, and so on).

Clearly, that is just fine, however, why bother with a QR code? Most likely you can simply type in a web address on your telephone and visit the site that way. While that might be valid, the mark of a QR code is to improve the interaction. Cell phone (or tablet PC) consoles are precariously contrasted with work area/PC consoles and more often than not, individuals essentially can't be tried to type in that frame of mind on their Smartphone.

A QR code is utilized by advertisers to work on the interaction and in this manner, tempt more individuals into visiting a site or a piece of content. For this reason, advertisers consistently put QR codes on pennants, business cards, flyers, handouts, banners, etc.

How does QR Code function?

Fundamentally, a QR code works similarly to a standardized tag at the grocery store. A machine-searchable picture can in a split second be perused utilizing a Smartphone camera. Each QR code comprises various dark squares and spots which address specific snippets of data. At the point when your Smartphone filters this code, it makes an interpretation of that data into something that can be effectively comprehended by people.

Essentially, a QR code is an encoded piece of information. The information in a QR code can be alphanumeric, numeric, twofold, or Kanji (Kanji is a type of Chinese character that is utilized in the cutting-edge Japanese composing framework)

Albeit that is the specialized clarification of how a QR code functions, something considerably more vital to zero in on is the way that QR codes can be examined at the hint of a button in large numbers of millions of individuals all over the planet that utilization a Smartphone consistently. This makes them extraordinary for advertisers.

Assuming that you've at any point checked a QR code with your Smartphone, you'll probably have seen that they can be examined incredibly rapidly (we're talking in something like a little while here). This makes QR codes a very straightforward method for getting to put away data in a moment which thus, makes them an ideal answer for change-hungry advertisers.

Masters of QR Code Generator Tool

1. Mobile friendly 
2. Responsive 
3. You can undoubtedly make a Tool in Blogger
4. QR Code can be created without any problem
5. You can add any connections and produce a QR Code of it and can share the QR Code in web-based entertainment.

Let's Begin!

How to make a QR Code Generator Tool in Blogger?

Stage 1: Above all else Login to your Blogger Dashboard.

Stage 2: Make a New Post or Page or Edit a current post or Page.

Stage 3: Change to 'HTML View' by tapping on the Pencil symbol in the upper left corner (of course it will be in Compose view, change it to HTML View)

stage 4: Duplicate the codes given beneath and glue them.

<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>