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
}
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
}
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 :
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
}
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) :
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)
}
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 :
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
}
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 :
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!!
0 comments:
Post a Comment