HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Selasa, 16 Juni 2009

Memasang Gambar dan Memberi Warna Header Template Minima Blogspot

sementara1

Untuk memasang gambar atau memberi warna warna pada header minima ini, aku mendapatkan caranya dari blog My Way To Be A Bloggerholic.

Caranya adalah sebagai berikut:


1. Jika ingin memberi warna saja pada header minima

sementara12

cari baris kode

#header-wrapper {

dan tambahkan baris kode berikut dibawahnya:

background: #449fcc

dimana baris kode yang berwarna hijau adalah baris kode warna. Rubah baris kode warna ini sesuai dengan keinginan lalu klik tombol Simpan Template. Sekarang header minima telah mempunyai warna sesuai seperti yang dinginkan.
Catatan: Untuk melihat kode warna bisa masuk ke Tata letak --> Font dan Warna.sementara0
Atau bisa lihat disini.
2. Jika ingin juga memasang gambar pada header minima

sementara0

bisa menggunakan photobucket untuk menaruh gambar yang diinginkan, lalu kopi alamat URL gambarnya dan letakan pada baris kode seperti terlihat dibawah ini:

#header-wrapper {
width:540px;
float:left;
height:110px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: #449fcc url(http://i560.photobucket.com/albums/ss49/dodisugi/smiley_md_wht1.gif)no-repeat 80px 4px; }

sementara0
Catatan:
#449fcc adalah baris kode warna, rubah sesuai dengan keinginan. Jika tidak ingin merubah warna header, kode ini dapat dihilangkan.
url(http://i560.photobucket.com/albums/ss49/dodisugi/smiley_md_wht1.gif) adalah alamat url gambar yang ditaruh di photobucket.
sementara2
80px adalah jarak gambar dengan sisi sebelah kiri header, rubah sesuai dengan keinginan.
4px adalah jarak gambar dengan sisi atas header, rubah sesuai dengan keinginan.
Nilai jarak 80px 4px ini bisa juga dirubah menjadi left untuk penempatan gambar yang berada disebelah kiri header, right untuk penempatan gambar yang berada disebelah kanan header atau center untuk penempatan gambar ditengah header.
Untuk menyesuaikan tinggi header dengan tinggi gambar, bisa ditambahkan baris kode
height:110px;

dengan nilai disesuaikan dengan tinggi gambar. Pada blog ini tinggi headernya adalah 110px.
Untuk mengetahui cara mendaftar ke photobucket, bisa lihat di Cara Pasang File GIF di Posting Blogspot Dengan Bantuan Situs photobucket.
3. Jika ingin header yang diberi warna dan gambar hanya di sebelah dalam header saja,

sementara1

maka pindahkan / letakan baris kode background-nya dibawah baris kode #header

sementara2

4. Jika ingin gambar yang dipasang pada header sebelah dalam menjadi banyak (gambar yang sama) seperti terlihat pada gambar dibawah ini,

sementara4

maka pada baris kode background yang tadi (pada point 2), rubah no-repeat menjadi repeat.

5. Jika ingin tampilan headernya menjadi seperti gambar dibawah ini, dengan gambar pada bagian dalam header berulang dan header mempunyai warna latar belakang,

sementara5

maka tambahkan lagi baris kode background pada #header-wrapper seperti pada point 1.

sementara2

6. Jika ingin tampilan headernya seperti gambar dibawah ini,

sementara9

maka pada baris kode background yang tadi (pada point 4), rubah lagi dari repeat menjadi no-repeat.

Selamat mencoba.

Posting Dengan Kategori Sama



0 komentar:

Posting Komentar

Related Posts with Thumbnails