Efek dan style untuk Gambar pada Blogspot

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 :

.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--*/
}

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 :

Mengenal Border / Garis TepiCara 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 :
Dari contoh diatas k'ian merubah kode bordernya menjadi :

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--*/
border:1px solid #e5e5e5; /*--garis tepi pada sisi gambar--*/
margin:5px;/*--untuk jarak gambar sisi tulisan--*/
background:yellow;}

Lihat contoh berikut :

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.

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);}

Sehingga hasilnya seperti yang diatas, jika sudah dirasa cukup puas maka bisa langsung kamu simpan.