Memasukkan Gambar latar/Background tampilan Blog

Untuk membuat indah tampilan blog terkadang kita memerlukan gambar. Disamping blog kita terkesan cantik bisa juga gambar tersebut membuat pengungunjung blog betah.

Bahkan kalo diibaratkan gambar itu seperti cet dinding rumah kita, dimana kita bisa memadukan warna cet tersebut  tentunya rumah kitapun akan terlihat indah.

Kode untuk background biasa tertulis:

background:#fff;

Kode tersebut merupakan penulisan kode css.

Dimana kode #fff: adalah kode warna untuk warna putih yang menjadi warna dari background tersebut.

Jadi untuk merubahnya menjadi gambar kita tinggal mengganti kode tersebut.

Untuk mencari dimana kode tersebut berada silahkan anda masuk ke blogger dengan akun anda lalu ke menu Rancangan pilih/klik edit html lalu gunakan Ctrl+F atau tekan F3 dari keyboard komputer anda, lalu ketikkan background: pada kotak yang muncul

Ada beberapa cara untuk menjadikan image atau gambar sebagai background , antaralain :
1. Full image (gambar penuh)
2. Image garis yang disebar dengan koordinat – Repeat

Tentunya kita harus menentukan dulu bagian mana yang akan kita rubah backgroundnya. Seperti bagian header, sidebar, footer atau yang lainnya.

Contoh kita akan merubah atau memasukkan gambar di bagian header dengan cara full image.
Kode untuk header antara lain seperti berikut:

#header{

width:920px;

height:100px;

border:1px solid #000;

background:#fff;

padding:3px;

margin:2px;

}

 Keterangan:

1.     kode 920px;  adalah ukuran panjang kolom header

2.     kode 100px; adalah ukuran tinggi kolom header

3.     kode border:1px solid #000;  adalah ukuran border/ bingkai atau garis kolom header dan solid #000;  adalah warna bordernya.

4.     kode #fff; adalah warna background kolom header

5.     kode 3px; adalah jarak kolom header dengan kotak utama

6.     kode 2px; adalah ukuran jarak kolom header dengan kolom lainnya

kode lainnya seperti sidebar,footer dan lainnya, tidak jauh berbeda dengan kode header diatas.

Background dengan full Image

Untuk membuat background dengan full image kita tinggal mengedit kode pada bagian Background:#fff; sebagai berikut :

pada bagian background:#fff; diatas backgroundnya berupa warna putih (#fff) dengan cara pewarnaaan memakai kode css .

Kita ubah menjadi seperti ini:

Background:#fff; url(“URL alamat gambar”)no repeat;

Itu adalah kode yang dimengerti oleh mesin pencari,

Jika diterjemahkan seperti ini :
background nya warna putih(#fff) dengan image yang ada di alamat ini : url(“URL alamat image”)., dan tidak diulang (no-repeat) .

Atau anda bisa saja tidak menuliskan kode #fff nya ( Kode Warna HTML) seperti berikut:

Background: url(“http:alamatgambar.com”) no-repeat;

Kode tersebut akan tetap menampilkan image yang kita maksud.

Tapi dusunu kita akan tetap menyertakan tulisan/kode  #fff  dengan tujuan ketika gambar  tidak dapat ditampilkan oleh browser entah karena tempat hosting (alamat penyimpan gambar) lagi down atau gangguan lainnya maka warna putihlah yang akan muncul.

Hal ini dimaksudkan untuk sekedar berjaga-jaga barangkali nantinya terdapat gangguan tersebut misalnya judul blog kita berwarna hitam, dan background body nya juga hitam, maka judul blog kita tidak akan terlihat.

Masalah ini bisa ditemui di beberapa website yang semua backgroundnya memakai image, ketika kita mematikan fungsi menampilkan image pada browser ,  kita tidak dapat melihat tulisan yang ada di web tersebut.

Untuk alamat gambar , kita harus tahu dimana gambar tersebut berada atau kita buat sendiri kemudian image tersebut harus diupload ke server hosting image. Anda bisa membuat akun gratis di photobucket.com atau di tinypic.com untuk menyimpan gambar anda.

Kalau saya biasa di phtobucket.com
Biasanya setelah kita mengupload gambar tersebut kita akan diberi alamat (link) gambar tersebut

Sedangkan untuk Membuat atau mengedit gambar, bisa dengan menggunakan photoshop,atau media olah gambar lainnya.

Anda juga bisa mendapatkan image dengan cara mengcapture gambar yaitu cara “print screen shoot” dari gambar yang tampil di website.

Lihat cara mengambil gambar dari layar atau tampilan website.

Agar gambar yang telah kita buat menjadi optimal ketika ditampilkan di browser, sebaiknya di reducer dahulu dengan cara menggunakan layanan online seperti di:  http://www.jpegreducer.com

Gimana udah ngerti niihh…

Kalo belum jangan sungkan untuk beri komentar atau menambahkan informasi lainnya jika anda punya.

Untuk bahan belajar, anda tidak perlu mengupload gambarnya ke situs hosting image, tapi cukup disimpan di komputer saja.

Berikut langkahnya:
Bikin image atau capture, atau ambil gambar dari sumber manapun. Lalu tempatkan di dekstop atau di folder khusus. Kemudian gambar itu yang sudah di simpan anda buka dengan cara klik kanan pada gambar , lalu pilih “open with Firefox” , nanti di adress bar akan terlihat alamat gambar nya.

Alamat gambar yang offline ini yang kita jadikan URL alamat image background template latihan tadi .

Penting:
perhatikan ukuran kolom yang akan kita ganti backgroundnya.

Buatlah gambar dengan ukuran yang sama atau lebih dari ukuran yang mau ditempatkan.

Contohnya pada header diatas ukurannya: width:920px; height:100px; 

Maka bikinlah image dengan ukuran segitu atau lebih.

Background dengan Image Garis diulang (Repeat)

Image garis disini maksud nya adalah image yang besaran tebalnya cuma 1px , dan diulang dengan perintah repeat sesuai koordinat X atau Y.
Koordinate X akan mengulang image agar menyebar kearah horisontal (kekanan).
Sedangkan Koordinate Y akan mengulang image agar menyebar kearah Vertikal (kebawah).

Untuk latihan offline silahkan lihat contoh kodenya lalu ubah alamat imagenya. Buka ini:
http://i420.photobucket.com/albums/pp281/goldenphoto_2009/menuglossy117.jpg

lalu save image as, dan simpan difolder pada komputer anda, kemudian ikuti langkah seperti diatas yaitu membuka image lewat firefox.

Sumber inspirasi artikel ini dari http://bahrul.ulum.com

silahkan komentarnya….

http://fahimmunjul.blogspot.com