Tips Membuat Border Menarik Pada Posting Artikel ( 1 )

Membuat tampilan border pada suatu area text tertentu yang unik sangatlah menarik sekali. Contohnya seperti dibawah ini, dan bagaimana cara pembuatannya mudah kok, cuman berbekal telaten dan sering berkunjung ke rumah-rumah tetangga HeHeHe. Ya maklumlah namanya kita saling belajar dan bertukar informasi ok. Dan berikut ini mari kita terapkan dalam aplikasi CSS blog kita.

Contohnya seperti ini!!!

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>

.codeview {

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

background : #f9f9f9
url(http://www.geocities.com/dhuwuh/codeview.gif) no-repeat
right bottom;

border-top : 1px solid #eeeeee;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 1px solid #eeeeee;

}

.codeview li {

font-size : 13px;

line-height : 24px;

font-family : "Courier New", "MS Sans Serif", sans-serif, serif;

color : #333333;

font-weight : normal;

margin : 0;

padding : 0;

}

]]></b:skin>

5. Setelah itu save template

Sekarang untuk implementasinya adalah seperti ini --><div class="codeview">area text yang akan diborder</div>

Atau contohnya seperti ini :

<div class="codeview">

.codeview {

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

background : #f9f9f9
url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/cv-1.gif) no-repeat
right bottom;

border-top : 1px solid #eeeeee;

border-right : 2px solid #cccccc;

border-bottom : 2px solid #cccccc;

border-left : 1px solid #eeeeee;

}

.codeview li {

font-size : 13px;

line-height : 24px;

font-family : "Courier New", "MS Sans Serif", sans-serif, serif;

color : #333333;

font-weight : normal;

margin : 0;

padding : 0;

}

</div>

Source : http://dhuwuh.blogspot.com/2008/09/tips-membuat-border-menarik-pada.html

Link Exchange