Panduan Posting Blogger: Merubah Ukuran Gambar Melalui Kode HTML

Meskipun hanya sebuah panduan Blogger tentang posting mode Edit HTML, panduan ini juga bermanfaat untuk panduan BlogDETIK dan Panduan Bloggerlainya. Panduan untuk merubah ukuran gambar dan photo dalam ruang posting dimana ukuran gambar bisa dirubah hanya dengan merubah merubah nilai width dan height pada kode html hasil upload. Dengan memanfaatkan posting mode edit html atau mode HTML untuk BlogDETIK, tinnggi dan lebar gambar dengan mudah dapat dirubah dengan merubah width dan heigh-nya. Perubahan besaran yang dilakukan bisa hingga sekecil yang kita inginkan. Selain besaran beberapa perubahan dan penambahan juga bisa dilakukan untuk membuat "variasi baru" yang berbeda dari gambar aslinya. Dalam arti bukan merubah gambar akan tetapi menambahkan beberapa hal, misalnya bingkai gambar.

Perubahan ukuran gambar :

Gambar Asli : Animasi ini adalah sebuah gambaran dimana gambar/image dapat dengan mudah di rubah ukurannya :

Cara untuk merubah ukuran gambar dan photo :

1. Cari KODE width: ...px; dan height: ...px; atau dalam bentuk lain width=".." height=".."
2. Rubah nilainya menjadi lebih kecil ; misalnya 200px atau 200 dan 150px atau 150 menjadi 60px atau 60 dan 40px atau 40. Perubahan nilai ini akan membuat image bertambah kecil.
3. Perubahan nilai hendaknya tetap sesuai dengan perbandingan besaran asli (skala) sehingga bentuk gambar tidak menjadi berubah terlalu pendek atau terlalu tinggi. Contohnya orang cebol jadi jangkung! Terutama apabila perubahan ukuran dilakukan pada photo.(nanti kalau orangnya lihat bisa stress dan gantung diri).

Contoh KODE gambar dari blogger.com pada ruang posting :

Contoh Kode HTML gambar/image hasil upload di ruang posting Blogspot :

<a onblur="try  {parent.deselectBloggerImageGracefully();} catch(e) {}"  href="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s1600-h/GR-Kolom-Reg_Gmail.jpg">
<img  style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width:155px; height:320px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s320/GR-Kolom-Reg_Gmail.jpg" 
border="0" alt="" id="BLOGGER_PHOTO_ID_5396364953086344994" /></a>

Kode HTML gambar hasil upload setelah dilakukan perubahan pada height dan width untuk merubah besaran gambar :

Gambar di bawah ini telah dirubah dari ukuran aslinya.

<a onblur="try  {parent.deselectBloggerImageGracefully();} catch(e) {}"  href="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s1600-h/GR-Kolom-Reg_Gmail.jpg">
<img  style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width:39px; height:80px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/SuO9VWsUPyI/AAAAAAAAABc/Pq26CXc5e9E/s320/GR-Kolom-Reg_Gmail.jpg" 
border="0" alt=""  id="BLOGGER_PHOTO_ID_5396364953086344994" /></a>

Contoh dalam bentuk lain:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeUFC0Kj6EqimdBDpFQYuyCHkQ54XITe98MIcecyWNfV_e6YDRoV3bc2jCDxWv9PzfMKyC-GYzu0BnYjqQSlfyFUrDALWMf5iPhTndMaygiJ5Fqmq_fZNrxXZue7ixEeucqtJMVrwrWQ/s200/gubhugreyot-flying-girl.jpg" width="87" height="130" border="0" />

Perubahan memperbesar ukuran image

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeUFC0Kj6EqimdBDpFQYuyCHkQ54XITe98MIcecyWNfV_e6YDRoV3bc2jCDxWv9PzfMKyC-GYzu0BnYjqQSlfyFUrDALWMf5iPhTndMaygiJ5Fqmq_fZNrxXZue7ixEeucqtJMVrwrWQ/s200/gubhugreyot-flying-girl.jpg" width="122" height="182" border="0" />

Catatan/Keterangan :

1. Perubahan untuk memperbesar gambar juga bisa dilakukan, akan tetapi perbesaran yang berlebihan akan membuat kwalitas gambar menjadi rusak (gambar semakin kehilangan focus/pecah-pecah/tampak berkotak-kotak)
2. Sedikit panduan ini akan sangat bermanfaat meskipun tampaknya sangat sederhana. Semoga banyak menolong bagi blogger-blogger yang masih belum begitu memahami kode html.

Sambil melanjutkan aktifitas ngeblog, silahkan baca kalima-kalimat di bawah ini sambil tersenyum.
Naik sepeda di jalan tol...(Dilarang polisi, bung!!)
Jatuh tengkurap kepala benjol bibirnya jontor !!(hiii...Rasain, bung !!!)

Yo... Jangan banyak bicara tapi banyaklah bekerja., biar nggak jontor n benjol lagi!!!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rebo WAGE, January, 11, 2012

» Happy Blogging - gubhugreyot «