Follow us to get updates regarding Latest posts Follow Now!

How to make a QR Code Generator Tool in Blogger?

Today on this occasion our tutorial is How to make a QR Code Generator Tool in Blogger. QR Code is machine-readable code consisting of an array

In this article I have made a tutorial on How to make a QR Code Generator Tool in Blogger


Hello Everyone! Welcome to Techy DarshaN. Today on this occasion our tutorial is How to make a QR Code Generator Tool in Blogger. QR Code is 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?

If you take a look at the image of the business card above, you'll notice that on the left-hand side of the card, there is a strange graphic consisting of black squares and dots. This, essentially, is what a QR code looks like.

The idea behind a QR code is to create an image that can be scanned by any modern day Smartphone (with a QR code reader application) and translated into something more meaningful. QR codes are often used to contain web address information and links, but they can be used to direct Smartphone users to a multitude of other media too (e.g. videos, images etc).

Obviously, that's all well and good, but what actually is the point of a QR code? Surely you can just type in a web address on your phone and visit the website that way? While that may be true, the point of a QR code is to simplify the process. Smartphone (or tablet PC) keyboards are tricky compared to desktop/laptop keyboards and most of the time, people simply can't be bothered to type in website addresses on their Smartphone.

A QR code is used by marketers to simplify the process and therefore, entice more people into visiting a website or a piece of content. This is why marketers regularly place QR codes on banners, business cards, flyers, leaflets, posters and so forth.

How does QR Code work?

Basically, a QR code works in the same way as a barcode at the supermarket. It is a machine-scannable image that can instantly be read using a Smartphone camera. Every QR code consists of a number of black squares and dots which represent certain pieces of information. When your Smartphone scans this code, it translate that information into something that can be easily understand by humans.

Quite simply, a QR code is an encoded piece of data. The data in a QR code can be alphanumeric, numeric, binary or Kanji (Kanji is a form of Chinese characters that are used in the modern Japanese writing system)

Although that is the technical explanation of how a QR code works, something much more important to focus on is the fact that QR codes can be scanned at the touch of a button by the hundreds of millions of people around the world that use a Smartphone on a daily basis. This makes them great for marketers.

If you've ever scanned a QR code with your Smartphone, you'll likely have noticed that they can be scanned extremely quickly (we're talking within a second-or-two here). This makes QR codes an extremely simple way to access stored information in an instant which in-turn, makes them a perfect solution to conversion-hungry marketers.


Pros of QR Code Generator Tool

  1. Mobile friendly 
  2. Responsive 
  3. You can easily make a Tool in Blogger 
  4. QR Code can be generated easily 
  5. You can add any links and generate a QR Code of it and can share the QR Code in social media
Let's Begin


How to make a QR Code Generator Tool in Blogger?

Step 1: First of all Login to your Blogger Dashboard.

Step 2: Create a New Post or Page or Edit a existing post or Page 

Step 3: Switch to 'HTML View' by clicking on the Pencil icon in toe top left corner (by default it will be in Compose view, switch it to HTML View)

Step 4: Copy the codes given below and paste it.

<div class='QR-bg'>
  <div class="container-fluid" align="center">
   <div class="text-center">
      <img src="|0"
         class="qr-code img-thumbnail img-responsive">
   <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>
     <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>

.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-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)}

<script src=''></script>
function htmlEncode(c){return $("<div/>").text(c).html()}$(function(){$("#generate").click(function(){$(".qr-code").attr("src",""+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0"),$("#URL").css("display","block"),$("#URL").attr("href",""+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0")})}),$(function(){$("#URL").click(function(){window.location=""+htmlEncode($("#content").val())+"&chs=250x250&chld=L|0"})});


  1. I have highlighted the background colors, you can the change them according to you 
  2. Change the button background according to your Theme 
  3. Yo can change the Textarea or Text which I have highlighted if necessary. 
  4. I your theme has a Dark mode feature, change the dark mode class according to your theme to make this tool look better in dark mode too.


In this article I have made a tutorial on How to make a QR Code Generator Tool in Blogger.  I Hope you have liked this article and please do share with your friends and follow up blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright:

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.