Tutorial BlogDETIK: Tips Menata Gambar di Postingan BlogDETIK

Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.

Cara menambah kode HTML pada file gambar di mode posting html :

• Edit Post : Masuk terlebih dahulu di halaman Edit Post.
• Upload Gambar : Lakukan upload gambar.
• Posting Mode HTML : Atur posting dalam mode HTML (ada 2 pilihan mode Visual dan HTML).
• Posisi Gambar di bagian KIRI : Apabila gambar ditempatkan pada bagian sebelah kiri halaman posting, gunakan tambahan kode sebagai berikut :

  style="float:left;margin:0 15px 5px 0px;"

  Sehingga jika file gambarnya seperti ini :

  <img class="alignleft size-full wp-image-33" style="float:left;margin:0 15px 5px 0px;" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" alt="" width="150" height="267" />

  , maka bentuknya kemudian berubah menjadi :

  <img class="alignleft size-full wp-image-33" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" style="float:left;margin:0 20px 10px 0;" alt="" width="150" height="267" />

• Posisi Gambar di bagian KANAN : Apabila gambar ditempatkan pada bagian sebelah Kanan halaman posting, gunakan tambahan kode sebagai berikut :

  style="float:right;margin:0 0 10px 20px;"

  Sehingga jika file gambarnya seperti ini :

  <img class="alignleft size-full wp-image-33" style="border:4px solid #777" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" alt="" width="150" height="267" />

  , maka bentuknya kemudian berubah menjadi :

  <img class="alignright size-full wp-image-33" src="http://gubhugreyot.blogdetik.com/files/2010/05/bola-dan-kekuasaan.jpg" style="float:right;margin:0 0 10px 20px;" alt="" width="150" height="267" />

• Keterangan : Lihat Gambar di bawah ini :
  
  
  
  
  Keterangan :
  - Kotak Bagian tengah adalah Gambar atau Photo.
  - Margin Atas (Top), Margin Kanan (Right), Margin Bawah (Bottom) dan Margin Kiri (Left) adalah jarak antara gambar dengan segala sesuatu di sekitar gambar, yang bisa berupa gambar lain atau teks.
  - margin: (A)px (B)px (C)px (D)px; , A=margin-top, B=margin-right, C=margin-bottom dan D=margin-left.
  Silahkan ganti nilai margin untuk memperoleh penataan gambar yang terbaik.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «