How to Make a Thumbnail Generator Tool for Blog Posts Support Upload Image

www.azid45.web.id - Tools Generator Thumbnail Postingan Blog. Assalamualaikum.Wr.Wb semuanya. Kali ini saya akan share tools yang tidak kalah keren dari tools sebelumnya, yaitu tools generator tumbnail.

Tools Generator Thumbnail berfungsi untuk membuat thumbnail postingan blog Anda. Dimana Anda tidak perlu lagi software untuk mengedit setiap thumbnail post yang Anda butuhkan. Anda cukup mengisi form seperti label blog, judul blog, author, nama blog serta upload foto yang berhubungan dengan judul blog.

Tools ini terinspirasi milik Mas Yahya El Hakim pemilik blog El Creative Academy pada tutorial "Cara Membuat Gambar Postingan dengan Mudah Tanpa Software". Bila ingin melihat tools murninya Anda bisa berkunjung ke situs tersebut.

Apa bedanya Tools Generator Thumbnail milik saya dengan Mas Yahya?. Jika dari segi fungsi sama, akan tetapi dari segi fitur dan tampilan agak sedikit berbeda. Javascriptnya pun sudah banyak yang saya rubah, mulai dari html2Canvas sudah saya ubah menjadi versi yang terbaru, tombol convert HTML to Canvas, tombol reset Image dan perubahan tombol download Image yang awalnya jpeg menjadi png.

Sebab bila menggunakan jpeg ouput yang dihasilkan akan menjadi error tidak bisa dibuka. Oleh karena itu bila Anda ingin mendesain ulang dari script aslinya Anda bisa mengubah javascript Canvas2Image.saveAsJPEG(canvas, 900, 470) menjadi Canvas2Image.saveAsPNG(canvas, 900, 470) agar output downloadnya tidak error atau corrupt.

Selain pembaharuan html2Canvas, perbaikan tombol download dan penambahan tombol convert dan reset saya juga menambahakn upload image agar tidak terlihat monoton. Disamping itu saat Anda download Image, Anda tidak perlu lagi edit judul imagenya sebab sudah saya setting nama thumbnail sesuai dengan judul blog dan pastinya sudah SEO Friendly dengan mengubah spasi menjadi tanda hubung (-).

Bila Anda tertarik untuk membuatnya juga, Anda bisa copy paste kode dibawah ini:

<style>
body {
    font-family: 'Google Sans', 'Segoe UI', sans-serif;
    background: #fff;
} 
#background, .tombol-convert, .tombol-download {
    display: none;
}  
.thumbnail-wrapper {
    position: relative;
    display: block;
    margin: auto;
    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;
}
.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: #444;
}
.formthumb input, .formthumb select {
    position: relative;
    display: block;
    margin: auto;
    padding: 10px 15px;
    width: calc(100% - 30px);
    background: #fff;
    color: #444;
    border: 1.5px solid #007bff;
    outline: none;
    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: #007bff;
    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 0.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{
    color: #fff;
    background-color: #007bff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 15px;
    margin: 0 auto;
}   
</style>
<div class='thumbnail-wrapper'>
  <form id='tumbnail-form'>
    <div class='formthumb'>
      <label for='color'>Warna Background</label>
      <select id='bg-color' name='color'>
        <option>Pilih Warna</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 for='upload'>Upload Image</label>
      <input id='upload' name='upload' type='file' accept='image/*'/>
    </div>
    <div class='formthumb'>
      <label for='label'>Label Postingan</label>
      <input id='label' placeholder='Tulis Label Disini' name='label' type='text'/>
    </div>
    <div class='formthumb'>
      <label for='judul'>Judul Postingan</label>
      <input id='judul' placeholder='Tulis Judul Disini' name='judul' type='text'/>
    </div>
    <div class='formthumb'>
      <label for='author'>Author</label>
      <input id='author' placeholder='Tulis Author Disini' name='author' type='text'/>
    </div>
    <div class='formthumb'>
      <label for='nama-blog'>Nama Blog</label>
      <input id='nama-blog' placeholder='Tulis Nama Blog Anda Disini' 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'>
    <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 background = "#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 = background;
    document.getElementById("background").style.display = "block";
    document.querySelector(".tombol-convert").style.display = "block";
  }); 
  document.getElementById("upload").onchange = function(event) {
    var output = document.getElementById('output-image');
    output.style = 'background:url("'+URL.createObjectURL(event.target.files[0])+'")';
    output.onload = function() {
      URL.revokeObjectURL(output.style);
    }
  };  
  document.getElementById('convert-image').onclick = function (){
    html2canvas(document.querySelector(".content-container")).then(canvas => {
      document.getElementById('canvas').appendChild(canvas);
    });
    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 title = document.getElementById("judul").value.split(" ").join("-");
    console.log(title)
    var link = document.createElement('a');
    link.download = title+'.png';
    link.href = document.querySelector('canvas').toDataURL();
    link.click();
  }
</script>

Keterangan:

Untuk kode CSS bila tampilan ada yang berantakan, Anda bisa mengubah width: calc(100% - x) menjadi width: 100%, kecuali pada selector .title-container

Untuk melihat demonya Anda bisa klik dibawah ini:

Tools Generator Thumbnail

Baiklah itu adalah tutorial singkat cara membuat tools generator thumbnail. Kode tersebut Anda bisa pastekan dimana saja yang Anda inginkan baik itu di akun github, di post halaman atau yang lainnya. Anda juga bisa mengembangkan lagi dan memperbaiki tampilan tools tersebut sebab scriptnya open source tidak saya ensyscript.

Saya juga berterimakasih kepada Mas Yahya yang sudah membuat gagasan luar biasa terkait Tools Generator Thumbnail ini. Mungkin jika tidak ada pendahulunya sampai saat ini saya tidak dapat membuat tools tersebut.

Demikianlah tutorialnya tentang Tools Generator Thumbnail Postingan Blog semoga bermanfaat. Amin.