13. Membuat Background Posting

Dalam membuat background ada dua alternatif yang akan diposting di blog yang punya alamat : www.ikiwae-tbn.co.cc yaitu membuat background dengan warna dan membuat background dengan bantuan gambar, khusus untuk background dengan gambar terbagi lagi ke dalam beberapa teknik yaitu background gambar dengan teknik repeat (ada repeat, repeat-x, repeat-y) dan background gambar dengan teknik no-repeat (gambar backgroundnya memang ukuran besar).

1. Membuat background dengan warna

Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :

Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :

<div style="background:kode warna disini;">
Teks yang akan dikasih background
</div>

Jangan lupa, kasih karakter kres (#) sebelum kode warna!

Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan. Sedikit tips yang masih bingung dengan kode warna, silahkan baca di sini.

Karena kode ini merupakan Style dari CSS, maka tentu saja bukan hanya warna background yang bisa anda tentukan, warna hurup, jenis hurup, perataan posting, dan lain-lain pun bisa anda tentukan. So, yang pasti postingan anda akan bervariasi dan tidak terkesan monoton (monoton TV apa monoton Film ye?). Sebagai contoh, jika postingan anda ingin berwarna background kuning:

<div style="background: #ffff33; text-align:justify;">Saya memberi background pada teks ini. Dengan warna seperti yang saya kehendaki
</div>

Hasilnya akan seperti ini :

Saya memberi background pada teks ini. Dengan warna seperti yang saya kehendaki

2. Membuat background dengan Gambar

Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :

<div style="background:url(alamat_gambar_disini) no-repeat;">
Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>

Ganti tulisan alamat_gambar_disini dengan alamat gambar yang ingin anda tampilkan. Penggunaan kode no-repeat tentu saja apabila gambar yang anda miliki memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.

Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.

Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di https://sites.google.com/site/asadsite1/javascript-1/gambar2.png?attredirects=0&d=1, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :

<div style="background:url(https://sites.google.com/site/asadsite1/javascript-1/gambar2.png?attredirects=0&d=1) no-repeat >
Gambar akan Nampak di belakang teks
Gambar akan Nampak di belakang teks
Gambar akan Nampak di belakang teks
</div>

Jadi Ganti
https://sites.google.com/site/asadsite1/javascript-1/gambar2.png?attredirects=0&d=1
Dengan url gambar yang kamusukai

Hasilnya akan seperti ini :

Gambar akan Nampak di belakang teks
Gambar akan Nampak di belakang teks
Gambar akan Nampak di belakang teks