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.
Source
www.google.com
Pros of QR Code Generator Tool
- Mobile friendly
- Responsive
- You can easily make a Tool in Blogger
- QR Code can be generated easily
- You can add any links and generate a QR Code of it and can share the QR Code in social media
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="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>Customization
- I have highlighted the background colors, you can the change them according to you
- Change the button background according to your Theme
- Yo can change the Textarea or Text which I have highlighted if necessary.
- 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.
Conclusion
© Copyright: Techydarshan.eu.org