Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Webp Image Converter Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Webp Image Converter Tool in Blog - Post or Page.

What is Webp

There are many sorts of picture quality and configuration accessible today. Thus far the most famous picture designs on the Internet are JPEG and PNG. Presently individuals are involving WebP Image Format for most of their sites and online journals.

WebP Image Format has become exceptionally famous because of its little size and top caliber. Pictures can be changed over to WebP utilizing any Format picture to WebP transformation apparatus. Document sizes for JPEG and PNG are a piece bigger.

The picture is a moderately little document despite the fact that it utilizes a similar WebP Image Format. There is no distinction in picture quality.

How to Create

So, to create Webp Image Converter Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

• You will go to your - Blogger Dashboard
• Go to Theme
• Go to - Edit HTML
• Search - </head> or &lt;/head&gt;
• Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
• Save Theme

<style>
.Button{display:flex;justify-content:space-around;margin-top:15px}
.Uploadbutton{background:linear-gradient(to right,#f81894,#0000ff);border:1px solid #ff0000;border-radius:5px;font-size:20px;color:#fff;padding:7px 15px}
.Uploadbutton:active{padding:4px 15px 10px 15px}
.Uploadbutton i{font-size:16px;margin-right:7px}
img { max-height: 100%; max-width: 100%} 
.dropTarget { position: relative; border: 3px dashed silver;flex-basis:auto;flex-grow:20;min-height:500px;width:100%}
.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 {display:inline-flex;height: auto; width: 100%; padding: 20px; justify-content: center; align-items: center; vertical-align: top} 
#previews a{cursor:not-allowed}
#previews > div:after{ Content:'Click To Download'; display:block; font-weight:bold; font-size:10px; position: absolute;border:1px solid silver; padding: 2px 9px; background: #fff; } 
#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)}
</style>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

• After Save Theme
• Create a new Post or Page
• Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
• Publish

<div class="layout">
<div>
<input type="file" id="Upload" hidden/>
<div class="Button">
<label class="Uploadbutton" for="Upload"><i class="fa fa-upload"></i>Choose file</label>
</div>
</div>
<br/>
<div id="previews"></div>
<br/>
<div class="dropTarget"></div>
</div>

<script>let refs={};function addImageBox(e){let t=document.createElement("div"),n=document.createElement("progress");return t.appendChild(n),e.appendChild(t),t}function processFile(e){if(!e)return;console.log(e);let t=addImageBox(refs.imagePreviews);new Promise(function(t,n){let r=new Image;r.addEventListener("load",function(){t(r)}),r.src=URL.createObjectURL(e)}).then(function(e){return new Promise(function(t,n){let r=document.createElement("canvas"),o=r.getContext("2d");r.width=e.width,r.height=e.height,o.drawImage(e,0,0),r.toBlob(function(e){t(URL.createObjectURL(e))},"image/webp")})}).then(function(e){return new Promise(function(t,n){let r=new Image;r.addEventListener("load",function(){t({imageURL:e,scaledImg:r})}),r.setAttribute("src",e)})}).then(function(n){let r=document.createElement("a");r.setAttribute("href",n.imageURL),r.setAttribute("download",`${e.name}`),r.appendChild(n.scaledImg),t.innerHTML="",t.appendChild(r)})}function processFiles(e){for(let t of e)processFile(t)}function fileSelectorChanged(){processFiles(refs.fileSelector.files),refs.fileSelector.value=""}function dragenter(e){e.stopPropagation(),e.preventDefault()}function dragover(e){e.stopPropagation(),e.preventDefault()}function drop(e,t){t.stopPropagation(),t.preventDefault(),e(t.dataTransfer.files)}function setDragDrop(e,t){e.addEventListener("dragenter",dragenter,!1),e.addEventListener("dragover",dragover,!1),e.addEventListener("drop",function(e){drop(t,e)},!1)}refs.imagePreviews=document.querySelector("#previews"),refs.fileSelector=document.querySelector("input[type=file]"),refs.fileSelector.addEventListener("change",fileSelectorChanged),setDragDrop(document.documentElement,processFiles);
</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.