Rancangan Template Blogger: Cara Meletakkan Foto Selaku Latar Belakang

Desain Template Blogger: Tutorial 12
<< Tutorial 11: Mulai Membuat Template Blogger Anda Sendiri
Kembali ke Daftar isi

Kita pastinya sering menyaksikan template-template dari suatu situs web/blog yang latar belakangnya tidak menggunakan warna yang polos, akan tetapi terbuat dari acuan yang berulang dari sebuah gambar. Gambar ini disebut selaku gambar latar belakang. Gambar yang digunakan sebagai latar belakang mampu berbentuksatu gambar besar yang mengisi layar atau atau gambar kecil (misalnya 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal.

Gambar yang dipakai sebagai latar belakang, dapat ditaruh di bagian manapun, baik dibagian Body (yang mengisi layar secara penuh),bab Post, Sidebar, Comment, atau dibagian header (Comment Header).

Sebagai pola perkara bila kita ingin membuat frame yang ada bayangannya untuk dipakai didalam template (sekarang banyak digunakan di blog-blog), bagaimana melakukannya? Secara garis besar yang pertama dilakuka yaitu menciptakan gambar kecil, yang memiliki panjang memenuhi lebar template. Kemudian selanjutnya yang kedua yaitu, membuat gambar yang ada bayangannya yang diposisikan disamping kiri dan kanan dan diulang secara vertikal. Gambar ini nantinya diletakkan dibagian outer-wrapper.

Lalu bagaimana kode cara menaruh gambar selaku latar belakang yang mampu berulang secara vertikal maupun horisontal?

Kode Peletakkan Gambar Sebagai Latar Belakang:

Misalkan kita ingin memakai gambar 100 x 100 piksel sebagai latar belakang di bab Sidebar1. Apa yang perlu kita lakukan ialah mendapatkan instruksi sidebar1 … di bab CSS dan lalu menyertakan isyarat yang berwarna merah (instruksi ada dibawah) tersebut kedalam bagian Sidebar1. Kode yang berwarna biru dibagian bawah, hanyalah contoh aba-aba suplemen 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 dipakai “background:…” untuk meletakkan gambar selaku latar belakang dan berulang baik secara vertikal maupun horisontal. Posisi permulaan gambar akan berada di posisi paling kiri (left-most) dan atas sendiri (top-most). Format perintah background secara umum ialah

background: URL(http://…) repeat-command x-position y-position;

Perintah Perulangan:

1. no-repeat (gambar tidak diulang)
2. repeat (berulang secara horisntal dan vertikal)
3. repeat-x (berulang secara horisontal)
4. repeat-y (berulang secara vertikal)

Perintah Posisi Horisontal (x):

1. left (peletakkan gambar dimulai pada segi paling kiri)
2. center (peletakkan gambar mulai dari tengah)
3. right (peletakkan gambar mulai dari sisi paling kanan)

Perintah Posisi Vertikal (y):

1. top (peletakkan gambar dimulai dari sisi paling atas)
2. center (peletakkan gambar dimulai dari tengah)
3. bottom (peletakkan gambar dimulai dari sisi paling bawah)

___________________
Sumber: Our Blogger Templates