Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

2 komentar:

  1. Terimakasih atas tutorialnya...
    ini sangat bermanfaat bagi blogger pemula.
    semoga menjadi amal baik bagi anda.... Amin.

    BalasHapus
  2. terlalu berantakan bro blog nya , hanya saran ,

    BalasHapus

 
GR | Edited by | gubhug reyot