Merubah Posisi Gambar Dan Photo Posting

Dalam Panduan atau Tutorial Blogger tentang kode html gambar/image ini kita akan bahas cara merubah posisi gambar yang akan diterbitkan sebagai posting.

Acap 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 diletakkankan pada posisi seadanya atau kita terpaksa melakukan "proses ulang UNGGAH GAMBAR". Ada solusi praktis untuk mengatasi permasalahan ini.

Cara pertama :

Cara pertama merupakan cara yang paling praktis, mudah dan cepat.

1. Buat posting anda dalam mode "Compose".
   
   Dalam posting dikenal mode Edit HTML dan mode Compose.
2. Klik image yang terlihat di box posting.
3. Akan terlihat beberapa pengaturan ukuran image dan 3 pengaturan posisi image.
   
   • Pilih Left untuk image disebelah kiri.
   • Pilih Center untuk image di tengah.
   • Pilih Right untuk image di sebelah kanan.
4. Selain pengaturan di atas jika mungkin diperlukan bisa dilakukan perubahan ukuran image(small, medium, Large dan x-Large) serta menambah caption.

Cara Kedua :

Menggunakan cara kedua terhitung rumit karena perubahan floating position dilakukan dengan merubah kode HTML. Jika anda menggunakan cara kedua ini sebenarnya akan memberi manfaat lebih karena menjadi lebih mengenal kode HTML. Untuk menggunakan cara ke-2 posting digeser pada mode "Edit HTML". Menggunakan mode Edit HTML juga memungkinkan anda merubah ukuran image dalam ukuran "bukan standar blogger", karena anda bebas melakukan perubahan pada nilai width dan height. Inilah salah satu keuntungan posting dalam mode Edit HTMl. Diluar hal tersebut anda bisa melakukan beberapa penambahan kode baru yang sama sekali tak digunakan di mode Compose, seperti border-radius, box-shadow, menambah atau merubah padding default image posting, menambah border serta margin.

Contoh Gambar dalam posisi di kanan, kiri dan tengah:

KODE yang di berikan oleh blogger.com :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s1600/model03.jpg" imageanchor="1" style="clear:left;float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="200" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s400/model03.jpg" /></a>

Dengan KODE di atas, dengan adanya 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 » clear:right;float:right;
   Kode hijau menjadi » margin-left:1em;
   Contoh setelah perubahan posisi di kanan:
   
   
   
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s1600/model03.jpg" imageanchor="1" style="clear:right;float:right;margin-left:1em; margin-bottom:1em"><img border="0" height="200" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s400/model03.jpg" /></a>
   
   
2. Memindah ke tengah:
   Kode akan berubah menjadi seperti ini:
   
   
   
   <div class="separator" style="clear:both;text-align:center;">
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s1600/model03.jpg" imageanchor="1" style="margin-left:1em;margin-right:1em"><img border="0" height="200" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s400/model03.jpg" /></a></div>
    
3. Atau bisa juga dalam bentuk seperti ini:
   
   
   
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s1600/model03.jpg" imageanchor="1" style="display:block;text-align:center;margin:0 auto;clear:both;margin-left:1em;margin-right:1em"><img border="0" height="200" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s400/model03.jpg" /></a>
   
   
4.  Membuat posisi yang tidak ditentukan.
   
   
   
   <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s1600/model03.jpg" imageanchor="1" style=""><img border="0" height="200" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGSfyg8CeMYixRCmsAhKnFwDHXPTRePOBHRqKeg2yLBMyJ8lunsSWI7Ld3sMxEr1rkhOsBmOVwMHVrAg-0k1s02yl2f4JSakB92MCODLNJj-o9BDD98iPNEojF1dgoDEpK6B4DHRg87T7/s400/model03.jpg" /></a>