QR Code Generator Tool Script

Hello Guys, today I am starting a new category Script for you. In this category, I will provide you best scripts for your blogger blog. In this post, we will learn how to create a QR Code Generator Tool in blogger for free. First of all, what is QR Code?  What is QR Code Generator Tool? are the questions we will look at in these posts. By the end, you will be able to create your QR Code Generator Tool. Didn’t feel excited? Let’s look into it.

QR Code Generator Tool Script

What Is QR Code?

‘QR’ stands for Quick Response and plus Code. It is a two-dimensional barcode that is readable by smartphones. It allows encoding over 4000 characters in a two-dimensional barcode. It is generally used to create links, text or compose text, etc. Given below is an image of the QR Code. To use a QR Code you need to have Scanner App. There are plenty of options that are available on the play store and spp store. If you feel lazy then here is the link for QR Code Scanner App.

What Is QR Code Generator?

If you understand what is QR Code then you can easily understand that the generator is a sort of script which generates QR Code. So it is basically a tool that creates QR codes. If you didn’t understand then visit our QR Code Generator tool.

QR Code Generator Tool

Now let’s talk about how to make this tool. If you want this for your blogger website then you just need to know about javascript, HTML, and CSS. Blogger supports these three things. Now I will provide you the source code.

QR Code Generator Tool Script

Below is the QR Code Generator Tool Script. There are three separate codes for HTML, CSS, and javascript. You need to copy them.

CSS

<style> 
	#qr-container{
		width: 100%;
		margin-top: 50px;
	}
	#qr-error-msg-container{
		width: 80%;

	}
	#qr-form-container{
		width: 80%;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	#qr-download-btn{
		background-color: transparent;
		font-weight: bold;
		font-size: 30px;
	}
	#qr-error-msg{
		width: auto;
		background-color: bisque;
		padding: 15px;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	#qr-call-btn, #qr-download-btn {
		width: 20%;
		border-radius: 0px;
		background-color: #FF6666;
		color: white;
		border: 2px solid #FF6666;
		padding: 15px;
		font-family: poppins, sans-serif;
		outline: none;
	}
	#qr-input-content{
		width: 80%;
		border-radius: 0px;
		color: #FF6666;
		background-color: white;
		border: 2px solid #FF6666;
		padding: 15px;
		font-family: poppins, sans-serif;
		outline: none;
	}
	#qr-download-section{
		text-align: center;
	}

	@media screen and (max-width:800px) {
		#qr-form-container{
			width: 100%;
			text-align: center;
			flex-direction: column;
		}
		#qr-error-msg-container{
		width: auto;
	}
	
		#qr-input-content{
			width: auto;
			float: none;
		}
		#qr-call-btn , #qr-download-btn, #qr-error-msg{
			width: auto;
			margin-top: 10px;			
		}
		#qr-download-btn{
			width: 100%;
		}
	}
</style>

HTML & JS

<div id="qr-form-container">
	
		<input class="form-control" id="qr-input-content" placeholder="Enter text/link" required="" type="text" /> 
		<br />	
			<button id="qr-call-btn" type="button">Generate</button> 		
	
	
</div>

<div id="qr-error-msg-container" style="margin: auto;"> 

	<p><br /></p>
	<div id="qr-error-msg" style="border-radius: 0%; font-family: poppins, sans-serif; margin: auto;">
		<strong>Warning! Please Enter Something...</strong> 
		<button id="close-qr-error" style="background-color: transparent; border: none; font-size: 16px; font-weight: bold;" type="button">-</button>
	</div>
	</div>
<div class="text-center" id="qr-download-section"> 
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> 

<script> 

	

	function chartCall(value) { 
		return $('<div/>').text(value).html(); 
	} 

	$('#close-qr-error').on("click", function(){
		$('#qr-error-msg').hide();
	});

	$(function () { 
		$('#qr-error-msg').hide();
		$('#qr-call-btn').click(function () {
			if($('#qr-input-content').val() != 0){
				$('#qr-error-msg').hide();
			$("#qr-download-section").empty();
			let finalURL = 'https://chart.googleapis.com/chart?cht=qr&chl=' + chartCall($('#qr-input-content').val()) + '&chs=200x200&chld=L|0'; 
			var qrImg = "<img src='' class='qr-code' />";
			$("#qr-download-section").append(qrImg);
			$('.qr-code').attr('src', finalURL); 
			var qrSpace = "<p><br></p>";
			var qrDwnldBtn= "<a  href="+finalURL+"> <button id='qr-download-btn' type='button' style='font-size: 12px;'>Download</button> </a> ";
			$("#qr-download-section").append(qrSpace,qrDwnldBtn);
			}
			else{
                $("#qr-download-section").empty();
				$('#qr-error-msg').show();
			}
		}); 
	}); 
</script></div>

How To Use This Code In Blogger?

Many of us don’t understand programming languages and how external and inline code works. So for them just copy these codes in ascending order and also paste them in ascending order.
  1. First Sign In to Blogger dashboard.
  2. Click on Page Option.
  3. Create a New Page.
  4. Click on HTML Section.
  5. Paste these codes one by one on the same page.
  6. Click on Publish and your tool is now ready.
 

Conclusion

That’s All. I hope that this will work for you and if not please tell in the comment box. I will try my best to fix any issue regarding this topic. Also, if found useful then share it on social media. So my blog posts will get more exposure. Thanks

Nkcoderz.com is a website that provides you with information related to technology, entertainment, how-to, gadgets, and gaming, etc. We try our best to explain you. If you have any suggestions then kindly contact.

Leave a Comment

Copy link
Powered by Social Snap