Buat Kode HTML Gambar Posting Lebih Simple

Jika anda melakukan posting dan sebelumnya mengupload (unggah) gambar ke blogger, pasti yang akan anda terima adalah sebuah kode HTML gambar dengan jumlah yang bikin halaman posting penuh sesak. Anda akan melihatnya jika membuka halaman posting pada Posting Mode Edit HTML, karena jika yang digunakan "Posting Mode Tulis/Compose" anda hanya akan melihat bentuk gambarnya saja. Posting dengan "Mode Edit HTML" memang sedikit lebih rumit jika dibandingkan dengan "posting Mode Tulis/Compose", namun dibalik kerumitan ini banyak kelebihan yang dimiliki. Satu yang jelas adalah hanya melalui posting "Mode Edit HTML" sebuah gambar/image bisa ditampilkan di halaman blog dengan berbagai gaya. Anda bisa menambahkan beberapa kode HTML untuk membuat gambar tampil dalam wujud yang berbeda. Tidak hanya berbentuk segi-empat polos tak berhias, namun beberapa kode tambahan tadi bisa membuat gambar menjadi berbentuk lengkung, mempunyai shadow, beranimasi dsb. Kali ini kita tidak akan membahas bagaimana cara menghias gambar posting, tetapi bagaimana membuat dokumen gambar yang berupa kode HTML hasil unggah gambar di blogger bisa ditampilkan dalam bentuk yang lebih sederhana, praktis, tidak terlalu memenuhi halaman posting namun tetap memberikan hasil tampilan dan fungsi yang sama.
Sebagai contoh kita akan perlihatkan kode HTML sebuah gambar yang telah "di Unggah di Blogger. Kode yang kita terima di halaman posting "Mode Edit HTML" adalah sebagai berikut.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg">
<img style="cursor:pointer; cursor:hand;width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5527567097891621922" />
</a>

Dengan kode HTML sepanjang itu jika dalam posting kita gunakan gambar lebih dari lima buah gambar saja, maka halaman posting tentu akan jadi penuh sesak dan membuat kepala pusing. Ada sebuah solusi untuk mengatasi hal ini, dimana kita akan hilangkan beberapa kode yang ketika dihilangkan tak akan berpengaruh apapun terhadap kualitas gambar. Kode gambar kita rubah menjadi seperti di bawah ini:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg"><img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" id="BLOGGER_PHOTO_ID_5527567097891621922" /></a>

Atau jika ingin lebih ringkas lagi buatlah seperti ini:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg"><img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" /></a>

Atau mungkin anda tak memerlukan memasang link pada gambar tersebut? Buatlah jadi lebih praktis lagi dalam bentuk seperti ini:

<img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" />

Catatan

• Kode yang dihilangkan adalah kode yang berwarna kuning.
• Jika kode yang anda terima berbeda karena saat unggah gambar menggunakan posisi berbeda (ada 4 posisi gambar: di tengah, kiri, kanan dan tak satupun), maka kode yang dihilangkan hanya kode seperti yang terlihat di atas.
• Jika anda menginginkan cara yang lebih praktis lagi, kita bisa menggunakan kode CSS yang di simpan di halaman "Edit HTML". Jika anda tertarik, silahkan ikuti tutorial selanjutnya!

Semoga bermanfaat!

Happy Blogging ....!

Tutorial Menarik Lain

Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

• gubhug reyot
• bloggerstuars