Cara Membuat Barcode Generator Di Blogger

Nah, pastinya sobat akan bertanya-tanya, bagaimana cara membuat dan memasang QR Kode genator di blogger atau blogspot, dan apa yang harus dilakukan selanjutnya, untuk itu, mari ikuti dan simak baik-baik untuk tutorial dibawah ini dengan penjelasan maupun langkah-langkahnya sebagai berikut.

Sebelum sobat membuat kode QR generator di blogspot, terlebih dahulu sobat sudah menyiapkan kodingan begitu sederhana seperti CSS,HTML atau juga Javascript, nah untuk sobat, supaya bisa lebih mudah mempelajari dan memahami bagaimana cara proses pasang QR genarator diblogger, mari lihat langakah selanjutnya seperti dibawah ini.

1. Pertama sekali, sobat terlebih dahulu login kedalam blogger.

2. Masuk kedashboard blogger sobat tersebut.

3. Tepat dibagian dashboard blogger, sobat pilih Halaman.

4. Lalu sobat silahkan untuk Buat Halaman.

5. Jangan lupa untuk memberikan nama dihalaman.

6.Tepat dibagian halaman, sobat pilih Tampilan HTML.

7. Lalu sobat salin kode dibawah ini

.wrapper{

  height: 265px;

  max-width: 410px;

  background: #fff;

  border-radius: 7px;

  padding: 20px 25px 0;

  transition: height 0.2s ease;

  box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}

.wrapper.active{

  height: 530px;

}

.wrapper .form{

  margin: 20px 0 25px;

}

.form :where(input, button){

  width: 100%;

  height: 55px;

  border: none;

  outline: none;

  border-radius: 5px;

  transition: 0.1s ease;

}

.form input{

  font-size: 18px;

  padding: 0 17px;

  border: 1px solid #999;

}

.form input:focus{

  box-shadow: 0 3px 6px rgba(0,0,0,0.13);

}

.form input::placeholder{

  color: #999;

}

.form button{

  color: #fff;

  cursor: pointer;

  margin-top: 20px;

  font-size: 17px;

  background: #3498DB;

}

.qr-code{

  opacity: 0;

  display: flex;

  padding: 33px 0;

  border-radius: 5px;

  align-items: center;

  pointer-events: none;

  justify-content: center;

  border: 1px solid #ccc;

}

.wrapper.active .qr-code{

  opacity: 1;

  pointer-events: auto;

  transition: opacity 0.5s 0.05s ease;

}

.qr-code img{

  width: 170px;

}

@media (max-width: 430px){

  .wrapper{

    height: 255px;

    padding: 16px 20px;

  }

  .wrapper.active{

    height: 510px;

  }

  header p{

    color: #696969;

  }

  .form :where(input, button){

    height: 52px;

  }

  .qr-code img{

    width: 160px;

  }  

}

8. Berikutnya, sobat juga harus masuk ke bagian struktur HTML blog yang sudah sobat buatkan tadi, dan tempelkan kode CSS dibawah ini.

  <div class=”wrapper”>

      <div class=”form”>

        <input type=”text” spellcheck=”false” placeholder=”Enter text or url”>

        <button>Generate QR Code</button>

      </div>

      <div class=”qr-code”>

        <img src=”” alt=”qr-code”>

   </div>

</div>

9. Pada bagian akhirnya, sobat juga harus memasukkan kode script javascript pada bagian halaman yang sudah berhasil sobat buatkan di blog atau situs, lalu letakkan dibawah struktur HTML, nah salin kode dibawah ini ya sobat.

const wrapper = document.querySelector(“.wrapper”),

qrInput = wrapper.querySelector(“.form input”),

generateBtn = wrapper.querySelector(“.form button”),

qrImg = wrapper.querySelector(“.qr-code img”);

let preValue;

generateBtn.addEventListener(“click”, () => {

    let qrValue = qrInput.value.trim();

    if(!qrValue || preValue === qrValue) return;

    preValue = qrValue;

    generateBtn.innerText = “Generating QR Code…”;

    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200×200&data=${qrValue}`;

    qrImg.addEventListener(“load”, () => {

        wrapper.classList.add(“active”);

        generateBtn.innerText = “Generate QR Code”;

    });

});

qrInput.addEventListener(“keyup”, () => {

    if(!qrInput.value.trim()) {

        wrapper.classList.remove(“active”);

        preValue = “”;

    }

});

10. Lalu sobat simpan dan lihat hasilnya diblogger sobat, maka kode barkode QR generator blogger sudah berhasil dibuat.