Merubah posisi gambar dan photo posting

Tentang kode html gambar/image ini kita akan bahas cara merubah posisi gambar yang akan diterbitkan sebagai posting.

Sering kali setelah melakukan "UNGGAH GAMBAR" baru kita menyadari bila ternyata gambar yang kita UNGGAH salah posisi. Posisi gambar yang sebenarnya haruslah di sebelah kanan atau di tengah, eee...ternyata KLIKnya di posisi LEFT atau kebalikannya. Karena bingung, akhirnya gambar diletak kan pada posisi seadanya atau kita terpaksa melakukan "proses ulang UNGGAH GAMBAR".

Ada solusi praktis untuk mengatasi permasalahan ini. Kita akan bersama melihat "KODE GAMBAR" yang diberikan oleh blogger.com dalam ruangan posting pada saat kita melakukan "Posting di MODE EDIT HTML" (yang berbeda dengan hasil di MODE TULIS yang berupa gambar).

Contoh Gambar dalam posisi di kanan, kiri dan tengah :

KODE yang di berikan oleh blogger.com :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0SRcgbPaIRKBWjNB-Fi93cngQniRy2Hh2FenuRhE7GNM4i4sDzR4BPljqwdBYW3gsoxnSkqrhLOxbw9yR1xj9YLyIjtBvwn43_End8CvMM0hOF_lu47s5aPqBR9vVSRKK93vOk3aDCZU/s1600-h/212u4d1_th.jpg"><img style="float:left; margin:0 10px 10px 0; cursor:pointer;width: 128px;height:159px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0SRcgbPaIRKBWjNB-Fi93cngQniRy2Hh2FenuRhE7GNM4i4sDzR4BPljqwdBYW3gsoxnSkqrhLOxbw9yR1xj9YLyIjtBvwn43_End8CvMM0hOF_lu47s5aPqBR9vVSRKK93vOk3aDCZU/s200/212u4d1_th.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5396738851691999490" /></a>

Dengan KODE di atas, KODE berwarna merah : float:left;, memberikan arti bahwa gambar akan ditempatkan pada posisi sebelah kiri. Untuk merubahnya dalam posisi yang lain, baik kanan, tengah ataupun posisi yang tidak ditentukan, maka KODE tersebut harus di ubah, sehingga posisi gambarpun akan menyesuaikan dengan perintah baru yang kita berikan dalam bentuk KODE.

1. Memindah ke kanan :
   kode merah menjadi --> float: right;
2. Memindah ke tengah:
   kode merah dan hijau dihilangkan dan diganti dengan kode : ---> display:block;text-align:center;margin:0 auto;
3. Membuat posisi yang tidak ditentukan --> hapus kode warna merah dan hijau.

Semoga menolong dan memberi manfaat bagi sobat BloGgeR yang suka othak-athik Gambar dan Photo