Tips Buat Background Pada Postingan

Agar tampilan artikel lebih unik, kita dapat membuat background yang berbeda pada masing-masing postingan kita. background pada postingan ada dua macam, ada yang berupa warna dan ada yang berupa gambar. background berupa gambar tentu lebih indah tapi halaman menjadi lebih berat.

Background Warna

Membuat backround berupa warna pada postingan cukup dengan memilih Edit Html, awali html postingan anda dengan kode :

<div style="background:kode_warna_disini;">

dan tutup postingan anda dengan kode :

</div>

contoh :

<div style="background: none repeat scroll 0% 0% rgb(217, 215, 215); font-size: 120%; text-align: justify;">

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

ganti #D9D7D7 atau none repeat scroll 0% 0% rgb(217, 215, 215) dengan kode warna yang anda sukai.

Background Gambar

Background gambar dapat mempercantik tampilan postingan anda, sebagai tips sebaiknya gambar yang ditampilkan disesuaikan dengan template blog anda. Awali postingan anda dengan kode seperti ini :

<div style="background:url(alamat_gambar) no-repeat;">

Dan diakhir postingan, harus di tutup dengan kode seperti ini :

</div>

<div style="padding: 10px; background: transparent url(http://www.imagevine.com/christian/freebackgrounds/free-christian-backgrounds.jpg)

no-repeat scroll right top; -moz-background-clip: -moz-initial; -moz-background-origin:

-moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify;

font-size: 90%;"><span style="color: rgb(255, 255, 255);">

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

</div>

Script yang berwarana merah adalah alamat url gambar.
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.

Semoga bermanfaat.

Source: classicom