Home
Writed by
On
11:48 AM , 
Thursday, March 24, 2011
KianHome - Sebuah gambar dalam setiap artikel bisa memberi penejelasan akan maksud keseluruhan dari isi artikel itu sendiri, jadi tidak heran bila ada pepatah yang mengatakan bahwa, "Gambar bisa bicara".
Sama seperti yang k'ian maksud dari judul tutorial kali ini "", maka pokok bahasan kita adalah gambar / foto yang ada didalam postingan blog kita. meskipun banyak yang mengatakan merubah tampilan gambar itu cukup sulit, apalagi harus mengutak-atik blog.
Jawabannya memang benar, tapi tidak sesulit yang dibayangkan.. untuk awal kita akan bahas mengenai dasar dari pembangunan gambar dalam postingan kita..
Pengkodean Gambar
Dalam membangun gambar biasanya langsung menggunakan kode CSS pada body post, dengan contoh kode berikut :
Mengenal Border / Garis Tepi
Cara paling mudah dalam memberi style atau efek kepada gambar bisa melalui border atau garis tepi. mulai dari jenis, ukuran hingga warna cukup memberi pengaruh. dasar kode border sendiri biasanya :
1px = untuk ukuran garis tepi, jika ingin merubah cukup mengganti angka menjadi (2px, 3px, atau lebih )
solid = jenis dari garis tepi yang dimuat, jika ingin merubahnya bisa dilihat disini
#F7621D = warna dari garis tepi itu sendiri, jika kamu ingin merubahnya bisa dilihat disini
Jika kamu sudah cukup paham kita akan coba mengganti bordernya pada gambar yang dimaksud :
Efek dengan Background
Efek dengan background bisa kita bagi menjadi dua, dengan warna saja atau dengan menggunakan gambar. kenapa dengan gambar bisa..?? ya memang bisa, karena jenis gambar sendiri bisa kita tentukan menjadi background (layar belakang) atau gambar utama (layar utama). untuk kode nya sendiri masih sama hanya kita menambahkan sedikit kode untuk backgroundnya :
Jika dirasa kurang puas kita bisa merubah ukuran paddingnya agar terlihat lebih penuh,
dimana pada gambar pertama padding yang digunakan adalah : 5px;, kemudian pada gambar kedua menggunakan padding :10px;, kamu bisa menentukan besaran dari padding yang kamu anggap paling cocok.
Sama seperti yang k'ian maksud dari judul tutorial kali ini "
Jawabannya memang benar, tapi tidak sesulit yang dibayangkan.. untuk awal kita akan bahas mengenai dasar dari pembangunan gambar dalam postingan kita..
Pengkodean Gambar
Dalam membangun gambar biasanya langsung menggunakan kode CSS pada body post, dengan contoh kode berikut :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/Dari contoh kode diatas sebenarnya cukup jelas apa yang kita buat dalam style untuk gambar postingan, dan hal ini masih tergolong standart untuk style dengan efek yang unik. sebagai contoh lihat gambar dibawah ini :
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
}
Mengenal Border / Garis Tepi
Cara paling mudah dalam memberi style atau efek kepada gambar bisa melalui border atau garis tepi. mulai dari jenis, ukuran hingga warna cukup memberi pengaruh. dasar kode border sendiri biasanya :
border:ukuran dlm pixel jenis garis warna garis;bisa diterapkan sebagai berikut :
border:1px solid #F7621D;Penjelasan :
1px = untuk ukuran garis tepi, jika ingin merubah cukup mengganti angka menjadi (2px, 3px, atau lebih )
solid = jenis dari garis tepi yang dimuat, jika ingin merubahnya bisa dilihat disini
#F7621D = warna dari garis tepi itu sendiri, jika kamu ingin merubahnya bisa dilihat disini
Jika kamu sudah cukup paham kita akan coba mengganti bordernya pada gambar yang dimaksud :
border : 4px solid #f7651d;Mudah bukan..???
Efek dengan Background
Efek dengan background bisa kita bagi menjadi dua, dengan warna saja atau dengan menggunakan gambar. kenapa dengan gambar bisa..?? ya memang bisa, karena jenis gambar sendiri bisa kita tentukan menjadi background (layar belakang) atau gambar utama (layar utama). untuk kode nya sendiri masih sama hanya kita menambahkan sedikit kode untuk backgroundnya :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/Lihat contoh berikut :
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
background:yellow;}
Jika dirasa kurang puas kita bisa merubah ukuran paddingnya agar terlihat lebih penuh,
Selanjutnya dengan background gambar:
Jika pada kode pertama kita menggunakan background warna, sekarang kita akan coba dengan background gambarnya, perhatikan yang harus diubah :
.post img{padding:5px; /*--untuk jarak pada sisi gambar--*/
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
background:url (alamat gambar yang dimaksud);}
Related Post :
waah cantiik bangeet
oh ya,, udah lama nih kian gak mampir.. ditunggu kedatangan dan komentarnya di blog saya yaa ...Replay
Wow kk wow, lebih stylist ijin coba gan thanks. ...Replay
Mantabs tipsnya gan, salam kenal n kunjungan dari : UNEJ Jember. ...Replay