Membuat Background Posting Berbeda-beda
Space Iklan Disini, silahkan Hubungi kami !
Dalam membuat background ada dua alternatif 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).
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;"> Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div> 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 abu-abu, tulisan bisa rata kiri-kanan, besarnya hurup 120% dan padding sebesar 10 pixel :
<div style="background:#D9D7D7; text-align:justify; font-size:120%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet
dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam
augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam
pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.
Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.
Mauris et mauris. Duis sed massa id mauris pretium venenatis.
Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus
nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet
eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div> Hasilnya akan seperti ini :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet
dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam
augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam
pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.
Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.
Mauris et mauris. Duis sed massa id mauris pretium venenatis.
Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus
nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet
eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
Membuat background dengan Gambar
Nah jika postingan anda ingin mempunyai background berupa gambar, langkah pertama yang harus di ingat yaitu anda harus punya gambar yang akan di jadikan background (bahasanya ko bolak-balik dekok begitu yach?). Trus gambar tersebut harus di upload ke hosting tempat menyimpan 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,
<div
style="background:url(http://kangrohman.googlepages.com/roll_02.jpg)
no-repeat right top; text-align:justify; font-size:90%;
padding:10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet
dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam
augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam
pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.
Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.
Mauris et mauris. Duis sed massa id mauris pretium venenatis.
Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus
nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet
eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div> Hasilnya akan seperti ini :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet
dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam
augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam
pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.
Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.
Mauris et mauris. Duis sed massa id mauris pretium venenatis.
Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus
nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet
eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
Eiiiith... gampang juga kan? ya udah di coba dulu aja biar jadi hafal...
Categories:
Edit Template,
Tutorial
If You Like This Post, Share it With Your Friends & Peers
2 comments:
Informasinya ttg blog dan IT lengkap banget, Mas. Praktis dna sangat saya butuhkan. Cuman saya rada bingung mau ngisi buku tamu atau follow this blog kok ga ketemu2 tempatnya mas.
@Irham: Tombol follow ada di bawah artikel, sedang kan buku tamu berada di menu horizontal atas..terimakasih telah mampir
Post a Comment