Tipografi CSS Pada Elemen ABBR

Saat saya mengganti tema blog dengan “The Erudite”, saya pun menyadari sesuatu yang tidak biasa pada tema ini. Ternyata setiap kata (singkatan) yang menggunakan elemen ABBR tidak memiliki tanda kasat mata, dengan kata lain dalam sekali pandang tidak dapat diketahui apakah kata itu mengandung elemen tersebut atau tidak. Kalau di tema yang lama, akan ada titik-titik kecil di bawahnya (yang membedakannya dengan pranala/inline links).

Saya bukanlah pengguna yang baik sehingga bisa melakukan “Penulisan Elemen ABBR yang Aksesibel” sebagaimana ditulis oleh Dani Iswara. Tapi rasanya tanpa style sheet yang tepat rasanya, tidak pas juga memandangnya. Jadi saya pun berniat melakukan sedikit pengubahan.

Sayangnya saya tidak memiliki pengetahuan apa pun tentang bagaimana mengedit CSS dalam tema wordpress. Terakhir kali mengedit tema, saya mendapatkan mimpi buruk selama seminggu. Ingin hati meminta bantuan pada pemilik Unessential Weblog, tapi apa daya karena sudah terbayang jawabannya akan penuh dengan pranala belajar mandiri ke sana ke mari, saya mengurungkan niat saya daripada mimpi buruk saya bertambah seminggu lagi.

Hal pertama yang saya lakukan adalah mempelajari “Styling abbreviations and acronyms”. Jadi saya tahu jika ingin mendapatkan gaya visual tertentu, kode minimal apa yang mesti saya sisipkan.

Saya pun memilih menyisipkan kode:


abbr, acronym
{
	border-bottom: .1em dotted;
}

Nah, sekarang saya sudah mendapatkan kode CSS yang saya inginkan, pertanyaannya, ke mana saya harus menyisipkannya?

Saya membuka berkas CSS di CPanel pada bagian tema terkait, hasilnya ada beberapa berkas terpisah, terutama berkas CSS untuk peramban lain seperti Internet Explorer berbagai versi. Ah…, tiba-tiba kepala saya berdenyut kencang, kalau ini salah sedikit saja, habislah sudah riwayat blog ini. Mana langit hujan bergemuruh dengan gelegar petir menyambar-nyambar, rasanya mirip suasana film trailer saja.

Saya kemudian teringat, jika saya memiliki plugin WP-Typography di blog saya. Pengaya ini memberikan banyak manfaat, lalu saya coba-coba membuka di bagian setelannya, ah! ternyata di sana ada bagian “add CSS hooks”, dan saya pun memasukkan kode di atas pada kolom “Styling for CSS Hooks”.

Input Code for CSS Hooks

Setidaknya sementara saya memiliki pertolongan untuk ini, dan sekarang elemen ABBR bisa dibedakan secara visual. Yah, beginilah nasib orang yang selalu newbie di bidang blog, untuk mengedit tema-pun mesti berkeringan dingin.

Peringatan: tidak disarankan mengikuti langkah-langkah yang ngawur ini 😆 – karena bisa menyesatkan!

Iklan

19 pemikiran pada “Tipografi CSS Pada Elemen ABBR

  1. hehe, iya tuh nggak kebaca.

    btw, apakah anda menggunakan syntax highlighter?

    Saya merasa kalau syntax highighter justru menyulitkan pengguna. Maksud kita baik ingin membagi source code tetapi justru lebih susah untuk dicopy…

    saya lebih suka menggunakan kode preformatted untuk menulskan code. sekedar referensi ada anyak online tools yang dapat digunakan untuk menggenerate code, salah satunya http://tohtml.com/

    Suka

    1. Mas Ardianzzz,

      He he…, maaf, saya posting lewat <abbr title="Windows Live Writer">WLW</abbr> dengan plugin "insert code", eh pinginnya stylish tapi lupa kalau background sama warna font-nya serupa, hancur deh.

      Masalahnya saya malas belajar kode-kode-an, biasanya pas kopdar tanya langsung sama Bli Dani (manfaatkan kamus berjalan gratis) 😆

      Suka

    1. Pak Aldy,

      Kemarin kebanyakan diedit, jadi tema-nya hancur…, udah sekalian ambil yang baru saja (alasan buat kabur).
      Bukan bermain dengan CSS, tadi Bli Dani saya tanyakan, malah disuruh Googling, cape deh…, mending saya buat catatan sendiri saya, kalau perlu saya bisa buka-buka lagi 😀

      Suka

    1. elmoudy,

      Masalahnya saya tunanetra di dunia CSS, makanya saya memanfaatkan CSS Hooks 😆 – jika tidak, saya tidak bisa bergerak kalau cuma meraba-raba di belantara CSS yang gelap gulita 😀

      Suka

  2. Mas Is,

    Blog ini masih banyak kekurangan, yang baru saya benahi biasanya saya catat. Tapi paling-paling besok saya lupa lagi 🙂

    Soalnya memang bukan bakat dan minat saya di design web 😀

    Suka

  3. Decy

    nah.. aku sering salah menyisipkan kode2 di css

    sejujurnya saya cuma nyontek di om google

    dan hasilnya suka berantakan * pastiiii laahh heheheh 😛

    Suka

    1. Mbak Decy,

      Oh Mbak pakai paket berbayar wordpress.com ya bisa mengedit kode CSS-nya?
      Saya belum pernah mencoba di wordpress.com, karena tidak bisa kalau hanya pakai paket blog gratisan 😦

      Suka

  4. Decy

    ngga , dulu aku nyobanya bukan di WP, tapi di layanan Blog lain yg bisa diatur sendiri BG nya

    sayangnya ga terlalu ngerti , jadi acakadut…
    .-= Artikel terakhir blog Decy: 🙂 =-.

    Suka

  5. iskandaria

    Wah, sudah mulai berani utak-atik CSS ni yee 🙂 Harus belajar mas. Pelan-pelan aja. Kalo mau belajar CSS, ketik aja keyword "belajar css" di google. Banyak referensi kok.

    Saya malah belum mengkustom settingan CSS untuk abbr blog saya. Mau ubah ah, biar aksesibel kayak blog ini yang udah berhasil..hehehe
    .-= Artikel terakhir blog iskandaria: Banjir Komentar SPAM Berbahasa Cina di Blogspot Saya =-.

    Suka

  6. Mas Rismaka,

    Ah…, sudahlah biar saya pakai CSS Hooks saja dulu, saya kan orangnya hobi ganti blog theme, siapa tahu ke depannya ganti lagi, biar sekalian ndak repot 😉

    Suka

  7. budiastawa

    Mantap, Dok. Saya juga lagi belajar CSS. Kalau ada penemuan baru, mohon dibagi-bagi ya, Dok 😀
    .-= Artikel terakhir blog budiastawa: 4 Alat Gratis Pencatat Statistik Blog Anda =-.

    Suka

  8. Bli Budi,

    Saya juga masih banyak belajar Bli, malah kalau mau "berguru" masalah CSS kan ada Bli Dani, Mas Is, Mas Ris, Pak Aldy atau Mas Ardianzzz yang lebih mumpuni 🙂

    Saya memang sengaja tidak membiarkan diri saya mendalami ilmu CSS atau pun XHTML 😀

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.