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 :
Tips
- 30 Menit Latihan "Freestyle" Bakar 600 Kalori
- Menganggur, salah satu faktor penyebab pria mandul
- 6 Penyakit Kronis Kini Intai Kaum Muda
- Ingin Seks Sehat, Hindari dari Stres!
- Seks Ternyata Bisa Bikin Cantik
- Nutrisi Yang Mampu Menjaga Kesehatan Vagina
- Inilah Proses yang pada Tubuh Terjadi Saat Tidur Siang
- Cegah Rambut Beruban dengan Konsumsi Beras Merah
- Minum Air Putih Berlebihan, Ternyata Bisa Berbahaya
- 8 Tragedi Kecelakaan Pada Vagina
- Tips Mengatasi Ketombe Yang Membandel di Kepala
- Inilah Olahraga Yang Bisa Bikin Seksi
- Tips Agar Mr P Lebih Perkasa
- Mau turun kolestrol, minum susu kedelai
- Ingin anak laki-laki, coba dengan "Doggy Style"
- Tips agar rambut tak menjadi kusam
trik
- Cara Membuat Kolom Widget Sejajar (Sama Tinggi)
- CSS3 : Efek Transisi Rotasi dengan simple dan sederhana
- Cara pasang gambar pada judul Gadget / Widget Blog
- Maaf teman, k'ian tidak bisa membalas Blogwalking saat ini
- Program Adsense Chitika dalam blog berbahasa Indonesia
- Setting tampilan CSS agar sama diseluruh Browser dengan CSS reset
- Cara buat kolom text magazine dengan CSS3
- Supaya kinerja situs atau blog lebih cepat
- Mengenal kode Box Shadow dengan CSS3
- Simple Tooltips dengan CSS & Jquery trik
- Setting domain blogspot dengan script Mobile blog otomatis
- Cara Pasang Sliding Post dengan disertai gambar (Thumbnails)
- modification of the text with CSS 3 Text shadow
- Posting widget kategori tertentu dengan tambahan Thumbnails
- Show All total post dan Comment post pada blog
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