Subscribe

RSS Feed (xml)

Powered By

Powered by Blogger

31 Mei 2008

Cara merubah background blog dengan gambar

Sewaktu mampir-mampir kedunia blog, kamu pasti pernah melihat background sebuah blog yang berupa gambar, bukannya warna dasar. Seperti yang terlihat di blog ini. Caranya mudah kok, cara ini awalnya saya ketahui dari blognya kang Rohman (Trims ya kang rohman)tapi aku make gambarnya yang di upload ke blog sendiri, bukan dari situs lain. Bagi yang ingin mencoba boleh ikutin langkah berikut !

sebelum kita mulai, silahkan download template lengkap kamu dulu, sebagai back up, agar bila hasilnya acak-acakkan, kita gak stresss, karena masih ada back up nya. Sekarang mari kita coba ...

Pertama kamu mesti mempunyai gambar yang berformat .GIF (type lain boleh tapi .gif biasa dipakai untuk web karena lebih ringan dari type file lain)

kemudian kamu postingkan file gambar kamu, caranya :

1. buat posting baru, isinya kosongin aja, kemudian pada pada tool diatas, klik icon "tambah gambar".
2. lalu pada jendela yg muncul, klik tombol browse, lalu cari lokasi gambar kamu.
3. layoutnya pilih yang kosong aja, kemudian klik tombol Upload, lalu tunggu beberapa saat, sampai upload selesai. kemudian klik tombol selesai. (Postingnya gak usah di publiskan tapi disimpan sebagai draft aja)

sekarang perhatikan layar postingnya, disana sudah ada tag html yang menunjukkan lokasi gambar pada server blog kita. Kamu cari tag 'src="http.... dan seterusnya, lalu kamu copy blok bagian dari http... sampai...gambar.gif(sesuai nama file kamu). kemudian dicopy.

Nah langkah selanjutnya kita tinggal pastekan(salin) teks tadi ke template blog kita. Caranya :

1. klik Tab LAYOUT di panel kontrol blognya, lalu klik tab EDIT HTML.
2. Cari bagian body, seperti dibawah ini.

body {
background: #abs;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

perhatikan bagian background:,
kamu tinggal mengganti #abs(warna dasar)dengan lokasi gambar yang kamu copy tadi, (tambahkan juga url nya) sehingga menjadi seperti dibawah ini.

body {
background: url('http://bp3.blogger.com/_LMCPQOKl_AA/s320/gambar.GIF');
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Nah, kalo sudah klik tombol PRATINJAU untuk melihat hasil sementara,
jika berhasil, kamu boleh menyimpannya sekarang.

Tidak ada komentar:

Posting Komentar