Cara Membuat Background Blog

|

Dengan tips ini sobat akan memiliki sebuah skill untuk memodifikasi blog sobat untuk menjadi lebih keren. Sobat bisa mengubah warna blog dengan macam-macam color pallet yang tersedia bahkan juga dengan foto atau wallpaper. Yuk, kita bahas langkah demi langkahnya..

Pertama cari gambar yang diinginkan untuk menjadi backaround blog. Kalau ingin mengedit gambar, gunakan free image editor yang bisa sobat temukan dengan search engine. Jika tidak, sobat bisa gunakan gambar ukuran kecil yang nantinya dapat di set berulang. Jangan gunakan gambar dengan besar file yang besar, karena ini bisa sebabkan blog jadi agak lama untuk di load.

Setelah mendapatkan gambar yang cocok, sekarang sobat butuh sebuah image hosting gratisan yang langsung tersedia fasilitas direct HTML-nya. Sobat bisa memilih photobucket.com, picasa, flicker, dll.

Next, Login kedalam blogger, masuk Layout > Edit HTML. Scrol ke bawah hingga sobat membaca code berikut:

body {
background:$bgcolor;

Mengubah Warna Background

Sobat bisa bersenang-senang dengan warna untuk mengganti warna background. Gunakan search engine untuk menemukan code warna. Biasanya code warna berbentu seperti ini (contoh hitam; #000000, putih; #FFFFFF). Misalnya warna akan diganti dengan merah; #FF0000, ganti code diatas menjadi:

body {
background-color:#FF0000;

Kalau cuma pingin sidebar aja yang warnanya ganti, tambahkan code ini:

#sidebar-wrapper {
background-color:#FF0000;

Atau kalau ingin memberikan warna yang berbeda pada kolom utama, tambahkan code ini:

#main-wrapper {
background-color:#FF0000;

Catatan, beberapa template mungkin akan mempunyai nama berbeda pada tiap codenya, contoh pada #sidebar-wrapper nama akan menjadi #side-wrap, dsb.

Menambahkan Background Gambar

Kode yang harus dimasukkan adalah:

body {
background-image:url(URL GAMBAR);

URL gambar adalah url yang diberikan oleh hosting service untuk meload gambar. Jika menggunakan jasa hosting dari photobucket.com maka URL akan tampak seperti ini; http://i380.photobucket.com/albums/oo242/clickeap/bssbaabadge.gif

Masukkan url kedalam tanda kurung, lalu klik preview untuk melihat hasilnya.

Untuk sidebar:

#sidebar-wrapper {
background-image:url(URL GAMBAR);

Untuk meletakkan gambar hanya pada kolom utama saja:

#main-wrapper {
background-image:url(URL GAMBAR);

Code Tambahan

Secara default, gambar akan menjadi berulang (repeat) untuk memenuhi background dengan gambar. Tapi kalau sobat ga mau seperti itu, tambahin aja code ini:

background-repeat: no-repeat;

Atau cuma berulang di bagian horizontal aja (x line):

background-repeat: repeat-x;

Kalau berulang di vertical (y line):

background-repeat: repeat-y;

Posisi

Untuk posisi, ada beberapa pilihan yang bisa digunakan:

• top center;
• top right;
• center left;
• center center;
• center right;
• bottom left;
• bottom center;
• bottom right;

Pengaplikasiannya;

background-position: top left;

Atau kalau tetap ngerasa ga cocok ama posisi yang sudah ada, bisa diganti dengan menggunakan pixel atau persentase.

x% y%;
xpx ypx;

Aplikasinya:

background-position: 20px 30px;

Untuk membuat background menjadi diam, terkunci, statis, maka perlu ditambahin kode ini:

background-attachment: fixed;

Semoga tutorial ini bisa membatu para pecinta Blog untuk memperkaya blognya! Hidup blog Indoesia!

Share