Oo Gituu…

scroll it, you'll love it

Mengubah Font Paragraf WordPress

with one comment

123rf

Siapa bilang tema-tema yang disediakan WordPress jelek-jelek:) Mungkin ada benarnya juga sih, lho…?;) Ah, mungkin permasalahannya yang membuat tema tersebut menjadi “kurang pas” dengan yang kita inginkan adalah karena type-face yang digunakan pada paragrafnya. Apa iya ya?;)

Saya sendiri awalnya bingung memilih tema mana yang punya tampilan bagus antara warna, desain, dan tipografinya. Kebanyakan saya kecewa dengan tema yang disediakan. Mengapa, karena ada satu tema yang punya desain apik hanya sayang type-facenya kurang bagus sehingga gak cocok dengan yang saya inginkan. Ada juga tema yang punya tipografi bagus, tetapi desainnya standar-standar saja. Nah, bagaimana kalau tema yang ada kita pilih yang mempunyai desain bagus dan tipografinya (terutama type-face untuk paragraf) kita sendiri yang pilih, pasti lebih bagus;)

Ternyata type-face yang digunakan pada paragraf akan secara signifikan “meningkatkan keindahan” di blog kita. Gak percaya? Coba deh, teman-teman perhatikan font yang digunakan pada blog ini, terutama bagian paragrafnya;) Saya menggunakan Georgia dengan size 15px dan line-height default. Padahal default tema ini menggunakan Lucida Sans Unicode dengan size 13px dan line-height 19.5px.

123rf

Oke deh, saya tunjukan kalo gak percaya kalo type-face yang sesuai dapat “meningkatkan keindahan” dalam blog kita;) Berikut saya tunjukan contohnya sekaligus style type-facenya. Font-family, font-size, dan font-height berikut merupakan “pasangan” yang saya ambil dari desain blog-blog lainnya;) So, kalau malas bereksperimen ya gunakan saja opsi berikut;)

Oh ya, font-font yang disebutkan ini termasuk jenis yang cocok untuk on-screen reading😉

Verdana, font-size: 13px; line-height: 20px;

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.


Contoh blog: http://www.dailyblogtips.com/😉

Verdana small, font-size: 11px; line-height: 20px;

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.


Contoh blog: http://www.viget.com/inspire/

Georgia, font-size: 14px; line-height: 23.8px;

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.


Contoh blog: http://reprog.wordpress.com/

Cambria, font-size: 16px; line-height: 24px;

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.


Contoh blog: http://nicolasgallagher.com/

Palatino Linotype, font-size: 16px; line-height: 24px;

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.


Contoh blog: http://leaverou.me/

Gimana? Tentu lebih menarik bukan daripada menggunakan type-face yang digunakan tema bawaan;) Apabila menggunakan fasilitas free yang dihost di WordPress saja tentu kita tidak punya akses untuk mengedit CSS temanya. Oleh karena itu, dibutuhkan kerja ekstra untuk hal di atas;) So gimana caranya? Berikut merupakan tag yang digunakan pada paragraf di atas yang menggunakan Cambria.

<div style=”font-family:’Cambria’;font-size:16px;line-height:24px;”>

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice, “without pictures or conversation?”

So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

</div>

Nah, untuk setiap paragrafnya menggunakan atribut style. Wah, kalau paragraf dalam blognya banyak repot donk kalau harus copy-paste manual? Nah, gunakan saja Notepad++ sebagai editornya. Di sini kita bekerja dengan mode Edit HTML saja. Untuk mempermudah penggunakan style tersebut, gunakan saja fitur Macro dengan cara berikut.

Baca dulu seluruhnya petunjuk berikut ya biar tau apa sih yang akan dilakukan;)

  1. Tuliskan blog kita seperti biasa, layout seperti biasa tanpa memikirkan dulu trik ini.
  2. Pindahkan kode HTML-nya ke Notepad++.
  3. Arahkan kursor ke bagian tengah salah satu paragraf.
  4. Record Macro berikut (Macro > Start Recording), ketikan tombol (nama tombol diapit tanda […]) dan kode berikut:
    [Ctrl] + [Home]
    <div style="font-family:'Cambria';font-size:16px;line-height:24px;">
    [ENTER]
    [Ctrl] + [End]
    [ENTER]
    </div>
  5. Selesai merekam makro dengan mengakses Macro > Stop Recording.
  6. Simpan makro yang baru saja direkam, Macro > Save Current Recorded Macro.
  7. Beri nama untuk makro tersebut, misal “Style Cambria”, dan gunakan shortkey untuk mempermudah penggunaan, misal kombinasi Ctrl + Shift + V.
  8. Nah, untuk postingan selanjutnya cukup: #1 klik bagian tengah paragraf dan #2 tekan Ctrl + Shift + V, maka akan secara otomatis tag tersebut dimasukan dalam postingan yang kita tulis;)

Sedikit merepotkan di awal-awal memang, tetapi kalau sudah tau caranya jadi gampang-gampang aja kok;) Oh ya, berikut beberapa hal yang harus diperhatikan.

  • Apakah tulisan lama kita akan diubah juga type-facenya? Kalau masih sedikit sih gak masalah, tetapi kalau udah banyak tentu akan merepotkan. Karena trik ini tidak secara global mengubah style yang digunakan;)
  • Perhatikan saat merekam kode HTML-nya, jangan sampe salah ketik. Pokoknya sampe tahap terakhir sebelum Stop Recording, pastikan semua sudah diketik dengan benar;) Kalau sudah oke baru deh Stop Recording;)
  • Perhatikan tanda “;” di akhir setiap atribut, terutama bagian akhir yang biasanya suka lupa;)
  • Eksperimen dengan font-size dan line-heightnya apabila dirasa masih kurang pas. Ukuran “px” digunakan untuk ukuran absolut sedangkan untuk ukuran relatifnya dapat menggunakan “%” atau “em” menyesuakan dengan style temanya;)
  • Apabila menggunakan list, jangan lupa juga untuk menambahkan style tersebut;)
  • Untuk bereksperimen dengan style tersebut, bisa juga menggunakan Dragonfly-nya browser Opera dengan mengakses klik kanan > Inspect Element. Dobel klik pada bagian tertentu dan ubah atau tambahkan atribut tertentu;)
  • Tidak mau repot-repot? Gunakan saja Typekit;)

Oke deh, semoga informasi ini dapat membantu teman-teman semua yang merasa kurang puas dengan tema yang disediakan WordPress;) Saya sendiri dengan menggunakan trik ini pun masih bingung dalam memilih tema yang pas. Bukan karena temanya jelek-jelek lho, tetapi karena tema yang dulunya jelek setelah diubah type-facenya tiba-tiba jadi lebih apik;) Gak percaya, silakan bereksperimen;) Selamat mencoba;)

Tulisan lainnya: Mengubah Font Preformatted

Advertisements

Written by Allan AS

24 April 2011 at 4:15 pm

One Response

Subscribe to comments with RSS.

  1. […] lainnya: Mengubah Font Paragraf WordPress […]


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: