cara letak background atau warna pada entri

Tutorial kali ini ialah cara bagi meletakkan warna atau background pada posting.Mungkin kita ingin highlightkan bahagian tertentu atau keseluruhan paparan pada posting dengan warna dan juga berlatarbelakang dengan imej.
background

Caranya:
Selepas  membuat posting  masukkan kod seperti dibawah:
(dengan meletakkan dipermulaan diakhir teks pada posting yang hendak diletak background)
seperti dibawah
<div style="background:#33CCFF; padding:4px 7px 4px 7px;">
Masukkan kandungan teks artikel disini
</div>


Bahagian teks berwarna merah diletakkan pada permulaan posting
Bahagian warna hijau pula diletakkan pada penghabisan posting
dan dimasukkan pada mode edit HTML
contoh seperti imej dibawah yang bertulisan warna biru
letak kod







Untuk meletakkan background pada posting:

<div style="background:url(Letakkan url imej disini) no-repeat;">
Masukkan kandungan teks artikel disini
</div>
# gantikan dengan url imej yang telah diupload ke photobucket,tinypic dan sebagainya seperti contoh dibawah.
Jika menggunakan latarbelakang dengan corak/pattern yang kecil gantikan no-repeat kepada repeat.

KOD DAN BENTUK


<div style="background: #99FFCC; padding: 5px 8px;">
Masukkan kandungan teks artikel disini</div>

Background dengan border
#Tukarkan warna kod background dan border mengikut kesesuaian
<div style="background: #99FFCC; border: 2px dashed #FFCC00; padding: 5px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 2px dotted #FFCC00; padding: 5px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 5px ridge #FFCC00; padding: 5px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; border: 3px double; padding: 5px 8px;">
Masukkan kandungan teks artikel disini</div>


<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-radius: 36px 12px;
-moz-border-radius: 26px 8px;
border-radius: 26px 8px;">
Masukkan kandungan teks artikel disini</div>

<div style="background: #99FFCC; padding: 5px 8px;-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;">
Masukkan kandungan teks artikel disini</div>


Background dengan imej

<div style="background:url(http://1.bp.blogspot.com/_yqzcBmyK-mo/TTZeqksBgAI/AAAAAAAABRk/lHF1moxZWzE/s1600/1484.png) repeat;">
Masukkan kandungan teks artikel disini
</div>

<div style="background:url(http://3.bp.blogspot.com/_yqzcBmyK-mo/TTZkN9RuexI/AAAAAAAABRs/ZLFQ4eN9ROo/s1600/bunga.JPG) no-repeat;border: 2px solid; padding: 20px;background-position:right bottom">
Masukkan kandungan teks artikel disini
</div>

Untuk meletak imej pada sudut tertentu masukkan kod background-position:right bottom.seperti contoh diatas gambar bunga diletakkan dibahagian hujung bawah
background position yang lain:
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • center top
  • center center
  • center bottom
selamat mencuba..

Catat Ulasan

8 Comments:

m!sZ zAL!nA berkata...
Teknik Buat Blog

da by kali try tp xjd :(

Kaki Bongkar berkata...
Teknik Buat Blog

ok nak try dulu

||aLeaSaRa|| berkata...
Teknik Buat Blog

nti bro free tlg buatkan tutorial background utk blog archieve atau bloglist ye.tqvm =.=

BUNGA berkata...
Teknik Buat Blog

Terima kasih. Saya dah berjaya buat :)
Tapi boleh tunjukkan tak caranya mcm mana nak resize lebarnya?

tq :)

aen ashiqin berkata...
Teknik Buat Blog

blog awk best, lg sgt berguna bg blogger bru mcm sy tq..

Misa berkata...
Teknik Buat Blog

Thanks ^^

Asypa ratnasari berkata...
Teknik Buat Blog

waw sumpah pusing :(

yahaya berkata...
Teknik Buat Blog

@Asypa ratnasaripohon maaf kerana bikin pusing...:) saya sudah betulkan beberapa ayat yang agak mengelirukan dan gambar terletak ditempat yg tak sesuai..terima kasih kerna komen tutorial ini....