Tips Membuat Border Menarik Pada Posting Artikel ( 3 )

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



Related Posts by Categories :


9 comments:

Anonymous said... on September 24, 2008 at 2:35 PM  

@adi : sama2.
@tyar : Code diatas untuk blogger mas, sesuai dengan petunjuk diatas pasti berhasil.

`.¨☆¨geLLy¨☆¨.´ said... on September 24, 2008 at 7:45 PM  

nice inpo kak di coba tp yg div2 bawah aku kurang paham -_-" isa di jelasin lbh jelas kak

Anonymous said... on September 25, 2008 at 9:46 AM  

@`.¨☆¨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 ) .

Anonymous said... on September 26, 2008 at 9:44 AM  

Thank's artikelnya kelihatannya sih cukup keren nih

Nike Shox said... on October 4, 2012 at 1:58 PM  

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.

Post a Comment

"Using DOFOLLOW System. Pease don`t SPAM!!!"

Thanks To Comment My Articles. God Bless You People.

Add to Technorati Favorites

Technorati Ping To Your Blog
Including Yours E-Mail Address To Subscribe New Tricks