WebP Converter Tool Script for Blogger
 |
| WebP Converter Tool Script for Blogger |
basic one page website
1 page website
great one page websites
best one page websites 2020
simple single page website
Nowadays, there is more than one quality and image formats. The most popular image formats on the Internet so far are JPEG and PNG. But now people are starting to use WebP image format for most websites and blogs.
 |
| WebP Converter Tool Script for Blogger |
Because I tell you that the size of JPEG and PNG formats is very large. But if we talk about the same WebP image format, the image size in this format is very small. But image quality is not a bar. So, due to the low size and good image quality, now WebP image formatting is very popular. You can easily convert any JPEG image to WebP using the WebP Converter tool
Also read it:
how to create a privacy policy generator website on Blogger
Any Bank Details Finder single page website
how to earn money online just google search and copy paste
Top 10 best premium seo themes for blogger
Image for WebP Converter Tool Script for Blogger:
So guys if you want to create your own image webp generator tool for website. So this is entirely possible. All you have to do is image the webp tool tool for Blogger. And with the help of this you can easily create this tool on Blogger itself. So I have given below all the steps to create this tool in Blogger.
demo link:https://onlinewebpconverterfree.blogspot.com/
single scroll website
single page web design
good one page websites
Create image for WebP converter tool in Blogger:
Go to the Blogger / Blogspot Dashboard
Now click on the theme section
Scroll down & click and use the simple blog template
Now click on the Customize arrow and switch to the first generation theme
Now click Switch Without Backup and now turn off Navbar
Click the Edit HTML & Copy Code Bellow
<!DOCTYPE html>
<html>
<title>Convert Image to Webp Format</title>
<head>
<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://tnblogtech.blogspot.com/image-to-webp-converter-tool-script-for-blogger/' 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="icon" href="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 right, #2d75e1, #00a3ff, #00c6da, #00df87, #a8eb12);">
<div class="container">
<div class="layout">
<h1>Convert Image to Webp Format</h1>
<div>
<div class="ads container">
Place Your Ad Code
</div>
<input type="file" multiple accept="image/*">
</div>
<div id="previews"></div>
<div class="dropTarget"></div>
</div>
</div>
</div>
<br>
<!--Bottom Footer-->
<div class="bottom section-padding">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="copyright">
<p>© <span>2020</span> <a href="https://www.youtube.com/channel/UCZZ1XV2ezxIgnoVvWwr97eQ?sub_confirmation=1
" class="transition">click me more </a> All rights reserved. Powered By <a href="https://tnblogtech.blogspot.com/">TnBlogTech</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</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>
Remove all Code & Paste New Code Here
best single page websites
best one page websites
Now Click on Save Theme, That’s All
Now Your Image to WebP Converter Tool is Ready to Use
webp to jpg
ReplyDeletePost a Comment