Cara Membuat Template Blog Tahap3B

Cara Membuat Template Blog Tahap 3b : Memasukkan Gambar atau Image sebagai backgroundHalo…sobat semua salam sejahtera. Mohon maaf karena tutorial cara membuat template blog nya sangat lama kelanjutannya. Ini karena saya agak sibuk di pekerjaan kusen aluminium saya. Jadi mohon dimaaafkan dan dimaklumi ya kalau cara membuat template blog ini telat publishnya.

Kali ini tahapan dalam belajar membuat tempate blog 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 tutorial membuat template 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 :D )

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 templatepertamastep18.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 .

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 )



Untuk contoh template dengan image garis diulang (repeat) silahkan lihat di templatepertamastep19.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



Selanjutnya ini adalah beberapa variasi penggunaan image :

Menampilkan Judul Blog Dengan Image :

Lihat disini : templatepertamastep20.html

Menampilkan Image disebelah tulisan:

Lihat disini :  templatepertamastep21.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 kolom komentar. Jangan sungkan untuk bertanya , dan terimakasih atas apresiasi anda yang telah membuat saya bersemangat untuk menuliskan tutorial ini.

Tidak ada gading yang tidak retak, maka sangat jauh dari sempurna tulisan saya ini, oleh sebab itu mohon dimaafkan seikhlasnya..

Salam
Bahrul Ulum

UPDATE September 2013
Lanjutannya bisa lihat disini :
https://bahrululumdotcom.blogspot.com/2012/06/database-blogspot-bagian-body.html

Attension:
Karena ada beberapa komentar dari sobat kita tentang : Apakah template ini bisa langsung diaplikasikan di blogspot ??
Saya sendiri sudah mengaplikasikannya disini : http://templatepertama.blogspot.com/

Atas dasar pertanyaan itu, lalu timbul IDE saya untuk menganjurkan para sobat yang ingin belajar membuat template sendiri, agar mulai dari sekarang membuat satu domain blogspot baru yang khusus untuk belajar membuat template.

Berikut ini ketentuannya :

1.Buatlah dengan nama domain templatepertama.blogspot.com -
Karena templatepertama.blogspot.com dan templatepertama1.blogspot.com sudah saya ambil untuk keperluan contoh materi - Maka sobat bisa membuat dengan menambahkan angka 3 (tiga) dan seterusnya. misalnya : templatepertama3.blogspot.com atau templatepertama4.blogspot.com dst…. dst
2. Judul Blog terserah sobat.
3. Isi Potingan pertama terserah, yang penting kalau bisa ada mengarah ke link ini : https://bahrululumdotcom.blogspot.com/belajar-membuat-template-blog (terimakasih jika sobat rela melink kesini ya...)
4. Buat komentar di postigan Panduan Membuat Template 3B ini dengan menunjukkan domain templatepertama blosgpot sobat.
5. Jangan merasa terpaksa.
6. Jangan lupa Ibadah dan Makan :D
7. Let's Do it ..........

Tagline :

• memasukkan gambar sebagai background page
• Bagaimana supaya Background di Photoshop tetap putih?
• cara bikin template blog background full screen
• membuat template full screen
• cara menambah gambar backgroynd di perancangan templ
• membuat gambar full html
• cara masukkan image untuk header blog
• maksud $endside di css#sclient=psy
• memasukan gambar agar terlihat di title html
• memasukan gambar sebagai judul blog di blogspot
• memberi gambar di belakang judul blog
• memasukkan dua gambar background pada css
• memasukkan gambar sebagai bground pada html
• memasukkan foto dalam template dengan GIMP
• memasukkan gambar sebagai background html
• memasukkan gambar ke header web
• memasukkan gambar ke template blog
• memasukkan gambar pada css
• making clock javascript code
• css full background image
• dua gambar background repeat pada html
• ful image background di bloog
• GAMBAR BACKGROUND BISNIS ONLINE INTERNET
• gambar background template
• ganti baground template sama gambar
• jenis html repeat blogger
• kode html background agar tidak mengulang blog
• kode html buat background full
• kode html buat full background di website
• kode html merubah background dengan image kita
• kode html untuk gambar begroud
• kode html untuk menambahkan gambar full screen
• koding memasukan gambar dengan xml
• membuat backgrond full screen di website
• membuat backgrond full screen di website dengan HTML
• mengatur image background full di web
• mengatur tampilan agar sama di setiap browser
• menjadikan foto sebagai tampilan header blog
• menyisipkan background blog
• menyisipkan gambar offline pada html
• pasang foto sebagai background blogspot
• perintah html untuk memasukkan gambar baground
• script code menambahkan gambar xml
• situs memasang foto di backround
• supaya background web tidak repeat
• template membuat background gambar pada web
• tidak mengulang gambar html kode
• menaruh gambar di template
• menampilkan tulisan / gambar agar terlihat terus di blog
• menambah border blog
• membuat background blog menjadi full
• membuat background blog tidak mengulang
• membuat background flash web dengan html
• membuat background html fullscreen
• membuat background html selalu fullscreen
• membuat blog terlihat timbul
• membuat foto di template
• membuat gambar sebagai background image
• membuat template blog menggunakan photoshop
• Membuat template hitam semua
• membuat template image
• membuat template web dengan GIMP
• tutorial memasukan gambar sebagai template blog
• Alamat alamat untuk membuat wallpaper online
• cara memasang gambar background pada web dengan css
• cara memasang kode CSS di perancangan Blog
• cara memasukan baground pada photoshop
• cara memasukan desain template photoshop ke css
• Cara Memasukan Foto ke dalam background blog
• cara memasukan foto ke dalam template dengan photoshop
• cara memasukan gambar ke background blog
• cara memasukkan background html full page
• cara memasukkan foto ke background warna b menggunakan photoshop
• CARA MEMASUKKAN GAMBAR KE DALAM VIDEO
• cara memasukkan gambar sebagai background header
• cara memasukkan gambar sebagai background template
• cara jadikan gambar background web
• cara ganti background blog full screen
• agar gambar latar belakang web fullscreen
• bacground agar tida repeat
• backdrop foto template
• backgound blogger agar pas
• backgroun video website dengan jquery
• bahrul ulum template
• bikin template di photoshop
• bikin theme blog dengan photoshop
• blog dengan tampilan background full
• buat background web online
• buat gambar background blog jadi besar
• cara agar background di blog ful gambar
• cara bikin baground di blog menggunakan html
• cara memasukkan gambar sebagai template
• cara memasukkan template ke dalam blog
• cara memberi kode gambar background template
• cara membuat header web flash agar full screen
• cara membuat template blog dengan photoshop
• cara membuat template blog di photoshop
• cara membuat warna hitam beckground pada photoshop
• cara menampilkan background web full
• cara menampilkan themes pada firefox menjadi fullscreen