Tips & Trick Merubah ukuran thumbnail & image di posting blogger

Ini hanyalah sebuah tips dan trik sederhana yang mungkin saja tak tersentuh oleh banyak blogger. Sebuah cara untuk merubah ukuran sebuah image (terutama thumbnail) agar bisa dibuat sesuai selera blogger. Semua cukup dilakukan melalui halaman posting pada posting mode Compose dan mode Edit HTML.

Pengaturan ukuran images/thumbnail sangat diperlukan dengan pertimbangan;

• Untuk mendapatkan image/thumbnail dengan ukuran tepat agar dapat ditampilkan di halaman blog dengan cantik.
• Untuk mengatur beban images agar loading blog selalu dalam keadaan sempurna. Perlu diperhatikan bahwa penggunaan images berukuran besar dengan beban berat dalam jumlah banyak akan sangat mempengaruhi kecepatan loading.
• Pengaturan ukuran thumbnail (image berukuran kecil dan biasanya berukuran maksimal 200px pada width atau height) yang tepat dan seragam memungkinkan blogger membuat sebuah image gallery dalam berbagai ukuran dengan penampilan tetap menarik.

Cara melakukan perubahan ukuran image/thumbnail

• Login ke Blogger.
• Halaman Dasbor (Dasboard).
• Posting
• Entri Baru (New Post).
• Posisikan fitur posting pada mode Compose
• Klik fitur Insert Image 
• Klik Pilih Berkas (Choose File). Tunggu hingga proses upload selesai.
  Klik gambar di bawah ini!

• Add Selected
• Kembali di box posting dan akan terlihat gambar (image) yang telah di upload. Klik tepat pada image.
  
  • Atur ukuran image/thumbnail dengan klik pada pilihan yang tersedia. Small untuk ukuran kecil, Medium untuk ukuran sedang dan Large untuk ukuran besar.
  • Atur Posisi image/thumbnail dengan klik pada pilihan yang tersedia. Left untuk sebelah kiri, Center untuk tengah dan Right untuk sebelah kanan.
  • Atur Posisi image/thumbnail dengan klik pada pilihan yang tersedia. Left untuk sebelah kiri, Center untuk tengah dan Right untuk sebelah kanan.
  • Add Caption untuk menambahkan teks.
Silahkan Klik Image di atas!
• Khusus untuk merubah ukuran thumbnail atau image, setelah klik pada pilihan ukuran image, lanjutkan dengan merubah mode posting ke mode Edit HTML
  
  • Misalnya anda telah tentukan setting image pada Small, Left tanpa menggunakan Add Caption.
  • Setelah klik "Edit HTML yang dijumpai di box posting adalah kode html dalam bentuk seperti di bawah ini.

  Kode HTML Image Hasil Upload di Blogger:

  <div class="separator" style="clear: both; text-align: center;">
  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s1600/img_gubhugreyot_gadisku-06.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s200/img_gubhugreyot_gadisku-06.jpg" width="200" /></a></div>

  • Perhatikan pada kode yang berwarna merah dan biru:
  - s200 : kode ini dapat dirubah nilainya untuk mendapatkan ukuran image berbeda. Semakin diperbesar maka image akan semakin besar.
  - 200 anda harus merubah nilainya sesuai perubahan pada s200. 
  - 200 : height sebesar 200 mempunyai arti tinggi=200pixel. 
  - Setelah perubahan pada s200 dan 200 (width) maka height juga harus dirubah berdasarkan perbandingan (skala) image sesungguhnya.
  - Jika perubahan tanpa berdasarkan skala yang ada image tetap bisa ditampilkan namun bentuk image menjadi melebar (pendek) atau meninggi (jangkung).
  
  • Contoh perubahan ukuran.

  Kode HTML setelah perubahan ukuran image

  <div class="separator" style="clear: both; text-align: center;">
  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s1600/img_gubhugreyot_gadisku-06.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s100/img_gubhugreyot_gadisku-06.jpg" width="100" /></a></div>

Anda bisa menggunakan bentuk kode html yang berbeda namun tetap mendapatkan hasil sama dengan menggunakan kode berikut:

Kode HTML setelah perubahan ukuran image

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s1600/img_gubhugreyot_gadisku-06.jpg"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjbpIixVbV3h7AE2kIrLaCBT_ehIyDJUucK4AKn58UM_SIe5EPqahiq8wM3smjzn3CibMwIcNup98c_IUVRZJ6IsEvg2Y0kZJhSK1IyemVBH3MVgTm_ax_mszTPNSv88-ROXPBXfwHA3I/s100/img_gubhugreyot_gadisku-06.jpg" width="100" style="float:left;margin:5px 1em 5px 0;padding:4px;border:1px solid transparent;box-shadow:0 0 5px #555;" /></a>

Hasil penggunaan kode yang telah dimodifikasi:

Dalam image ini lebar yang digunakan sebesar 200px dengan posisi gambar di tengah.