Wednesday, April 15, 2009

BASIC MEMBUAT TEMPLATES BLOG BAGIAN 4

belajar



Kali ini kita akan mulai belajar cara menyisipkan gambar sebagai latar belakang blog (background). Berarti yang harus kita siapkan ialah "GAMBAR", bisa berformat .jpg, .gif, .png. Untuk masalah penempatannya kali ini kita coba taruh di bagian atas atau header.. dan kita akan taruh juga latar belakang blog dengan gambar... Siapkan dulu gambar-nya, kalau sudah cari-lah script ini (masih templates MINIMA dari blogspot):

#left-header-wrapper {

float:left

width:463px

margin:0 auto 0px

border:px solid $bordercolor

}


#right-header-wrapper {

float:right

width:462px

margin:0 auto 0px

border:px solid $bordercolor

}


Script left header dan right header di atas adalah script yang telah kita buat sebelumnya.


Untuk pengertiannya, perintah script untuk memasukkan/memasang/menyisipkan/menaruh warna atau gambar ialah dengan perintah "BACKGROUND". Hanya saja ada perbedaan antara memasukkan warna dengan gambar. Inilah perbedaan-nya:

Untuk mengganti/menambahkan warna pada background :

background: #FFOOOO



Untuk manambahkan gambar pada background :

background-image: url(http://alamat link Anda menaruh gambar.gif/.png/.jpg)



Jangan lupa setelah kode selesai, diakhiri dengan tanda";"!!. Dan coba perhatikan perbedaan antara background warna dan background gambar pada contoh script di atas.

Baik sampai di sini aja teori-nya... Mari kita mulai praktek-nya.. Sekarang kita ganti dulu warna background-nya menjadi warna hitam misal-kan, dan script-nya akan menjadi seperti ini :

#left-header-wrapper {

float:left

width:463px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


#right-header-wrapper {

float:right

width:462px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


Tulisan yang saya merah itulah script yang ditambahkan.. (#000000 : kode warna hitam). Kalau sudah diganti coba langsung dilihat perubahan-nya bagaimana!? Ternyata gambar-nya akan seperti ini loh :

gambar


Lihat panjang vertikal-nya tidak sama antara left header dengan right header... Jangan khawatir.. kita harus menambahkan script baru lagi, dan script-nya sekarang akan menjadi seperti ini :

#left-header-wrapper {

float:left

width:463px

height:250px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


#right-header-wrapper {

float:right

width:462px

height:250px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

}


Tulisan yang saya beri warna hijau itulah script yang ditambahkan. Yaitu untuk mengatur berapa lebar vertikal-nya.. Maka-nya antara left-header dengan right-header nilai "PX"-nya saya sama-kan (250px) agar lebar-nya rata atau sejajar.. Lebar-nya bisa Anda sesuai-kan dengan keinginan Anda (kalau 250px itu menurut Anda terlalu lebar atau masih agak kecil). Dan gambar-nya pun akan seperti ini (dengan height 250px) :

warna
Gimana?? semakin lama templates yang kita buat semakin "KEREN" kan!? hohohoho!!!..



Sekarang kita taruh gambar sebagai background pada header.. Siap-kan dulu alamat link-nya..

http://i482.photobucket.com/albums/rr182/Wahyukodir/RIGHTHEADER-1.gif (untuk gambar background sebelah kanan).

http://i482.photobucket.com/albums/rr182/Wahyukodir/LEFTHEADER.gif (untuk gambar background sebelah kiri).


Di atas hanya contoh penempatan gambar-nya saja (mau di kanan atau di kiri), Anda bisa mengatur sesuai selera. Atau antara left header dengan right header may disisipkan dengan gambar yang sama!!.


Maka contoh script-nya seperti ini :

#left-header-wrapper {

float:left

width:463px

height:235px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

background-image: url(

http://i482.photobucket.com/albums/rr182/Wahyukodir/LEFTHEADER.gif)

}


#right-header-wrapper {

float:right

width:462px

height:235px

margin:0 auto 0px

border:px solid $bordercolor

background: #000000

background-image: url(http://i482.photobucket.com/albums/rr182/Wahyukodir/RIGHTHEADER-1.gif)

}


Tulisan yang berwarna biru-lah yang saya tambahkan.. Maka hasil-nya akan seperti ini :

templates



Gimana dengan gambar Anda?? "KEREN" kan... hohohoho... Gambar di atas orange dan hijau (itu gambar-nya aja yang kurang keren hohoho!!%$#$^)..


Dan sekarang kita akan merubah background tempaltes minima yang putih itu menjadi warna hitam.. Cari-lah script ini :


body {

background:$bgcolor

margin:0

color:$textcolor

font:x-small Georgia Serif

font-size/* */:/**/small

font-size: /**/small

text-align: center

}


Nah... tulisan yang saya warnai merah itu yang harus dirubah/ganti... Menjadi seperti ini :

body {

background: #000000

margin:0

color:$textcolor

font:x-small Georgia Serif

font-size/* */:/**/small

font-size: /**/small

text-align: center

}

Jangan lupa setelah kode warna disipkan kode ";" sebagai end... Seperti ini maksud-nya (background: #000000;). Maka gambar-nya akan seperti ini :

blogspot

Wuiihhhh sekarang jadi lebih keren... Jadi seperti bukan templates MINIMA!! hohohoho....@##$$..


Kalau Anda mau background-nya menjadi gambar (dari background warna hitam di atas).. Anda bisa mengikuti contoh yang menyisipkan gambar di header di contoh yang atas tadi itu loh!!...



Semoga bermanfaat!!

Related Posts by Categories



Bookmark and Share

0 comments: