cara meletakkan warna dan background pada posting

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

lihat Caranya:

Setelah membuat posting masukkan kode seperti dibawah:(dengan meletakkan dipermulaan diakhir teks pada posting yang hendak dimasukkan background) seperti dibawah

Masukkan isi teks artikel disini

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

Untuk meletakkan background pada posting:

<div style="background:url(Letakkan url gambar 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.

KODE DAN BENTUK

<div style="background: #99FFCC; padding: 5px 8px;">

Masukkan kandungan teks artikel disini</div>

Background dengan border
#Tukarkan warna kode background dan border sesuai yang diinginkan

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

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYLxqG3fa_tvLqLp3rpNf_pZTqXA9XhXwzRonY4wg8aX45Hmrs2StNqWwacq-UexqrvFYRzOkOupIdhzpDKgaai87jWXNbbt2DvVHfBcI6HJ8Isjq9Cf36qgIUBujv8qbmHbfeCKUsb8/s1600/1484.png) repeat;">

Masukkan kandungan teks artikel disini

</div>

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWzhuixr9p49TkAf1zE_1JpdMoZzXIFM_WkeaPQzS8YKwbpoz-3X-i_okxDs45tqqAhiH3xHTB2kCEk2_zkX0sJn_DxlZfBiWzsqaP-tXnXq1a9wKKlq1zqJIZg_3ZEhJHdGhP_L94ZoE/s1600/bunga.JPG) no-repeat;border: 2px solid; padding: 20px;background-position:right bottom">

Masukkan kandungan teks artikel disini

</div>

Untuk meletak gambar pada sudut tertentu masukkan kode 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..