Oo Gituu…

scroll it, you'll love it

Mengubah Font Preformatted

with 3 comments

123rf

Kalau menggunakan WordPress yang dihosting di WordPress.com, kita tidak bebas mengubah tema yang digunakan. Opsi mengupgrade (membeli fitur) CSS pun bukan pilihan terbaik. Padahal di sini kita hanya menginginkan menggunakan huruf tertentu pada bagian tertentu saja.

Solusi pertama adalah dengan memilih tema yang sudah menyediakan semua desain yang kita butuhkan, mulai dari jenis font, ukuran font, dan lainnya. Sangat susah memang karena saya sendiri menyukai desain tema tertentu, tetapi untuk font bagian tertentunya sangat tidak enak dipandang;) Untungnya dengan sedikit trik, mengubah font pada bagian tertentu tidak terlalu sulit;)

Nah, khusus bahasan di sini, kita akan coba mengubah font pada bagian preformatted-nya. Sekarang kita coba-coba dengan menggunakan font lainnya, soalnya jika menggunakan tema tertentu pas style preformatted-nya ada yang kurang bagus;) Oke deh, sebelum ke tagnya, perhatikan dulu yang beberapa contoh berikut;)

tampilan default style preformatted:

A special world for you and me     <-- baris #1
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3
And holds us fiercely in its womb. <-- baris #4

Coba perhatikan font pada petikan puisi di atas yang menggunakan style preformatted, sekarang coba deh kita gunakan beberapa font fixed width lainnya.

tampilan style preformatted dengan font OCR A Extended, size 100%:

A special world for you and me     <-- baris #1  
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3 
And holds us fiercely in its womb. <-- baris #4 

tampilan style preformatted dengan font Courier New:

A special world for you and me     <-- baris #1  
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3 
And holds us fiercely in its womb. <-- baris #4 

tampilan style preformatted dengan font Consolas, size 14px:

A special world for you and me     <-- baris #1  
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3 
And holds us fiercely in its womb. <-- baris #4 

tampilan style preformatted dengan font Lucida Sans Typewriter, size 1.2em:

A special world for you and me     <-- baris #1  
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3 
And holds us fiercely in its womb. <-- baris #4 

Sekarang jadi lebih fleksibel kan. Nah, berikut tag yang digunakan pada style preformatted dengan font Lucida Sans Typewriter size 1.2em.

<pre style="font-family:'Lucida Sans Typewriter';font-size:1.2em;">
A special world for you and me     <-- baris #1  
A special bond one cannot see      <-- baris #2
It wraps us up in its cocoon       <-- baris #3 
And holds us fiercely in its womb. <-- baris #4 
</pre>

Intinya, gunakan style pada setiap tag yang digunakan untuk mengubah style CSS pada bagian tersebut. Oh ya, jangan lupa untuk menambahkan tanda “;” pada setiap atribut, terutama yang terakhir yang biasanya suka lupa;)

Tulisan lainnya: Mengubah Font Paragraf WordPress

Advertisements

Written by Allan AS

19 April 2011 at 8:59 am

3 Responses

Subscribe to comments with RSS.

  1. great article

    saya suka ini

    trims

    ilyasafsoh.com

    23 April 2011 at 3:09 pm

  2. […] lainnya: Mengubah Font Preformatted […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: