Buat background posting berlainan

Kadang-kala kita jadi bosan apabila melihat background posting kita tampak sama aje.Apa kata, kita beri sedikit kelainan pada background setiap posting yang kita buat.Baiklah, penulis akan tunjukkan cara bagaimana menambah warna dan gambar pada background posting dengan menggunakan kod css.Mari kita pelajari kod simple css ini.

Background posting dengan warna

Ketika anda hendak mulai membuat postingan, pilih tab Edit HTML jangan pilih Compose. Mulai postingan dengan kod seperti ini :

<div style="background:#kod warna; text-align:justify/right/center/left; font-size:%/px/; font-family:verdana,times new roman dsbgnya">

kemudian taipkan teks anda dan diakhiri dengan kod </div>

contoh:

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.

kodnya:

<div style="background:#FFFFE5; text-align:justify; font-size:24px; font-family:mistral">

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>

Background posting dengan gambar

Sama juga seperti diatas..Semasa permulaan posting, pilih edit html (bukan compose) dan mulakan dengan kod dibawah ini.

<div style="background:url(alamat url gambar anda) no-repeat;">

kemudian taipkan teks anda dan diakhiri dengan kod </div>

Sebagai contoh, saya ingin membuat posting dengan background image yang beralamat di http://dinoerni.googlepages.com/dinobloginfo.png, background image ingin di letakkan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, font saiz 120%.Seperti halnya pada background dengan warna, kod ini pun boleh anda tentukan sesuai dengan keinginan.

<div style="background:url(http://dinoerni.googlepages.com/bloginfotips.jpg) no-repeat right top; text-align:justify;font-family:verdana; font-size:120%; 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:

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.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.

Amacam, simplekan.Ok cuba buat agar terus lekat diotak.Sebelum tu..mulakan dengan kalimah "Dengan nama Allah yang maha pengasih dan penyayang".Berkatilah ilmu ku ini.Amin.

Mungkin artikel dibawah yang sedang anda cari