Desain Template Blogger: Tutorial 12
<< Tutorial 11: Mulai Membuat Template Blogger Anda Sendiri
Kembali ke Daftar isi
Kita tentunya sering melihat template-template dari suatu website/blog yang latar belakangnya tidak menggunakan warna yang polos, akan tetapi terbuat dari pola yang berulang dari suatu gambar. Gambar ini disebut sebagai gambar latar belakang. Gambar yang digunakan sebagai latar belakang dapat berupa satu gambar besar yang mengisi layar atau atau gambar kecil (misalnya 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal.
Gambar yang digunakan sebagai latar belakang, dapat diletakkan di bagian manapun, baik dibagian Body (yang mengisi layar secara penuh),bagian Post, Sidebar, Comment, atau dibagian header (Comment Header).
Sebagai contoh kasus jika kita ingin membuat frame yang ada bayangannya untuk digunakan didalam template (sekarang banyak digunakan di blog-blog), bagaimana melakukannya? Secara garis besar yang pertama dilakuka adalah membuat gambar kecil, yang mempunyai panjang memenuhi lebar template. Kemudian selanjutnya yang kedua adalah, membuat gambar yang ada bayangannya yang ditempatkan disamping kiri dan kanan dan diulang secara vertikal. Gambar ini nantinya diletakkan dibagian outer-wrapper.
Lalu bagaimana kode cara meletakkan gambar sebagai latar belakang yang dapat berulang secara vertikal maupun horisontal?
Kode Peletakkan Gambar Sebagai Latar Belakang:
Misalkan kita ingin menggunakan gambar 100 x 100 piksel sebagai latar belakang di bagian Sidebar1. Apa yang perlu kita lakukan adalah menemukan kode sidebar1 {...} di bagian CSS dan kemudian menambahkan kode yang berwarna merah (kode ada dibawah) tersebut kedalam bagian Sidebar1. Kode yang berwarna biru dibagian bawah, hanyalah contoh kode tambahan saja.
#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
background: URL(http://the-url-of-your-image) repeat left top;
text-align: left;
}
Kode digunakan "background:..." untuk meletakkan gambar sebagai latar belakang dan berulang baik secara vertikal maupun horisontal. Posisi awal gambar akan berada di posisi paling kiri (left-most) dan atas sendiri (top-most). Format perintah background secara umum adalah
background: URL(http://...) repeat-command x-position y-position;
Perintah Perulangan:
- no-repeat (gambar tidak diulang)
- repeat (berulang secara horisntal dan vertikal)
- repeat-x (berulang secara horisontal)
- repeat-y (berulang secara vertikal)
- left (peletakkan gambar dimulai pada sisi paling kiri)
- center (peletakkan gambar mulai dari tengah)
- right (peletakkan gambar mulai dari sisi paling kanan)
- top (peletakkan gambar dimulai dari sisi paling atas)
- center (peletakkan gambar dimulai dari tengah)
- bottom (peletakkan gambar dimulai dari sisi paling bawah)
___________________
Sumber: Our Blogger Templates
6 Juni 2012 pukul 11.22
makasih ya infonya bagus banget,,, sangat berguna bagi saya yg pemula
10 Maret 2019 pukul 22.19
Siap gan, semoga bermanfaat! Semangat terus belajarnya...
9 Maret 2013 pukul 06.35
tidak sia-sia dah mengunjungi blog ini.
makasih gan
10 Maret 2019 pukul 22.20
Thanks apresiasinya gan !
13 Mei 2015 pukul 21.30
trimakasih mas...