Membuat Bingkai (Border) Gambar dan Photo Posting di BlogDETIK

Setelah di posting sebelumnya sebelumnya kita mencoba membahas cara menata/mengatur gambar atau photo posting supaya terlihat rapi, di posting kali ini akan kita menambahkan bingkai pada gambar melalui penambahan kode html yang berupa "border". Border akan membentuk garis disetiap tepi gambar dengan ketebalan yang bisa diatur sesuai keinginan kita. Kalau dalam wujud nyata bentuk akhirnya akan seperti halnya sebuah pigura atau bingkai foto. Besaran boder adalah pixel(px). Penambahan border juga dilakukan dengan memanfaatkan fungsi posting mode HTML. Sampeyan bisa membuka posting sebelumnya supaya pemahaman tentang posting gambar dan photo di BlogDETIK ini menjadi lebih mudah. Silahkan KLIK link yang sya sediakan di bawah ini untuk melihat postng sebelumnya :

1. Cara Merubah Ukuran Gambar dan Photo Posting di BlogDETIK
2. Menata Gambar dan Photo Posting di BlogDETIK

Di bawah ini adalah contoh gambar tanpa bingkai dan gambar yang telah diberi tambahan border sehingga membuat penampilan gambar dan photo semakin bertambah menarik.

Dibawah ini adalah contoh dalam bentuk yang lain :

• Gambar-1 : Gambar tersebut adalah bentuk asli sebelum dilakukan perubahan apapun. KODE HTMLnya adalah :

  <img class="alignleft size-full wp-image-9" title="blogdetik1" src="http://bramastyanta.blogdetik.com/files/2010/05/blogdetik1.jpg" alt="blogdetik1" width="133" height="43" />

• Gambar-2 : Gambar telah ditambah dengan "border". KODE HTMLnya adalah :

  <img class="alignleft size-full wp-image-9" style="border:#666 4px solid;" title="blogdetik1" src="http://bramastyanta.blogdetik.com/files/2010/05/blogdetik1.jpg" alt="blogdetik1" width="133" height="43" />

• Gambar-3 : Gambar menggabungkan "border" dan DIV. KODE HTMLnya adalah :

  <div style="float:left;border:#444 4px solid;">
  
  <img class="alignleft size-full wp-image-9" style="border:#666 4px solid;" title="blogdetik1" src="http://bramastyanta.blogdetik.com/files/2010/05/blogdetik1.jpg" alt="blogdetik1" width="133" height="43" />
  
  </div>

• Gambar-4 : Gambar ini menggabungkan "border" dan 2 buah DIV.
  
• Tambah Kode HTML Lain (padding) padding berfungsi untuk membuat jarak antara gambar dan bingkai. Bentuk KODE-nya :padding: 5px;, besaran 5px bisa dirubah sesuai keinginan sampeyan.
  Bentuk KODE yang ditambahkan dengan menggabungkan border dan DIV :

  <div style="float:left;border:#444 4px solid;">
  <img class="alignleft size-full wp-image-9" style="padding:5px;border:#666 4px solid;" title="blogdetik1" src="http://bramastyanta.blogdetik.com/files/2010/05/blogdetik1.jpg" alt="blogdetik1" width="133" height="43" />
  </div>

Supaya lebih mudah memahami, sebaiknya buka 2 buah link yang saya sediakan di atas (2 posting sebelum ini).

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 «