Tips Membuat Border Menarik Pada Posting Artikel ( 3 )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
Source : http://dhuwuh.blogspot.com/2008/09/tips-membuat-border-menarik-pada_23.html
![[Valid RSS]](http://i416.photobucket.com/albums/pp244/dhuwuh/valid-rss.png "Validate my RSS feed")
9 comments:
trim artikelnya..
pake bahasa apa sie, saya newbie
@adi : sama2.
@tyar : Code diatas untuk blogger mas, sesuai dengan petunjuk diatas pasti berhasil.
nice inpo kak di coba tp yg div2 bawah aku kurang paham -_-" isa di jelasin lbh jelas kak
@`.¨☆¨geLLy¨☆¨.´ : untuk kode css-nya ditempatkan di HTML anda (keterangan diatas) dan untuk < div class="..."> tulisan kita < /div> adalah pengaplikasian dalam artikel / penulisannya (bagian mana yg akan di border, maka kita beri perintah< div class="..."> tulisan kita < /div> ini ) .
Thank's artikelnya kelihatannya sih cukup keren nih
Nettverket nylig utsatt et par av lys grå Air Jordan II (2) Retro GS Fra bildene, er teksturen i øvre veldig bra, men dessverre kvinners stiler, så uansett hvor mange gutter er.
SeoWaps
ok artikelnya gan...
Post a Comment
"Using DOFOLLOW System. Pease don`t SPAM!!!"
Thanks To Comment My Articles. God Bless You People.