Desain Template Blogger: Cara Meletakkan Foto sebagai Latar Belakang

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:

  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 sisi 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

Artikel Sejenis



3 comments:

Pembaca Setia

Apakah artikel dalam blog ini bermanfaat bagi anda?

Berlangganan

cek email anda untuk link verifikasi berlangganan setelah menekan tombol submit
 
If you're on a slow connection, try Mobile Version
Copyright 2014 WHIZ group. Layout Design By Anshul Dudeja. All Right Reserved.