CSS untuk paparan teks

Kalau kita melayari blog kekawan lain d internet yg mengajar cara untuk memaparkan code atau ape2 saje yg menarik..pasti kita perasan yg kod itu diletakkan dalam satu area yg berbeza agar ia tampil dalam bentuk yg menarik ....contohnye mcm kat bawah;

saya ada dalam kotak info

saya ada dalam kotak warning

saya ada dalam kotak download

saya ada dalam kotak alert

saya ada dalam kotak note

berminat nk membuatnya dalam blog, ikut cara berikut:-

• Seperti biasa, login ke Blogger, masuk ke Layout --> Edit HTML
• Cari kod ini ]]</b:skin> , guna CTRL+F utk lebih senang...
• Dah jumpe, pastekan kod di bawah kat atas ]]</b:skin>.
• #rec { margin:20px;padding:20px;}
.info {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i190.photobucket.com/albums/z315/fyzue/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
.warning {
border: 1px solid #FF8888;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://i190.photobucket.com/albums/z315/fyzue/warning.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.download {
border: 1px solid #C2E069;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://i190.photobucket.com/albums/z315/fyzue/download.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.alert {
border: 1px solid #FFC875;
font-size: 11px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://i190.photobucket.com/albums/z315/fyzue/alert.gif) no-repeat 5px 5px;
font-family: Verdana, sans-serif, "Courier New";
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
.note {
border: 1px solid #FFE375;
font-size: 11px;
color: #191919;
font-family: Verdana, "Times New Roman", Times, Georgia, serif;
line-height: 125%;
background: #FFF2BF url(http://i190.photobucket.com/albums/z315/fyzue/note.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}
  
• 
• sekarang Save Template...
  

Untuk melihat samaada cara ini berjaya atau tidak...cuba buat posting baru

kat dalam post 2 cuba buat :-

contoh untuk kotak alert kena buat camni <div class="alert"> tulisan dibuat disini </div>

sudah fahamkan cara nak menggunakan kotak ini kan...untuk yg lain ikut kod dibawah;

<div class="info">

Maklumat Disini

</div>



<div class="download">

Download Disini

</div>



<div class="warning">

Amaran Disini

</div>



<div class="alert">

Perhatian Disini

</div>



<div class="note">

Nota Disini

</div>

Semoga blog anda lebih ceria

sumber : Mohamed Rias

---

~orang yang comel sentiasa meninggalkan komen~

---