URL to QR Code Generator Make your Own [Tutorial]

Make your own QR Code script or Generate your own and place it or share it any where you want with simple steps. Let goto the tutorial.

In this Tutorial we use JQuery, CSS or CSS3 and HTML elements.

Step 1. Create a HTML or PHP file and use the basic structure code to build form.
index.html

 URL to QR Code Generator


 


  
 





Copy the Code and paste it to your website, forum, blog anywhere


 

style.css

#qr_codegen_box{
 background: rgb(225,90,0);
 position: relative;
 border: 1px solid rgb(205,70,0);
 padding: 3px;
 display: block;
 margin: 0 auto;
 width: 100%;
 max-width: 650px;
 border-radius: 2px;
}
#qr_codegen_box > div > img{
 width: 100%;
 max-width: 30px;
 position: relative;
}
#box_title{
 background: rgb(225,90,0);
 padding: 20px 10px;
 color: rgb(85,30,0);
 font-family:Roboto,verdana,arial;
 font-size: 5vmin;
 font-weight: 600;
 text-shadow: 0 -1px 0 rgba(0,0,0,1);
}
#input_field{
 width: 90%;
 margin: 2em auto;
}
#input_field > input[type=text]{
 padding: 10px;
 border: 0px;
 display: block;
 width: 100% ;
 font: 5vmin Roboto,verdana,helvetica,arial;
}
#submit_btn{
 width: -webkit-fit-content;
 width: -moz-fit-content;
 display: block;
 margin: 2em auto;
}
#submit_btn > input[type=submit],#submit_btn > input[type=reset]{
 background: transparent;
 border: 1px solid rgb(255,255,255);
 padding: 15px 10px;
 border-radius: 5px;
 font: 1.5em Roboto,verdana,arial;
 color: white;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}
#submit_btn > input[type=submit]:hover,#submit_btn > input[type=reset]:hover{
 background: white;
 color: rgb(225,90,0);
}
#response{
 position: relative;
 display: block;
 width: 300px;
 margin: 0 auto 10px;
}
#qr_code_display{
 display: none;
}
#code_container{
 position: relative;
 display:none;
 width: 90%;
 margin: 0 auto 20px;
 border-top: 1px solid #bbb;
 background: #ececec;
 padding: 5px;
}
#code_container > p{
 font: 14px verdana,helvetica,arial;
 color: rgb(100,100,100);
 margin: 0 auto 10px;
 padding: 0;
}
#embed_code{
 display: ;
 border: 1px solid #ccc;
 width: 100%;
 min-height: 100px;
 max-height: 400px;
 padding: 5px;
 font: 16px verdana,helvetica,arial;
}

jscript.js

$(function(){
 $("#btn").click(function() {
  var url = $("#text_feild").val();
  var encodeURL = encodeURIComponent(url);
  var text = "";
  $("#qr_code_display").fadeIn(1000).html(text);
  $("#code_container").fadeIn(1000);
  $("#embed_code").text(text);
  $("#reset").fadeIn(1000);
  $("#input_field").hide();
  $("input[type=submit]").hide();
 });
 $("#reset").click(function(){
  $("#qr_code_display").hide();
  $("#code_container").hide();
  $("#reset").hide();
  $("#input_field").show();
  $("input[type=submit]").show();
 });
});

Share and Create your Own.