Halaman

HTML : Image and Align Atribut

Bagi sebagian penulis blog, mengedit postingan melalui pencantuman kode-kode HTML memang mengurangi kenyamanan. Beruntunglah bagi pengguna Blog*spot dengan adanya 2 pilihan menu editor yakni [Edit HTML] dan [Compose].

Pilihan pertama begitu akrab bagi mereka yang gemar menuliskan secara manual kode-kode HTML maupun CSS di dalamnya. Sedang pilihan [Compose] sangat cocok bagi mereka yang ingin mendapatkan hasil instan dalam pengolahan tulisannya.

Berbeda dengan pengguna Blogsome maupun Wordpress yang minim dukungan editor WYSIWYG (What You See Is What You Get) maka pengetahuan dasar HTML sangat membantu.

Berikut adalah salah satu masalah yang jamak ditemukan penggunanya saat menempatkan gambar dalam postingan. Gambar menjadi materi yang terpisah dengan teks pengapitnya. Seperti contoh berikut :

Nah agar tampilan menjadi lebih baik laiknya tampilan yang biasa kita lihat di surat kabar, dimana materi gambar dan teks menyatu, gunakan kode HTML berikut untuk melengkapi tag img src.

Gambar pertama menyisakan kode berikut di HTMLnya :
<img src="gambarku.jpg" alt="berdekatan" >

Untuk itu lengkapi hingga menjadi berikut dalam editornya :
<img src="gambarku.jpg" alt="berdekatan" hspace="6" vspace="4" align="left">

Cukup tambahkan dengan teks yang tertulis merah. Hspace dan Vspace bisa ditambahkan untuk memberikan ruang yang lebih lega bagi gambar dan teks pengapitnya. Hingga tampilan bisa menjadi berikut :


Add to Technorati Favorites

22 komentar:

  1. makasih kang agusss :)

    BalasHapus
  2. Bisa dipraktekkan utk WP na Iko nih :D

    Tp masih bingung... :(

    BalasHapus
  3. Anonim1:59 AM

    Waduh. Malam ini cukup repot dengan penambahan foto.
    Sepertinya size juga cukup mempengaruhi.
    Semoga asumsi awal yang salah..

    Salam dari Semarang

    BalasHapus
  4. Anonim3:25 AM

    Waduh. Maaf dobel2..
    Ternyata, memang kebodohanku pribadi..

    Anyway, matur suwun atas smua tipsnya ya Kang..

    Salam Editag dari Semarang..:)

    BalasHapus
  5. pro bunsal : alhamdulillah kalo dah beres...ikut doain aja dr bandung agar kegiatan ngedit blognya lancar....sering2 mampir ke edittag ya bu....

    BalasHapus
  6. http://my-blogwalking.blogspot.com/2008/10/free-web-image-editor-alternatif.html

    Mas bagaimana cara mengedit blog saya yg diatas karena tulisannya terlalu turun. Saya ingin tulisan tetap dekat dengan header judul.

    Oh ya mas, ini selalu terjadi tiap saya masukan gambar, tulisan pasti turun. Saya coba edit memakai tombol BACKSPACE yang terjadi adalah spasi tulisan jadi rusak.

    BalasHapus
  7. Mas Agus saya telah memperbaiki blog saya. Caranya saya Copy HTML posting saya terus saya Paste di Gedit Ubuntu (semacam notepad di windows).
    Dari hasil edit di Gedit Ubuntu saya copy-paste ke HTML posting saya. Kali ini tulisan ga turun ke bawah lagi tapi tepat di bawah header Judul Posting.

    Ternyata bisa juga saya mengakali blogger :)

    BalasHapus
  8. oke mas ternyata saya ga bisa dikatakan sukses krn dari 7 gambar yg ada di pos blog tersebut 6 gambar hilang ( yg ke 2 sampai 7) kalo di post sih keliatan ada tp kalo di klik gambarnya cuma ada tulisan [splashup.png]

    BalasHapus
  9. Malem mas, aku perbaiki ulang pos blog aku. Aku curiga kalo gambarnya tidak tersimpan di picasa web google. Jadi aku masukin gambar lagi (buat ganti yg hilang).

    Lagi2 pos blog aku agak turun. Memang tidak separah tadi pagi.

    Mas punya trick ga biar posting blog ga turun tiap kali memasukkan gambar ?

    BalasHapus
  10. rio, coba email saja skrin sutnya, aku ga begitu ngeh kalo tak ada gambar, mana yang dimaksud ada jarak dengan header dan bagaimana inginnya....sorri, aku mampir ke http://my-blogwalking.blogspot.com/2008/10/free-web-image-editor-alternatif.html
    tapi ga ngerti juga pertanyannya :(

    BalasHapus
  11. Blognya udah aku benerin, tapi aku ga puas sama cara benerinnya. Kalo nanti aku posting yg ada gambarnya dan turun lagi tulisan postingnya, aku akan kirim email saja ke mas, biar mudah dimengerti maksud aku.

    BalasHapus
  12. OK, ditunggu kabarnya!

    BalasHapus
  13. Mas... mohon pencerahan, untuk menengahkan posisi blog saya http://wiratno.blogspot.com dulu saya set dengan monitor kecil, sekarang baru tahu tampilannya jadi jelek stelah dilihat dimonitor besar.

    Salam

    BalasHapus
  14. Anonim3:39 PM

    Mas Edittag, suwun banget ya

    BalasHapus
  15. Anonim3:45 PM

    Mas Edittag, suwun banget ya

    BalasHapus
  16. Sama2, makasih dah mampir juga ya!

    BalasHapus
  17. Kang Agus, ini bisa diapliaksikan di WP gak ya?? kalau bisa editnya dari bagian mana?? nuhun

    salam
    Ida
    http://roemah-imoet.com

    BalasHapus
  18. Kalo wp hosting sendiri sih bisa bu...misalnya di http://roemah-imoet.com tuh, bisa dipake.
    Eh di cimahi juga ya, deket nih!

    BalasHapus
  19. sumuhun kang, abdi di cimahi linggihna. saya coba dulu deh ya kang, soalnya lagi belajar nih wp hosting sendirinya, masih trial n error hihhhihi, kang kalau di WP itu kan ada fasilitas buat upload fotonya sendiri tanpa harus kita hosting lagi di tempat lain seperti ke photobucket, nah saya menempatkan kode html di atas dibagian yang mananya ya?? karena saya coba ambil dr hspace="" saya letakkan di akhir tidak berhasil juga

    punten jadi ngarepotkeun :D

    BalasHapus
  20. Iya bu, mending hosting poto juga ke hosting sendiri aja, toh bakal lebih cepet bukanya kalo satu hostingan.
    Mau pasangnya di artikel atau dimana bu? kalo di artikel ga usah pake manual juga bisa karena ada bantuan di editornya. Silahkan klik saja imagenya, di properties ada pilihan untuk mengedit posisinya kok.

    BalasHapus
  21. sudah berhasil kang, nuhun pisan :)

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.