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.
Caranya:
Saat membuat posting atau hendak masukkan pada postingan, kita harus memasukkan kode seperti dibawah:
<div style=”background:#33CCFF; padding:4px 7px 4px 7px;”>
Masukkan kandungan teks artikel disini
</div>
Bahagian berwarna merah diletakkan pada permulaan posting
Bahagian warna hijau pula diletakkan pada penghabisan posting
dan dimasukkan pada mode edit HTML
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.
contoh tampilannya
<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 image
<div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWffPJzofJSrWemy5dP4aZ0FlxTyxEyalbtQts4T_ucg_hkX4gmy3xiS4Dy-qrNTRwt3IhzoMyBC2OzK54dpUuquh6_PZ9mbram_bP4ajEch5-k7csnXD2M62x_-zvMUQ033eJC7-jR5w/s1600/1484.png) repeat;”>
Masukkan kandungan teks artikel disini
</div>
<div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha99dtV3K3q018q1oFPO0s8mNYapzqa76M7EhcutfgWuUg4QtSRVnAjSQ-Bb8XCoSisGRgtzuvbd1bLBFgZXvH2edNp4OTBw9Sjwovb8Sd1HFQV2TbBcDZ4tgXxAfibKWlWBPiyc14Aic/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 kode background-position:right bottom.seperti contoh diatas gambar diletakkan dibaagian ujung bawah
background position yang lain:
- left top
- left center
- left bottom
- right top
- right center
- center top
- center center
- center bottom
selamat mencoba
0 ƘǿmєиtąЯ: