Posted by : Unknown Kamis, 25 Juli 2013

Posting Gambar Blog Berdampingan dengan teks di Blogger dapat dilakukan pada saat upload gambar dalam keadaan 'Edit HTML' saat posting. Silahkan lihat gambar di samping untuk menemukan tombol "edit HTML". Tapi bagaimana jika kita mengedit posting yang sudah terlanjur diposting? Apakah kita harus upload lagi?
Tujuan Posting Gambar Berdampingan dengan teks ini adalan untuk membuat area posting menjadi penuh dan simpel, juga agar lebih rapi. Jadi untuk menghemat tempat area posting juga. Berikut caranya.

1. Membuat Posting 2 Gambar Berdampingan.
Caranya :
Upload dulu kedua gambar (atau lebih) yang akan sobat dampingkan. Jika sudah, dalam keadaan "Edit HTML" kodenya kurang lebih akan seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" /></a></div>

Perhatikan baik-baik, kode di atas itu mewakili dua buah gambar. Lalu tambahkan kode berikut ke sebelum <div class . Tekan enter dulu sebelum menambahkan kode, agar ada spacenya sehingga gak bikin bingung. Tambahkan kode ini :

<table><tr>
<td>alamat gambar sobat (kode gambar sobat)</td>
<td>alamat gambar sobat (kode gambar sobat)</td>
</tr></table>

Kemudian cut kode gambar pertama:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" /></a></div>


Lalu pastekan di alamat gambar sobat (kode gambar sobat) . Lakukan hal yang sama untuk gambar ke-2. Jika gambar lebih dari dua, maka sobat tinggal tambahkan kode <td>alamat gambar sobat (kode gambar sobat)</td> dan seterusnya sebelum </tr></table> , lalu cut-paste kode gambarnya masing-masing.

Maka hasilnya adalah sebagai berikut :



2. Posting Gambar Berdampingan Dengan Teks
Caranya :
Upload dulu gambar sobat. Jika sudah, dalam keadaan "Edit HTML" kodenya kurang lebih akan seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpSZTpQlViwX6Lw0P9XpKGfuoUCDnGDcAPjtF539kS_PBj3TS2-l3xBV4R5kuHTjCP1DMqhbWJzpFvJUv9b8DNkQfb6R1g60aqtgREhUhWGRPdkaT5SZjzY1RP0ENXjMCGBVFZOjZKKI/s1600/badges.png" /></a></div>

Jika sudah paste-kan kode di bawah ini dengan menindih / menghimpit kode /></a></div> pada akhir kode gambar.

style="float: left; margin: 0px 10px;" /></a><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif; text-align: justify;"></span></div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif; text-align: justify;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">TYPE YOUR TEXT HERE.

Penempatan teks berada di YOUR TEXT HERE

Maka hasilnya :

<<<<<<<<<<<<< YES BISA !!
Gambar di samping adalah badge XIIPASAN dari Ega Kusuma, diupload tanggal 25 Juli 2013. >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>> >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>> >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>> dst

Untuk mengembalikan posisi semula cukup enter saja di belakang kata terakhir yang dibuat berdampingan. Perlu di ingat bahwa membuat Posting Gambar Blog Berdampingan Dengan Teks di Blogger ini dalam keadaan "Edit HTML". Jika sudah, klik Preview atau Compose untuk melihat. Jika kurang sesuai klik lagi "edit HTML" hingga sesuai harapan. Silahkan diatur font, font size dll nya. Jika masih belum paham atau kurang paham, silahkan berkomentar. Sekian. Fun Blogging !!






Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © PSUGen 12 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -