Memasukkan Gambar atau Image sebagai background

Halo…sobat semua salam sejahtera. Mohon maaf karena tutorial cara membuat template nya sangat lama kelanjutannya. Ini karena saya agak sibuk di pekerjaan kusen aluminium saya. Jadi mohon dimaaafkan dan dimaklumi ya…
Kali ini tahapan dalam membuat tempate akan memasuki pada bagian Memasukkan Gambar atau Image sebagai background
Menjadikan gambar atau image sebagai background akan membuat tampilan blog semakin attraktif dan apik. Namun yang perlu diketahui , terlalu banyak image, maka konsekuensinya loading blog akan melambat. Oleh sebab itu di blog bahrul-ulum dot com ini saya berusaha meminimalkan pemakaian image untuk mempercepat loading blog. Hal ini penting mengingat adanya panduan dari googlewebmastercentral seputar peningkatan kecepatan loading blog agar kesempatan tampil di halaman pertama search engine semakin besar. Lihat disini artikel tentang : Pentingnya meningkatkan kecepatan blog dari google
Lanjut kemateri cara menjadikan Gambar atau Image sebagai background .
Menjadikan image atau gambar sebagai background , bisa dilakukan dengan beberapa cara, yaitu :
1. Full image
2. Image garis yang disebar dengan koordinat – Repeat (Saya belum tau istilahnya )

Background dengan Full Image

Untuk membuat background dari image kita akan mengedit kode pada bagian kode CSS sebagai berikut :
Sebelumnya kita mesti mengetahui dimana kita akan menjadikan image sebagai background. Contohnya kita akan meng- image kan bagian header.
Mari kita lihat kode css yang ada di bagian header. ( buka kembali templatepertamastep17.html) . Ini dia kode css header :

#header {
width:920px;
height:100px;
border:1px solid #000;
background:#fff;
padding:3px;
margin:2px;
}

Kita perhatikan pada bagian background:#fff; disana background nya masih berupa warna putih (#fff) dengan cara pewarnaaan memakai kode css .
Kita ubah menjadi begini :

background: #fff url("URL alamat image") no-repeat; 

Itu adalah kode yang dimengerti oleh browser, kalau manusia kira-kira membacanya seperti ini :
background nya warna putih(#fff) dengan image yang ada di alamat ini : url(“URL alamat image”)., dan tidak diulang (no-repeat) .
Kita bisa saja tidak menuliskan kode #fff nya ( Kode Warna HTML) seperti ini :

background: url("htpp:alamatimage.com") no-repeat;

Dan ini akan tetap menampilkan image yang kita maksud. Tapi disini tetap kita tuliskan dengan tujuan ketika si image tidak dapat ditampilkan oleh browser (misalnya karena tempat hosting image lagi down), maka warna putih yang akan muncul.
Sebab kalau misalnya judul blog kita berwarna hitam, dan background body nya juga hitam , maka judul blog kita tidak akan terlihat, Ini sering saya temui di beberapa website yang semua backgroundnya memakai image , yang ketika saya mematikan fungsi menampilkan image pada browser ,  saya tidak dapat melihat tulisan yang ada di web tersebut .
Untuk alamat image nya , pertama kita harus membuat image dulu, kemudian image yang kita buat harus diupload ke server hosting image gratis. Anda bisa membuat akun gratis di photobucket.com atau di tinypic.com untuk menyimpan gambar anda. Kalau saya biasa di phtobucket.
Untuk cara memasukkan image dan mendapatkan URL alamat image di photobucket silahkan lihat di postingan ini : Langkah mendaftar-mengupload-mendapatkan URL image di Photobucket
Untuk Membuat atau mengedit Image, bisa dengan menggunakan photoshop,
atau kalau tidak punya bisa menggunakan inrvanfiew (gratis) ,
download disini software edit image gratis Irfanview
atau gimp software ( Gratis ) yang katanya mirip dengan photoshop,
donwload disini donwload software edit image gratis Gimp
Anda bisa pula mendapatkan image dengan cara meng capture image dengan cara “print screen shoot” dari gambar image yang ada di web atau yang ada di computer anda. Silahkan lihat panduannya disini : mengambil-gambar-screenshot.
Kemudian agar image tersebut optimal ketika ditampilkan di browser, sebaiknya di reducer disini :  http://www.jpegreducer.com
Haa.. udah lengkap kannnn ? kalau belum jangan sungkan untuk menambahkannya di kolom komentar yah… (thanks utk yg mau nambahin)
Untuk contoh yang sudah saya berikan image silahkan lihat di
template-pertamaSTEP18.html
Catatan1 :
Untuk bahan belajar, anda tidak perlu mengupload gambar nya ke situs hosting image gratis, tapi cukup di tempatkan di hardisk 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 .

Alamat-URL-Image_Offline

Catatan 2 :
Buatlah gambar dengan ukuran yang sama atau lebih dari ukuran yang mau ditempatkan, contohnya pada header , kan ukurannya disetting : width:920px; height:100px; ( Lihat kode CSS di bag.header). Maka bikinlah image dengan ukuran segitu atau lebih . Dalam contoh template18 saya memakai image dengan ukuran : 927 px X 107px

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). (lihat gambar )

Koordinate_image_RepeatX_DanY

Untuk contoh template dengan image garis diulang (repeat) silahkan lihat di template-pertamaSTEP19.html.
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 di dekstop, kemudian ikuti langkah seperti diatas: membuka image lewat firefox. , Untuk perubahan kodenya saya berikan di template-pertamaSTEP19.html

Menyimpan_Image_SavepageAs

Selanjutnya ini adalah beberapa variasi penggunaan image :
Menampilkan Judul Blog Dengan Image :
Lihat disini : template-pertamaSTEP20.html
Menampilkan Image disebelah tulisan:
Lihat disini : template-pertamaSTEP21.html
Oke sobat, sampai disini dulu sub bab Tutorial membuat template blog Tahap 3 : Memasukkan Gambar atau Image sebagai background ini saya sampaikan. Jika ada yang terlupa akan saya smpaikan di updatenya atau di komom komentar. Jangan sungkan untuk bertanya , dan terimakasih atas apresiasi anda yang telah membuat saya bersemangat untuk menuliskan tutorial ini.

Artikel Terkait