Rabu, 27 Agustus 2014
Cara Membuat Backround Pada Postingan Blog
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 imej
<div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVixUxN0twO4XPDq8uxJSgNCUo5jV33gDR9SLCrdPjFgT8rTWeLxbpFEP6sH367dUqpu-g1TE3uWFB49AHxGd9XwDDXY41EVtLzNck5m1mmGE2tBd83ucbzxsIP19ohNwYWKEGcJ8ViU/s1600/1484.png) repeat;”>
Masukkan kandungan teks artikel disini
</div><div style=”background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9lDiC5tCH4viU2cQGWoHhS207sTEoZlkVz6gGQ0dPHFl0EIcev8h-_Dup1LTXbrg55szWhc2zCwgzLuuM_-RKg_i3vDoKVYFqnt-5oYo8JAuter8BawuBjcIiZGJ6-PPyj9WQRjROzG4/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
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar