ardy.or.id

Gak puas dengan desain yang sekarang, ak nambah CSS untuk menampilkan script PHP & HTML

CSS ini memanfaatkan sintaks di HTML yaitu: <blockquote>

ada 3 macam CSS yang ak tambah di desain blog ini:

1. <blockquote>
Kmaren sintaks <blockquote> cuma menampilkan seperti ini:
[code lang="css"]
blockquote {
margin: 0 20px;
padding: 0 20px;
border-left: 4px solid #E8E7D0;
font-size: 0.9em;
}[/code]

Sekarang sintaks CSS <blockquote> menjadi:
[code lang="css"]
blockquote {
margin: 0 20px;
padding: 0 20px;
border: 1px solid #DF4400;
font-size: 8pt;
font-family:"Trebuchet MS", "Century Gothic", Verdana;
background:#F5DCD0 url(./images/block.gif) no-repeat right bottom;
}
[/code]

Menghasilkan tampilan seperti ini:

Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru

2. <blockquote class=”php”>
Ini diperuntukan saat ak memposting script PHP pada blog ini. Script CSS lengkapnya:
[code lang="css"]
blockquote.php {
padding-top:20px;
font-family: monospace;
color: #666;
background:#B8B9D2 url(./images/php.png) no-repeat left top;
border:1px solid #676BA9;
}
[/code]

Maka tampilannya akan menjadi seperti ini:

Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru

3. <blockquote type=”html”>
Nah yang ini saat ak memposting tulisan HTML, biar lebih enak ngeliatnya:
[code lang="css"]
blockquote.html {
padding-top:20px;
font-family: monospace;
color: #666;
background:#C5E6F9 url(./images/html.png) no-repeat left top;
border:1px solid #0775B4;
}
[/code]

Nah, untuk yg ini tampilannya:

Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru
Contoh <blockquote> dengan CSS yang baru

Untuk kamu yang ingin memanfaatkan CSS yang sama dengan yg ak buat. Kamu bisa menambahkan script di atas ke file CSS kamu (biasanya klo pake wordpress namanya style.css).

Kamu juga bisa download file gambarnya di:
gambar utk <blockquote> : download di sini
gambar utk <blockquote class=”php”> : download di sini
gambar utk <blockquote class=”html”> : download di sini