Friday, August 7, 2009

CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE

BELAJAR MEMBUAT BLOGGER TEMPLATE 11

Jika kita melihat template beberapa template - Kita akan melihat bahwa banyak template menggunakan latar belakang bukan dari warna polos, melainkan dibuat dari pola yang berulang dari suatu gambar. Gambar ini disebut gambar latar belakang (background image). Bisa saja satu gambar besar mengisi atas layar atau gambar kecil (sebut saja 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal. Hal yang rapi tentang penggunaan, atau embedding gambar latar belakang adalah bahwa kita dapat membuat gambar apapun yang kita inginkan dan menggunakannya di blog kita untuk membuatnya unik dan berbeda dari blog lainnya.

Gambar latar belakang dapat ditempatkan dalam container - baik di dalam kontainer Body (yang mengisi seluruh atas layar), di dalam Post, Sidebar, Comment,, atau bahkan di sebuah header container (sebut saja, Comment Header). Misalnya, jika Kita melihat template ini, Kita akan melihat bahwa Comment Header di bawah posting adalah tombol hijau bulat - foto yang tertanam di dalam Comment Header.

Kita juga dapat menggunakan sebuah gambar untuk membuat bingkai berbayang (sekarang cukup umum di blog). Untuk melakukannya, Kita membuat gambar latar belakang singkat dengan panjang span yang memenuhi seluruh lebar template. Di ujung kanan dan kiri dari gambar latar belakang, Kita dapat membuat pola muram (atau pola yang akan dijadikan frame), dan menambahkan ini di dalam outer-wrapper, lalu diulangi secara vertikal.

Tapi, bagaimana cara untuk menambahkan dan mengulang gambar secara vertikal, horizontal, atau di kedua arah?

MENAMBAHKAN BACKGROUND GAMBAR :

katakan saja kalau kita akan menggunakan gambar berukuran 100 x 100 pixels sebagai background gambar di dalam container image Sidebar1. apa yang perlu dilakukan adalah menemukan kode sidebar1 {...} di dalam CSS Styling dan menambahkan kode yang berwarna merah di bawah ini (kode lainnya hanya contoh 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 "background:..." akan menampilkan gambar dari URL yang kita letakkan dan repeat (mengulanginya) di kedua sisi, vertical dan horizontal. Lokasi gambar pertama adalah di paling atas dan paling kiri. Kode umum untuk memasukkan background gambar adalah :

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


SEMUA PERINTAH PENGULANGAN (REPEAT COMMAND) :

no-repeat (gambar tudak akan diulangi)
repeat (diulangi secara vertical dan horizontal)
repeat-x (hanya diulangi secara horizontal)
repeat-y (hanya diulangi secara vertikal)

SEMUA PERINTAH POSISI HORIZONTAL (X) :

left (meletakkan gambar pertama di sisi paling kiri)
center (meletakkan gambar di tengah-tengah)
right (meletakkan gambar pertama di sisi paling kanan)

SEMUA PERINTAH POSISI VERTIKAL (Y) :

top (meletakkan gambar pertama di posisi paling atas)
center (meletakkan gambar pertama di tengah-tengah)
bottom (meletakkan gambar pertama di posisi paling bawah)

translate dari : ourbloggertemplate.com

18 comments:

  1. Trimakasih yach, informasi dari "Kamus Pengetahuan" sudah banyak membantu sy membuat blog yang agak keren ... he he he

    ReplyDelete
  2. salam...
    macam mana menjadikan gambr sebagai latar belakang blog??
    boleh tak tolong saya?? saya xfaham dengan pernyataan yang en postkan..
    skrang ni boleh x en. memberitahu saya langkah pertama sampai langkah terakhir??
    apakah yang patut diklik?? masuk mana dahulu??
    jasa en amat saya hargai....

    ReplyDelete
  3. wah, ternyata wanita...
    pengetahuan yang sangat bermanfaat... thanks... ;-)

    ReplyDelete
  4. haii sobatt...semoga sukses dalam blognya

    ReplyDelete
  5. bang url gambar tu yang sebelah mana????
    klo habis dunlud dari gogle.

    q msih bngung ma url background. tolong di balas ya tank's!!!

    ReplyDelete
  6. kren bozzzz...snang bs brknjung di blog ini...!!! Blog walking aj ni mksh. CHUGY

    ReplyDelete
  7. thank bos infonya..blog ane jadi kekiri gimana baliin ketengah lg ya bos..? thank

    ReplyDelete
  8. kunjugan pertama sesama bloger
    kunjungi bali yach bang
    :)

    ReplyDelete
  9. mantap bro panduannya akhirnya blog saya juga jadi tnks bro jangan lupa juga berkunjungi balik bro

    ReplyDelete
  10. sangat membantu

    salam kenal gan

    www.agoblogs.co.cc

    follow back ya gan.....

    ReplyDelete
  11. Makasih banget lho infonya..saya masih nubi masalah edit html beginian..
    kayaknya bakal sering mampir ni..
    hehe..

    ReplyDelete
  12. makasih gan
    salam kenal
    www.pekanilmiah.blogspot.com
    follow back ya gan

    ReplyDelete
  13. mksh gan info'x sangat bermanfaat sekali..
    sukses terus buat blog'x...

    ReplyDelete

jangan lupa kasi komentar. oiya, kalau ada request tentang artikel dll, komen ajah ya... mau tanya PR juga boleh, terutama al biologi. nanti diusahakan buat dibikinin artikelnya... ok, tengkyu dah mw baca!!! jangan lupa like page-nya n follow d fb yah,,,

TULISAN TERBARU