How To Make Thumbnail Generator Tool in Blogger Website - UNPLUG.DOC

Add Thumbnail Generator Tool In Blogger And Simple To Add On Your Blogger Website

Step 1 :- First of All You Need To Login With Your Blogger or WordPress Account. 

Step 2 :- Then Click on Page Menu. 

Step 3 :- Then Create a New Page. 

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

Step 4 :- Then Click on Html View. 

Step 5 :- Then Copy The Code Provided Below And Paste it in HTML View.

HTML CODE

<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='wwwcrack-pakistan.blogspot.com'>CrackBlogger </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>

The social media widget is now fully built and working correctly if you follow all the steps correctly. If you have questions or steps that you do not understand, please write down the questions and concerns in the comment column below.