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

Cara Membuat dan Menghias posting gambar dengan border: Panduan dan Tutorial BloGGeR Singkat

Posting gambar atau photo akan terlihat indah apabila kita berikan kreativitas di dalamnya. Gambar yang kita terima dari blogger.com ibaratnya wanita yang belum di make up. Masih polos tanpa bedak dan tanpa gincu (lipstick, mbul! Dasar jambul! Gincu saja nggak ngerti). Melengkapi gambar dengan border, yang ada beberapa jenis dan ukuran membuat tampilan gambar semakin seronok (nggak ngerti lagi, mbul? Sama!! hih...Dasar jambul! Seronok itu artinya seindah pantat kuda nil!) dan pastinya membuat tampilan gambar lebih indah dan cantik serta secara keseluruhan juga sangat berpengaruh terhadap "gaya tampilan" blog kita.

Contoh gambar yang telah di beri border :




Contoh KODE yang diberikan oleh blogger.com di ruang Posting pada "Mode Edit HTML"
(harap di ingat di ruang posting bukan di Tata Letak!)

KODE hasil upload di blogger (default) dg posisi kiri (left):


<div class="separator" style="clear:both; text-align:center;">
<a href="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s1600/th_gubhugreyot-Carmen.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="185" width="200" src="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s320/th_gubhugreyot-Carmen.jpg" />
</a>

</div>

Kode hanya akan kita ambil sebagian agar lebih fleksibel digunakan dalam berbagai alternatif penataan gambar/image. Lihat di bawah ini:

<a href="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s1600/th_gubhugreyot-Carmen.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em">
<img border="0" height="185" width="200" src="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s320/th_gubhugreyot-Carmen.jpg" />
</a>

Tambahkan kode baru hingga jadi seperti di bawah ini:

<a href="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s1600/th_gubhugreyot-Carmen.jpg" imageanchor="1" style="border:6px blue ridge;border-radius:8px;clear:left;float:left;margin-right:1em; margin-bottom:1em">
<img height="185" width="200" src="http://2.bp.blogspot.com/-DNbqeU-ZjIU/Tw24CPbSRpI/AAAAAAAABJE/8gKYkf6PRt8/s320/th_gubhugreyot-Carmen.jpg" />
</a>

Perhatikan dari kode di atas. Kode border="0" tak ada lagi (dihilangkan).

Perubahan dilakukan dengan menambahkan kode yang berwarna hijau
border:6px blue ridge;border-radius:8px;;

  1. 6px=tebal border
  2. blue: warna=border, dan
  3. ridge=jenis border
  4. border radius untuk membuat lengkungan di 4 sisi image/border.
  5. 8px ukuran lengkung. Semakin besar semakin lebar.
  1. tebal border dimulai dari angka 0.
  2. warna boder bisa di ganti dengan : red, yellow dst, atau KODE warna berupa angka.
  3. jenis border : dashed, dotted, solid, double, groove, inset, outset, ridge, inherit, medium, thin, thick, hidden, none
  4. Apa bila sampeyan mau tahu daftar lengkap nama warna berikut kode warnanya, KLIK saja di sini (daftar lengkap warna dan kodenya).

Perubahan KODE juga bisa dilakukan dengan cara :

KODE border:6px blue ridge; dapat diganti dengan dengan:

border-color:blue;
border-style:ridge;
border-width:6px;
dimana sampeyan tinggal memilih warna (blue), jenis border (ridge) dan tebal bordernya (6px).

Bentuk kode secara keseluruhan :


border-color:blue;border-style:ridge;border-width:6px;

Oke?! Mudheng, to, mbul ?! Klo belum jelas sana pergi ke pasar sambil bawa sapu. Bersih-bersih pasar biar keringatan n jadi lancar nyobanya. Lho..., kalau jalanya udah dibersihin khan klo jalan jadi lancar ! Iya, to?! he...he...!!! Ojo serikan, lho, mbul! Aku ki cen yok ngene iki!

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

Update » Rebo WAGE, January, 11, 2012

» Happy Blogging - gubhugreyot «

2 komentar:

  1. Bang mau tanya,,bisa cara ngatur gambar&caption biar rapi gimana ya?

    BalasHapus
  2. bang mau tanya soal posting gambar+caption gimana ya?

    BalasHapus

 
GR | Edited by | gubhug reyot