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



7 comments:

Tinie berkata...

menarik..
tapi blog aku musnah..
cuba bro tolong tengokkan apa telah terjadi

deenoh berkata...

Tinie: musnah disebabkan setelah menjalani tutorial ini atau sebaliknya.Diblog tinie tiada apa yg musnah, cuma sidebar kanan (sidebar wrapper) sahaje yg rapat dengan posting (main wrapper)

INTAN berkata...

brilliant

kakyong berkata...

salam..

kakyong dah cuba buat semalam..
aci cuba dino tengok...

http://kakyong72.blogspot.com/2009/04/menuju-puncak-tribute-for-yuzrah-mahmud.html

deenoh berkata...

Kakyong: saya dah lihat postingnya...confirm menjadi tutorialnya..tahniah:D

julie berkata...

salam mekasih deenoh...lama julie cari tutorial nie..thanks 4 sharing..=)

deenoh berkata...

julie: senang-senang datang ke blog ini lagi

:)) ;)) ;;) :D ;) :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Catat Ulasan

Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.

 

Pelawat

free counters
BlogInfoTips

Pengikut

Recent Comments

Powered by Deenoh

© Copyright 2007-2009. Blog tutorial . All rightsreserved | Bloginfotips.com is proudly powered by Blogger.com | Template redesign by Deenoh