Membuat tampilan border lain lagi nih pada suatu area text tertentu yang secara umum disesuaikan dengan fungsi-fungsi dan code-code tertentu yang telah kita kenal. Contohnya seperti dibawah ini ada tampilan border versi yang lainnya, dan bagaimana cara pembuatannya? Dan berikut ini mari kita terapkan dalam aplikasi CSS blog kita.
Nah sekarang ikuti langkah berikut ini :
1. Login blog anda
2. Edit HTML, janga lupa di backup dahulu "Download Full Template"
3. Setelah itu cari kode berikut --> ]]></b:skin>
4. Kemudian copy-paste kode dibawah ini diatasnya kode ]]></b:skin>
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://www.geocities.com/dhuwuh/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: 100%;
}
.warning {
border: 1px solid #FF8888;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #FFBFBF url(http://www.geocities.com/dhuwuh/warning.gif) no-repeat
5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 100%;
}
.download {
border: 1px solid #C2E069;
font-size: 11px;
color: #191919;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
background: #E5F2BF url(http://www.geocities.com/dhuwuh/download.gif) no-repeat
5px center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 100%;
}
.alert {
border: 1px solid #FFC875;
font-size: 11px;
color: #191919;
line-height: 125%;
background: #FFE5BF url(http://www.geocities.com/dhuwuh/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: 100%;
}
.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://www.geocities.com/dhuwuh/note.gif) no-repeat 5px
center;
display: block;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
font-weight: 400;
width: 100%;
}
]]></b:skin>
5. Setelah itu save template
Sekarang untuk implementasinya adalah seperti ini :
TEXT AREA
<div class="note"> TEXT AREA </div>
WARNING TEXT
<div class="note"> WARNING TEXT </div>
INFO TEXT
<div class="note"> INFO TEXT </div>
ALERT TEXT
<div class="note"> ALERT TEXT </div>
DOWNLOAD
<div class="note"> DOWNLOAD </div>
source : subagya
Tidak ada komentar:
Posting Komentar