How To Make Thumbnail Generator Tool in Blogger Website

Hello Everybody. I hope you are all well. Today in this post I am going to share a tool on How To Make Thumbnail Generator Tool in Blogger Website. If you are a blogger and you write posts or articles on your blog daily, then you must have created a good image for your articles.

It takes you more time to create a good image than the amount of time you take to write articles for your blog. This thumbnail generator tool is not limited only to bloggers, you can also use the thumbnails created by this tool as thumbnails for YouTube and other videos. This thumbnail generator tool will help you to become good thumbnails of your YouTube videos.

This tool is inspired by Yasya El Hakim, the owner of the El Creative Academy blog  on the tutorial " How to Easily Create Post Images Without Software ". If you want to see the pure tools you can visit the site.

Demo of Thumbnail Generator Tool in Blogger Website

How To Add Thumbnail Generator Tool in Blogger

Note :- Add Your Page Title And Description According To You Need. 

<style>
#background,.tombol-convert,.tombol-download{display:none}.thumbnail-wrapper{position:relative;display:block;border:2px solid #fff;border-radius:5px;margin:auto;background:#f87200;box-sizing:border-box;padding:20px 10px;max-width:1000px;width:calc(100% - 20px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height:1.5}.thumbnail-wrapper:hover{border-color:#000}.formthumb{position:relative;display:block;margin:10px 0;padding:0;width:100%}.formthumb label{position:relative;display:block;margin-bottom:10px;font-size:16px;font-weight:600;color:#fff}.formthumb input,.formthumb select{position:relative;display:block;margin:auto;padding:10px 15px;width:calc(100% - 30px);background:#fff;color:#444;border:3px solid #e6e6e6;outline:0;border-radius:5px}.formthumb select{width:100%}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}select{appearance:none;-webkit-appearance:none;-moz-appearance:none}::-webkit-file-upload-button{background:#000;color:#fff;padding:5px 10px;border:none;border-radius:5px;outline:0;cursor:pointer}.background{width:900px;height:472px;color:#fff;overflow:hidden;position:relative;z-index:1;opacity:1;visibility:visible;user-select:none;margin:30px auto}.content-container{display:-webkit-box;display:-ms-flexbox;display:flex;padding:30px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:420px;color:#fff!important;opacity:1!important}.footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-family:'Google Sans','Segoe UI',sans-serif;font-size:20px;font-weight:700;text-shadow:4px 2px 5px rgb(0 0 0 / 20%);-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:999}#mistar{width:60px;height:10px;display:inline-block;background:#fff;margin-right:15px;vertical-align:-3px}#output-label{position:relative;display:inline-block;font-family:'Google Sans','Segoe UI',sans-serif;font-size:20px;font-weight:700;text-shadow:4px 2px 5px rgb(0 0 0 / 20%);z-index:999;vertical-align:top}.title-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 auto;width:100%;height:400px;font-size:13px;margin-bottom:20px;transition:all .5s}#output-judul{font-size:50px;font-family:'Google Sans','Segoe UI',sans-serif;font-weight:700;padding-right:10px;line-height:1.2;text-shadow:4px 2px 5px rgb(0 0 0 / 20%);overflow:hidden;z-index:999;opacity:1;-o-text-overflow:ellipsis;text-overflow:ellipsis;-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:calc(100% - 300px);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto}#output-image{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 auto;width:300px;min-height:250px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;border-radius:7px}#output-nama{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#content-container{position:absolute;content:'';top:0;left:0;right:0;bottom:0;z-index:-999}#canvas{position:relative;display:block;margin:20px auto;text-align:center}.tombol-convert,.tombol-download{position:relative;margin:20px auto;text-align:center}button#convert-image,button#download-image,button#reset-image{display:inline-flex;align-items:center;margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:0;border-radius:15px;line-height:20px;color:#fefefe;background-color:#000;font-size:13px;font-family:var(--font-body);white-space:nowrap;overflow:hidden;max-width:100%}.darkMode .thumbnail-wrapper{background:#333;color:#f6f6f6}.darkMode .thumbnail-wrapper input.bg-color{background:#444;color:#f6f6f6;border:1px solid #666}.darkMode .thumbnail-wrapper select.bg-color{background:#444;color:#f6f6f6;border:1px solid #666}.drK .thumbnail-wrapper ::placeholder{color:#f6f6f6}
</style>
<div class="thumbnail-wrapper">
<form id="tumbnail-form">
<div class="formthumb">
<label>Background Color</label>
<select id="bg-color" name="color">
<option>Choose Your Color</option>
<option>Red</option>
<option>Pink</option>
<option>Purple</option>
<option>Deep Purple</option>
<option>Indigo</option>
<option>Blue</option>
<option>Light Blue</option>
<option>Cyan</option>
<option>Teal</option>
<option>Green</option>
<option>Light Green</option>
<option>Lime</option>
<option>Yellow</option>
<option>Amber</option>
<option>Orange</option>
<option>Deep Orange</option>
<option>Brown</option>
<option>Grey</option>
<option>Blue Grey</option>
</select>
</div>
<div class="formthumb">
<label>Upload Image</label>
<input accept="image/*" id="upload" name="upload" type="file" />
</div>
<div class="formthumb">
<label>Label of Post</label>
<input id="label" name="label" type="text" />
</div>
<div class="formthumb">
<label>Post Title</label>
<input id="judul" name="judul" type="text" />
</div>
<div class="formthumb">
<label>Author Name</label>
<input id="author" name="author" type="text" />
</div>
<div class="formthumb">
<label>Website Name</label>
<input id="nama-blog" name="nama-blog" type="text" />
</div>
</form>
<div class="background" id="background">
<div class="content-container">
<div class="header-container">
<div id="mistar"></div>
<div id="output-label"></div>
</div>
<div class="title-container">
<div id="output-judul"></div>
<div id="output-image"></div>
</div>
<div class="footer-container">
<div id="output-author"></div>
<div id="output-nama"></div>
</div>
<div id="content-container"></div>
</div>
</div>
<div class="tombol-convert">
  <a class='button convert-image' href='https://www.techyjeeshan.xyz'>Techy Jeeshan </a>
<button id="convert-image">Convert Image</button>
<button id="reset-image">Reset Image</button>
</div>
<div id="canvas"></div>
<div class="tombol-download">
<button id="download-image">Download Image</button>
</div>
</div>
<script src="https://cdn.statically.io/gh/Azidzainuri/linku/8cd1f458/html2canvas.js"></script>
<script>
var input=document.getElementById("tumbnail-form"),namaBlog=document.getElementById("nama-blog"),judul=document.getElementById("judul"),author=document.getElementById("author"),label=document.getElementById("label"),bgColor=document.getElementById("bg-color");input.onkeyup=function(){document.getElementById("output-label").innerHTML=label.value,document.getElementById("output-judul").innerHTML=judul.value,document.getElementById("output-nama").innerHTML=namaBlog.value,document.getElementById("output-author").innerHTML="@"+author.value},document.getElementById("bg-color").addEventListener("change",function(){var e="#fff #d32f2f #c2185b #7b1fa2 #512da8 #303f9f #1976d2 #0288d1 #0097a7 #00796b #388e3c #689f38 #afb42b #fbc02d #ffa000 #f57c00 #e64a19 #5d4037 #616161 #455a64".split(" ")[bgColor.selectedIndex];document.getElementById("content-container").style.backgroundColor=e,document.getElementById("background").style.display="block",document.querySelector(".tombol-convert").style.display="block"}),document.getElementById("upload").onchange=function(e){var t=document.getElementById("output-image");t.style='background:url("'+URL.createObjectURL(e.target.files[0])+'")',t.onload=function(){URL.revokeObjectURL(t.style)}},document.getElementById("convert-image").onclick=function(){html2canvas(document.querySelector(".content-container")).then(e=>{document.getElementById("canvas").appendChild(e)}),document.querySelector(".tombol-download").style.display="block"},document.getElementById("reset-image").onclick=function(){document.getElementById("canvas").innerHTML="",document.querySelector(".tombol-download").style.display="none"},document.getElementById("download-image").onclick=function(){var e=document.getElementById("judul").value.split(" ").join("-");console.log(e);var t=document.createElement("a");t.download=e+".png",t.href=document.querySelector("canvas").toDataURL(),t.click()};
</script>

Conclusion

In this post I have explained How To Make Thumbnail Generator Tool in Blogger. I Hope this tutorial can be useful for all Blogger And WordPress User. Thank You for Visiting Our Website. If you face any err or problem then put your valuable comments.