Skip to main content

How To Make Tool Website In Blogger To Convert Any Image Into Webp Format

Image
By

 Hey guys welcome to the blogs of Tech Era,So today we are back with a stunning script in blogger which will convert any type of image into webp format.As we know that images are in jpg,jpeg,png..etc format.But now a days on internet webp format is widely used as image format because in webp format image size is very small and the quality of image is high.So that is a reason why we are now using webp format images.
So here in this blog we will learn how to setup a website which will convert image into webp format . After completing website setup it is necessary to do the SEO setting,as seo will help you website to rank.
So below are the steps for setuping site in blogger, follow them and start Earning from your tool site.
Click On The Below Links To Learn How To Do Them
https://www.techera.xyz/2020/11/how-to-make-tool-website-in-blogger-to.html

Do The Following Steps For Making Website In Blogger For Converting Image To Webp Format :

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

Step 2: Go to Themes,then scroll down and select Simple Theme template,then click on down arrow and select Mobile Setting then click on Desktop and click Save after then select Switch To First Generation Classic Theme, and then select Switch Without Backup and then again click on down arrow and select Change Navbar option and again a drop down arrow will come then select option Off click on Save.

Step 3: Then Click on edit Html and select the entire code and delete it,after deleting the complete code,Copy the below code and then click on Save.

<!DOCTYPE html>
<html>
  <!-- Made by:- Sudarshan Pandey -->
  <!-- You Tube Channel:- TECH ERA-->
  <!-- You Tube Channel Link:- youtube.com/techeraofficial -->
<title>Convert Image to Webp Format</title>
<head>
     <!-- ****** Fully Customize By Sudarshan Pandey Creator Of Tech Era You Tube Channel ********* -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp"/>
<meta name="robots" content="index,follow" />
<meta name="keywords" content="Jpeg To Webp Converter, Jpeg To Webp Converter Tool, Convert Jpeg To Webp, Compress Webp, Jpg To Webp Python, Jpg To Url, Webp Converter Download Free Convert Jpeg To Webp" />
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href='https://imageconverterwebp-image.blogspot.com/' rel='canonical'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" href="https://spemer.com/img/works/favicon/favicon.png" sizes="16x16" type="image/png">
  <style>
    
  body {
  width: 700px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}
h1 {
  margin-top: 0;
}
input[type=file] {
  margin: 20px 0;
  margin-left: 200px;
}
img {
  max-height: 100%;
  max-width: 100%;
  box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
}
.dropTarget {
  position: relative;
  border: 3px dashed silver;
  flex-basis: auto;
  flex-grow: 20;
}
.dropTarget::before {
  content: 'Drop files here';
  color: silver;
  font-size: 5vh;
  height: 5vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
#previews > div {
  box-sizing: border-box;
  height: 240px;
  width: 240px;
  padding: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}
#previews > div > progress {
  width: 80%;
}
.layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  height: calc(100vh - 40px);
  margin: 2% auto;
  padding: 15px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}
.ads {  
   margin: auto;
   padding: 60px 0; 
   max-width: 640px;   
   box-shadow: 0 5px 15px rgba(0,0,0,.16);  
   border-radius: 5px;  
   margin-top: 1em;  
   background: #fff;  
   text-align: left;  
 }
  </style>
</head>
<body style="background-image:linear-gradient(to top left, #ffff00 0%, #ff33cc 100%);">
  <nav class="navbar navbar-default">
    <!-- Button to Open the Privacy Page Modal -->
<div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#privacy-page">
 Our Service
</button></div>
    
    <!-- Button to Open the Contact Page Modal -->
<div><button type="button" class="btn btn-primary" style="float:right;margin:4px" data-toggle="modal" data-target="#Contact-Us">
  Contact Us
</button></div>
    
    <div><button type="button" class="btn btn-primary" style="float:right; margin:4px" data-toggle="modal" data-target="#about-page">
  About Us
  </button></div>

  </div>
</nav>

                  
<style id='page-skin-1' type='text/css'>

button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 12px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

</style>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <!-- *********** SUDARSHAN PANDEY ********** -->

<!-- About page Modal -->
  <!-- ****** FUlly Customize By Sudarshan Pandey Creator Of Tech Era You Tube Channel ********* -->
<!-- The Modal -->
<div class="modal" id="about-page">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">About Page</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">

About

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End About page Modal -->

<!-- Contact Modal -->
<!-- The Modal -->
<div class="modal" id="Contact-Us">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Contact Us</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
       <!-- Owner-: Sudarshan Pandey -->
        
   Contact
   
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End privacy page Modal -->

<!-- privacy page Modal -->
<!-- The Modal -->
<div class="modal" id="privacy-page">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Our Service</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        
Our Service
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End privacy page Modal -->
<div class="container">
  <div class="layout">
  <h1>Free Image Converter Tool From Any Format To Webp Format</h1>
    <p>By Using This Free Tool Your Image Size Will Compress And You Will Not Lose Image Quality</p>
  <div>
  <div class="ads container">  
    <!-- Adsense code here -->
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 2020 All Right Reserved | Made By-: Sudarshan Pandey     
            </div> 
    <input type="file" multiple accept="image/*">
  </div>
  <div id="previews"></div>
  <div class="dropTarget"></div>
</div>
</div>
 </div>
<br>
<!-- ****** FUlly Customize By Sudarshan Pandey Creator Of Tech Era You Tube Channel ********* -->
</body>
<script>
let refs = {};
refs.imagePreviews = document.querySelector('#previews');
refs.fileSelector = document.querySelector('input[type=file]');

function addImageBox(container) {
  let imageBox = document.createElement("div");
  let progressBox = document.createElement("progress");
  imageBox.appendChild(progressBox);
  container.appendChild(imageBox);
  
  return imageBox;
}

function processFile(file) {
  if (!file) {
    return;
  }
  console.log(file);

  let imageBox = addImageBox(refs.imagePreviews);

  // Load the data into an image
  new Promise(function (resolve, reject) {
    let rawImage = new Image();

    rawImage.addEventListener("load", function () {
      resolve(rawImage);
    });

    rawImage.src = URL.createObjectURL(file);
  })
  .then(function (rawImage) {
    // Convert image to webp ObjectURL via a canvas blob
    return new Promise(function (resolve, reject) {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext("2d");

      canvas.width = rawImage.width;
      canvas.height = rawImage.height;
      ctx.drawImage(rawImage, 0, 0);

      canvas.toBlob(function (blob) {
        resolve(URL.createObjectURL(blob));
      }, "image/webp");
    });
  })
  .then(function (imageURL) {
    // Load image for display on the page
    return new Promise(function (resolve, reject) {
      let scaledImg = new Image();

      scaledImg.addEventListener("load", function () {
        resolve({imageURL, scaledImg});
      });

      scaledImg.setAttribute("src", imageURL);
    });
  })
  .then(function (data) {
    // Inject into the DOM
    let imageLink = document.createElement("a");

    imageLink.setAttribute("href", data.imageURL);
    imageLink.setAttribute('download', `${file.name}.webp`);
    imageLink.appendChild(data.scaledImg);

    imageBox.innerHTML = "";
    imageBox.appendChild(imageLink);
  });
}

function processFiles(files) {
  for (let file of files) {
    processFile(file);
  }
}

function fileSelectorChanged() {
  processFiles(refs.fileSelector.files);
  refs.fileSelector.value = "";
}

refs.fileSelector.addEventListener("change", fileSelectorChanged);

// Set up Drag and Drop
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(callback, e) {
  e.stopPropagation();
  e.preventDefault();
  callback(e.dataTransfer.files);
}

function setDragDrop(area, callback) {
  area.addEventListener("dragenter", dragenter, false);
  area.addEventListener("dragover", dragover, false);
  area.addEventListener("drop", function (e) { drop(callback, e); }, false);
}
setDragDrop(document.documentElement, processFiles);
</script>
</html>

Step 4: Now your website is successfully completed,after ward when traffic is comming to your site the purchase a custom domain,then your site will look as professional and add some pages in yours site and If you get adsense approval,then you can start your earning by adding ads.
 
See Live Website -: CLICK HERE

Watch The Video Tutorial


Labels:
Location: Bareilly Rd, Old City, Jogi Navada, Bareilly, Uttar Pradesh 243006, India

Comments

Post a Comment

Please Do Not Enter Any Spam Link.