Background Image
Rasanya cam dah lama aku tak wat tutorial kat blog ni. Harini aku nak wat tutorial yang bleh kata agak penting gak la dalam mereka bentuk sesuatu template. Sambil² aku wat template baru, aku terus wat tutorial ni. Contoh korang bleh tengok kat sini.
Setelah korang baca tutorial ni, korang akan mengetahui cara² utk add background image atau picture pada blog korang, customize position image, dan membuat statik background image yang tidak bergerak bila korang skrol melalui contents blog korang.
Sebelum memulakan, korang perlu ada gambar yang nak dijadikan sebagai background. Jika perlu di-edit, edit dulu menggunakan apa² software contohnya photoshop dan sebagainya. Elakkan menggunakan gambar yang terlalu besar saiznye untuk mengelakkan proses loading yang lama untuk membuka blog tersebut. Selepas tu, uploadkan(bukan download ek.. ) image korang tu ke mana² image hosting supaya image itu dapat di akses melalui URL nya. Untuk mengUPLOAD gambar, boleh lihat tutorial Mendapatkan URL Image.
Setelah URL image tersebut diperolehi, login ke Blogger.com. Klik pada tab Layout -> Edit HTML. Skrol coding template tersebut sehingga korang jumpa coding seperti ini.
1. Tukar Background Color.
Jika korang nak tukar warna latar belakang blog kepada kaler yang lebih unik, cari HTML code untuk kaler tersebut yang korang boleh cari di internet, ataupun dari software photoshop. Contohnye, katakanlah korang pilih kaler ni #B36481, So, gantikan coding diatas(coding asal) dengan coding berikut.
kalau korang nak tukar kaler utk sidebar sahaja, gunakan coding berikut dengan code kaler yang korang suka. Cari kod #sidebar-wrapper{ kemudian tambah kod seperti ini. Jika dah ada kod untuk kaler, gantikan je dengan kod ini.
2. Menambah Background Image.
Gunakan coding dibawah ini utk menambah image pada background. Cari koding body { seperti langkah diatas tadi. Kemudian tambahkan kod seperti ini.
3. Repeat Background Image.
Secara default nya, jika korang gunakan image yang kecil, browser akan repeat image tersebut menjadikan ianya tile(berulang-ulang banyak kali).
Jika korang taknak ianya berlaku, gunakan coding dibawah ni untuk gambar tidak diulang-ulang @ repeat.
Selain itu, korang boleh pilih untuk menjadikan image di-repeat secara Harizontal. Gunakan coding dibawah ni.
4. Position Background Image.
Jika anda menggunakan image yang besar dan tak di-repeat, anda boleh gunakan coding dibawah ini untuk mengubah posisi gambar mengikut citarasa anda.
berikut adalah position² yang boleh digunakan:-
5. Static Background Image
Anda juga boleh jadikan image background anda statik(tidak bergerak). Secara default, image background akan bergerak sama apabila anda scroll content blog anda. Untuk menjadikan image tersebut statik dan tidak bergerak, anda perlu tambahkan coding dibawah ini.
6. Letakkan Kesemua Code
Secara asasnya, koding template yang telah diubah mungkin akan kelihatan seperti dibawah ini. Anda boleh gabung semua kod² diatas dan menjadi seperti ini.
p/s: jgn lupa tinggal komen anda disini ye?.. :-)
Yang Betul,
Setelah korang baca tutorial ni, korang akan mengetahui cara² utk add background image atau picture pada blog korang, customize position image, dan membuat statik background image yang tidak bergerak bila korang skrol melalui contents blog korang.
Sebelum memulakan, korang perlu ada gambar yang nak dijadikan sebagai background. Jika perlu di-edit, edit dulu menggunakan apa² software contohnya photoshop dan sebagainya. Elakkan menggunakan gambar yang terlalu besar saiznye untuk mengelakkan proses loading yang lama untuk membuka blog tersebut. Selepas tu, uploadkan(bukan download ek.. ) image korang tu ke mana² image hosting supaya image itu dapat di akses melalui URL nya. Untuk mengUPLOAD gambar, boleh lihat tutorial Mendapatkan URL Image.
Setelah URL image tersebut diperolehi, login ke Blogger.com. Klik pada tab Layout -> Edit HTML. Skrol coding template tersebut sehingga korang jumpa coding seperti ini.
body { background:$bgcolor; |
|---|
1. Tukar Background Color.
Jika korang nak tukar warna latar belakang blog kepada kaler yang lebih unik, cari HTML code untuk kaler tersebut yang korang boleh cari di internet, ataupun dari software photoshop. Contohnye, katakanlah korang pilih kaler ni #B36481, So, gantikan coding diatas(coding asal) dengan coding berikut.
body { background-color:#B36481; |
|---|
kalau korang nak tukar kaler utk sidebar sahaja, gunakan coding berikut dengan code kaler yang korang suka. Cari kod #sidebar-wrapper{ kemudian tambah kod seperti ini. Jika dah ada kod untuk kaler, gantikan je dengan kod ini.
#sidebar-wrapper { background-color:#FFFFFF; |
|---|
#main-wrapper { background-color:#B38481; |
|---|
2. Menambah Background Image.
Gunakan coding dibawah ini utk menambah image pada background. Cari koding body { seperti langkah diatas tadi. Kemudian tambahkan kod seperti ini.
body { background-image: url(URL address image anda); |
|---|
#sidebar-wrapper { background-image: url(URL address image anda); |
|---|
#main-wrapper { background-image: url(URL address image anda); |
|---|
3. Repeat Background Image.
Secara default nya, jika korang gunakan image yang kecil, browser akan repeat image tersebut menjadikan ianya tile(berulang-ulang banyak kali).
Jika korang taknak ianya berlaku, gunakan coding dibawah ni untuk gambar tidak diulang-ulang @ repeat.
background-repeat: no-repeat; |
|---|
Selain itu, korang boleh pilih untuk menjadikan image di-repeat secara Harizontal. Gunakan coding dibawah ni.
background-repeat: repeat-x; |
|---|
background-repeat: repeat-y; |
|---|
4. Position Background Image.
Jika anda menggunakan image yang besar dan tak di-repeat, anda boleh gunakan coding dibawah ini untuk mengubah posisi gambar mengikut citarasa anda.
background-position: top left; |
|---|
berikut adalah position² yang boleh digunakan:-
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;
5. Static Background Image
Anda juga boleh jadikan image background anda statik(tidak bergerak). Secara default, image background akan bergerak sama apabila anda scroll content blog anda. Untuk menjadikan image tersebut statik dan tidak bergerak, anda perlu tambahkan coding dibawah ini.
background-attachment: fixed; |
|---|
6. Letakkan Kesemua Code
Secara asasnya, koding template yang telah diubah mungkin akan kelihatan seperti dibawah ini. Anda boleh gabung semua kod² diatas dan menjadi seperti ini.
body { background-color:#B38481; background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; |
|---|
p/s: jgn lupa tinggal komen anda disini ye?.. :-)
Yang Betul,
No comments
Post a Comment