CSS untuk Pullquote dan Dropcap
Posted on 10. Jan, 2009 by abbie in Blog Design
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!! 
wow… bener2 bermanfaat ini, mas. css untuk membuat quote dan drop caps. dah lama saya punya keinginan utk membuat postingan yang tampil beda. nah, ternyata akhirnya kutemukan juga, makasih banget share dan infonya.
terima kasih buat link baliknya mas
sebenarnya trik pullquote ini ada di theme gratisan seperti cutline, tapi karena belum banyak yang tahu maka saya edit sedikit CSS-nya dan saya posting tutorialnya
Trm ksh kembali pak Sawali.
Ini cuma repost kok. Original by mas Fandy @ fanari-id.com.
Artikelnya emang layak dilink balik mas Fandy.
Thx for sharing ya. Saya pke lgsg lho tipsnya..
mantep banget neh mas,ada guru css neh, coba dipraktekin di blog satuna dulu ah, ntar saya nanya2 yah kalo ga berhasil
weleh… sy aja nanya ke mas fandy e.
link just added, makasih yah, we’re partner now
sip. sama-sama mas
Wah…., di sisni ternyata pada akrab-akrab….
Kenalan doeng….:-)
Selamat dtg mas Hade..
Salam kenal jg.
wah, saya kurang ngerti ngoprek2-an nih, bisa bantuin nggak?
nah ini guna nya punya guru blogging
bagus om tipsnya
‘tak save page nih
Ayo mas ta’bantu sebisa saya.
Apanya dong?? ;?
hi..hi.. guru blogging.
too much itu Om.
Mas Abbie punya blog baru lagi nih, makin exist aja nih,
He..he.. ini domain yang sy anggurin selama 6 bln mas.
Ditengok cuma sekali2.
Skrg mau ditongkrongin ah.