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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/s320/th_gubhugreyot-Carmen.jpg" />
</a>

Tambahkan kode baru hingga jadi seperti di bawah ini:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPk_L4Qn4dtmMKLRmmiwK_Nv6eD_wrNzom1wzBOxhJ9JYsGc9IN9Lx0DBqUN1HiD2zR0XIFxnTSXpeOjUpu38_JeHankSr2IW_dFx1GY2gJoTzotx1fmcPYscQPG6O6CpT2OnZCBtuJ_A/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 «