16 September 2009

;

Tips Membuat 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:#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.
</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 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>

contoh :

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

Selamat mencoba
classicstudio, facebook Ahmad Mutakabbir : Seluruh Artikel seputar Tutorial Blog, Tips Facebook, Download Antivirus, serta informasi komputer dan internet disajikan secara gratis dan bebas iklan.

Artikel lain yang menarik



2 comments:

Samy Dark Elf on April 28, 2010 at 9:23 PM said...

Terima kasih banyak ni Om,.,.
Infonya Bagus,.,.,.♥

d'araCM on June 28, 2010 at 11:41 PM said...

Trims tutor-x...

Tinggalkan Komentar

 
Computer Blogs - BlogCatalog Blog DirectoryTechnology Blogs - Blog Rankings Blog Directory by Blog FluxInternet GoLedy.comComputers Blogs TopOfBlogsHihera.com Add to Technorati FavoritesAdd to Technorati Favorites Top BlogsPageRank Checking Icon

Classicstudio | Blog Tutorial | Tips Facebook | Download Antivirus | Cara Hacking Copyright © 2009 Classicstudio