Deny Sri Supriyono

Kenapa harus dipercantik? Apa tidak cukup dengan tampilan text yang agak masuk ke dalam paragraph?

Untuk yang ingin berkreasi, sebenarnya tampilan blockquote bisa dieksplorasi dengan bantuan CSS.

Misalnya, diberi background warna atau gambar, diubah bentuk font serta warnanya atau diberi border - sehingga bisa tampil lebih cantik, manis ataupun macho - terserah yang anda suka.

Dalam artikel ini, kita akan mencoba untuk mempercantik tampilan blockquote - dengan memberi background gambar dan mengubah jenis fontnya sehingga akan memiliki tampilan seperti di bawah ini:

Serta yang paling utama adalah tampil bagus di Internet Explorer, Mozilla Firefox, Opera dan Safari.

Sedikit mengenai blockquote

Blockquote adalah sebuah tag HTML biasanya digunakan untuk menampilkan quote/kutipan. Misalnya, kita menemukan kalimat menarik dari seseorang dan ingin menampilkannya di blog/website - maka digunakanlah blockquote.

Contoh code blockquote:

I. Menyiapkan image

Untuk tutorial ini, dibutuhkan 2 image berukuran 40×40 pixel yang bisa dibuat dengan menggunakan aplikasi pengolah gambar. Beri nama file start-quote.gif untuk tanda awal quote dan end-quote.gif untuk tanda akhir quote.

Bisa juga menggunakan image yang saya gunakan dalam tutorial ini: start-quote.gif, end-quote.gif

II. Membuat halaman HTML

Berikut ini halaman HTML yang akan menjadi bahan tutorial.

Hasil dari kode HTML di atas bisa dilihat di halaman ini. Terlihat ada sebuah paragraph dengan isi kalimat dari Steven Gerrard tampil agak masuk ke dalam hasil dari kode blockquote.

III. Menyisipkan tanda awal quote

Sekarang kita coba sisipkan gambar tanda awal quote yang sudah kita siapkan sebelumnya. Kode di bawah ini akan menghasilkan warna background putih, start-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah atas kiri.

Hasil dari penambahan kode di atas bisa dilihat di halaman ini. Sekarang kita melihat tanda awal quote sudah menjadi background blockquote, tapi posisinya belum tepat. Text masih berada di atas background gambar yang membuatnya susah dibaca.

IV. Memperbaiki jarak text dengan tanda awal quote

Dengan mengatur padding untuk tag <p>, kita bisa mendapatkan jarak text yang diinginkan. Kita berikan padding atas dan bawah 10px, padding kanan 0px dan padding kiri 50px yang akan membuat text menjauh dari background gambar.

Berikut code CSS-nya:

Bisa terlihat di halaman ini, text sudah berada di posisi yang membuatnya lebih enak di baca.

Sampai pada tahap ini, beberapa dari kita mungkin sudah merasa cukup puas dengan hasil yang di dapat. But the best is yet to come, kita lanjut lagi ke tahap berikutnya.

V. Menyisipkan tanda akhir quote

Di tahap ini, kita akan menambahkan sebuah <div> dengan class “blokkuot” ke dalam blockquote supaya kita bisa menyisipkan image tanda akhir quote.

Baris kode HTML, khusus untuk blockquote berubah menjadi:

Setelah itu, kita tambahkan di bagian style beberapa baris di bawah ini yang akan menghasilkan warna background transparan, end-quote.gif sebagai background image yang tidak di ulang-ulang, dengan posisi background di sebelah bawah kanan.

Di halaman ini, kita lihat tanda akhir quote sudah berada di posisinya, tapi posisi text yang berada di atas gambar membuatnya agak susah di baca.

VI. Memperbaiki jarak text dengan tanda akhir quote

Untuk memperbaikinya, kita modifikasi sedikit style untuk tag <p> yang sudah kita buat pada tahap IV. Kita ubah nilai padding kanan menjadi 50px sehingga sama dengan nilai padding kiri.

Hasilnya bisa dilihat di sini. Sekarang kita sudah mendapatkan sebuah blockquote yang memiliki tampilan menarik, dengan text yang diapit oleh tanda awal dan akhir quote.

Cukup sampai di sini? Bagi yang sudah merasa cukup boleh stop sampai di tahap ini. Blockquote sudah terlihat cukup bagus untuk digunakan. Tapi saya masih ingin memberikan beberapa sentuhan akhir untuk membuatnya lebih menarik.

VII. Sentuhan akhir

Untuk memperoleh hasil seperti tujuan awal artikel ini, kita perlu sedikit memodifikasi kode CSS untuk blockquote yang sudah dibuat.

Pertama, menghilangkan margin dan padding disekitar blockquote yang dihasilkan secara otomatis.

Kedua, mengubah tampilan huruf dengan bentuk italic, ukuran 13px, font Georgia dan jarak antara baris 21px.

Building a wall, one brick at a time - akhirnya selesai juga. Hasil akhir bisa dilihat di sini. Sebuah blockquote dengan tambahan 2 image yang enak dilihat dan tampil baik di semua browser.

Tambahan

Pada tahap 5, ada penambahan sebuah <div> yang disisipkan ke dalam blockquote.

Untuk sebagian dari anda mungkin menganggap penambahan <div> seharusnya tidak dilakukan. Tapi, dalam kebutuhannya untuk mendapatkan hasil akhir yang diinginkan - diperlukan sebuah <div> tambahan.

Jadi, digunakan atau tidak - keputusannya ada di tangan anda sendiri.

Selamat bereksperimen dengan blockquote! Saran dan kritiknya sangat dinanti demi perbaikan.

Belajar CSS? Yuuuk!