Tambah CSS di desain blog
Wednesday, 06 June 2007 05:32:39 am
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
6th June 2007 05:45:23 am
memakai
1
Kayaknya bagus, ajarin dong gmn caranya buatnya??
ops:
6th June 2007 11:59:51 pm
memakai
2
coba gabung ma plugins RunPHP bro …
7th June 2007 02:19:04 am
memakai
3
Gak ngerti. Numpang lewat
8th June 2007 02:59:11 am
memakai
4
langsungn ke tkp deh…….kenalin dong sama clara…..wakakakkakak
8th June 2007 02:59:16 am
memakai
5
mampirr…
usaha terus bro.. yang sekarang ini agak pusing dilihatnya.. warnanya ngejreng bgt..
8th June 2007 03:22:17 am
memakai
6 //Author Comment
#2
iya, lagi dicari neeh pluginnya
#4
knapa blog ak jadi ajang jodoh neeh??
#5
Pusing ya mas?? kmaren warnanya kalem, cuma banyak diprotes karena malah buat dak menarik. Makanya pas nonton AADC? lagi (untuk ke 11x nya), jadi pengen tambahin warna ngejreng macem pilem tsb. Eh ternyata buat pusing Mas Budiyono
9th June 2007 11:14:24 am
memakai
7
Nice
11th June 2007 07:44:32 pm
memakai
8
wow keren…itu bisa buat [code] juga gak?
12th June 2007 06:02:43 am
memakai
9 //Author Comment
#8
Bisa pake plugin Code Snipet tinggal tulis:
[code lang="css"]
(untuk CSS)
[code lang="php"]
(untuk PHP)
14th June 2007 08:08:22 am
memakai
10
makasih. Kebetulan lagi pengen blajar CSS neeh.
12th October 2007 10:57:11 pm
memakai
11
salam,
bang aku anak yg baru lahir di dunia blog (wordpress) nih…
kasih tau donk gmana cara pengoprasian blog tsb, trs buat tampilan blog jd bagus/familiar….
key makasih sebelumnya
dari wong jogja
6th November 2007 05:50:17 pm
memakai
12
salam kenal
aku dari Madura, pengen banget banyak temen2 dari jagat maya ini
kalo gak keberatan biar aku jg punya blog kirimn dong cara bikin blog, aku akan sangat seneng sekali dan blogmu aku doain moga2 tambah okey.
salam dari jauuuh bangett
mumunk