CSS untuk Pullquote dan Dropcap

Inilah manfaatnya blogwalking. Selain menemukan teman sesama blogger, kita juga bisa mendapat informasi baru yang akan membangun pengetahuan kita tentang blogging. Berkunjung ke blognya mas Fandy beberapa hari lalu, saya melihat sebuah artikel menarik di sana: 4 trik CSS untuk memperindah tulisan artikel blog.

Dari 4 trik CSS yang ditulis, ada 2 trik yang saya suka. Membuat CSS untuk Pullquote, dan satu lagi tentang CSS untuk membuat Dropcap.

CSS untuk membuat Pullquote

Pullquote? Anda belum pernah dengar? He..he.. begitu juga saya sebelumnya. Kalau melihat karakternya, menurut saya, pullquote ini berfungsi sama dengan blockquote. Bedanya, blockquote lebih sering ditampilkan dalam paragraf terpisah, sedangkan pullquote diletakkan satu paragraf dalam content.

Ini adalah contoh blockquote. Dalam setiap theme WordPress, desain CSS untuk blockquote sangat beragam. Tapi jangan kuatir, anda bisa mengubahnya sesuai selera anda kok. Saya kadang juga meng-copas kode CSS blockquote lain ke dalam style.css, lalu mengeditnya sedikit.

Nah.. yang ini contoh pullquote. Format yang baru dan beda seperti ini memang lebih segar ya? Coba deh..

Kata mas Fandy, ada 2 metode untuk membuat pullquote. Yang pertama, menambahkan class attribute pada CSS untuk blockquote. Dan yang kedua, membuat div atau span baru untuk pullquote. Yang pertama lebih menguntungkan. Caranya, tambahkan kode berikut ini pada file style.css theme WordPress anda.

blockquote.left {
   width: 160px;
   margin: 0 10px 5px 0;
   font: 1.4em georgia;
   text-align: left;
   color: #777;
   background: none;
   border: none !important;
   padding: 0 !important;
   float: left;
}
blockquote.right {
   width: 160px;
   margin: 0 0 5px 10px;
   font: 1.4em georgia;
   text-align: right;
   color: #777;
   background: none;
   border: none !important;
   padding: 0 !important;
   float: right;
}

Lalu, jika anda menulis content dan ingin menggunakan pullquote di sebelah kiri, masukkan kode html berikut ini :

<blockquote class="left">letakkan teks anda di sini</blockquote>.

Dan jika anda ingin menggunakannya di sebelah kanan :

<blockquote class="right">letakkan teks anda di sini</blockquote>.

Bagaimana? Mudah 'kan?

CSS untuk membuat Dropcap

Dropcap biasanya digunakan pada huruf di awal paragraf dengan menampilkannya dalam ukuran font yang lebih besar sehingga memperindah tulisan kita. Untuk membuatnya, kita harus menambahkan code CSS seperti berikut ini ke dalam style.css.

.dropcap {
   padding: 0.2em 0.1em 0.05em 0;
   font-size: 3.3em;
   line-height: 0.6em;
   font-family: georgia;
   color: #333;
   float: left;
}

Letakkan code di atas pada id atau class, misalnya

post .dropcap {
   padding: 0.2em 0.1em 0.05em 0;
   font-size: 3.3em;
   line-height: 0.6em;
   font-family: georgia;
   color: #333;
   float: left;
}

Lalu, gunakan span setiap kali anda ingin membuat dropcap. Misalnya seperti contoh saya di atas:

<span class="dropcap">D</span>

---

Saya langsung menggunakan 2 trik di atas di blog belajar blogging ini setelah sebelumnya mencobanya di WordPress yang saya instal di komputer saya. It's highly recommended!!