Cara Membuat text di area yang berwarna

Posted by ronald | Posted on 03.17 | Posted in , ,

Tutorial yg berikut ini adalah tetang bagaimana cara membuat tulisan seperti dibawah ini :


Tulisan Seperti Ini dalam area yg berwarna INI





Tulisan Seperti Ini dalam area yg berwarna INI





Tulisan Seperti Ini dalam area yg berwarna INI





Tulisan Seperti Ini dalam area yg berwarna INI





Dan Seperti INI



Caranya seperti berikut:
Pertama Log In seperti biasa pilih tataletak>edit HTML
Kemudian copy kode di bawah ini dan paste tepat di atas kode ]]</b:skin>



#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/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://i280.photobucket.com/albums/kk162/mochal_nl_2008/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://i280.photobucket.com/albums/kk162/mochal_nl_2008/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://i280.photobucket.com/albums/kk162/mochal_nl_2008/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://i280.photobucket.com/albums/kk162/mochal_nl_2008/note.gif) no-repeat 5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 85%;
}



Setelah itu jangan lupa SIMPAN

Untuk menampilkan tulisan/text di area yang berbeda tinggal ganti aja kodenya seperti di bawah ini :


<div class="note">
Text
</div>


<div class="alert">
Text
</div>


<div class="hint">
Text
</div>


<div class="download">
Text
</div>


<div class="warning">
Text
</div>



Semoga bermamfaat
Di kutip dari : http://subagya.blogspot.com

Comments (0)

Posting Komentar

Langganan: Posting Komentar (Atom)