- Back to Home »
- Blog »
- Posting Gambar Blog Berdampingan Dengan Teks di Blogger
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>
<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.
<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.
Maka
hasilnya :
<<<<<<<<<<<<< YES BISA !!
Gambar di samping adalah badge XIIPASAN dari Ega Kusuma, diupload tanggal 25 Juli 2013. >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>> >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>> >>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>> >>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>> dst
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 !!
