Pullquote in WordPress

Ingin tahu seperti apa sih Pullquote? ya yang sedang anda lihat ini adalah Pullquote

Pertama-tama, saya banyak mengucapkan terimakasih atas Annie Bluesky yang telah membuat kode Pullquote dalam versi Blogger. Namun… untuk saat ini, saya akan merubah sedikit kode Annie agar WordPress Friendly. Sebetulnya acara ‘transmigrasi’ dari kode CSS Pullquote antar Blogger-WordPress hanya memiliki sedikit perbedaannya, sehingga cara memanggilnya pun berbeda. Bagaimana pengintegrasian Pullquote dalam WP?

Pemasangan Pullquote pada CSS

Pertama-tama, kopikan kode CSS Pullquote berikut:

.entry pullquote {
background: #ffffff;
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Georgia, sans-serif;
color: #666;
text-align: center;
font-size: 1.4em;
border-top: 3px double #b8b8b8;
border-bottom: 3px double #b8b8b8;
}

Kode CSS diatas sudah WP-Friendly, sedangkan kode CSS Pullquote yang masih Blogger-Friendly adalah seperti ini:

pullquote {
background: #ffffff;
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Georgia, sans-serif;
color: #666;
text-align: center;
font-size: 1.4em;
border-top: 3px double #b8b8b8;
border-bottom: 3px double #b8b8b8;
}

Hem… tahu letak bedanya? yap benar, pada WordPress, Header CSS Pullquote-nya menjadi .entry pullquote. Sedangkan dalam Blogger, masih dalam bentul murni: pullquote biasa.

Kode CSS Pullquote yang sudah WP-Friendly diatas kita kopikan dalam CSS theme kita. Sehingga, kita harus masuk ke Dashboard WordPress kita, lalu memilih Theme > Theme Editor. Setelah itu pilih Stylesheet atau style.css (biasanya terbuka secara default). Setelah itu, kita cari barisan kode .entry blocquote, dan kita tambahkan kode CSS Pullquote WordPress kita dtepat dibawah sehabis kode CSS Blockquote. Sehingga nanti akan menjadi seperti berikut (yang ditebali adalah hasil enambahan):

.entry blockquote {
color : #666;
margin : 0 30px 20px 30px;
padding : 0 0 0 10px;
border : 2px solid #fff;
border-left : 2px solid #c3d9ff;
}

.entry pullquote {
background: #ffffff;
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Georgia, sans-serif;
color: #666;
text-align: center;
font-size: 1.4em;
border-top: 3px double #b8b8b8;
border-bottom: 3px double #b8b8b8;
}

Penggunaan kode Pullquote

Penggunaanya gampang kok… kita tinggal mengetik terlebih dahulu kata-kata untuk Pullquote kita. Setelah selesai, aktifkan tab HTML dari jendela pengeditan postingan. Kita pilih kata-kata yang akan dijadikan Pullquote. Diawal kata, tambahkan <pullquote> dan diakhir tambahkan </pullquote> mudah?

Keinginan penulis sih ingin menjadikan ini sebagai Plugin WordPress, tapi penulis masih terlalu awal dalam bidang ini, lagian penulis nggak pernah nyoba kok mbuat Plugin. Ada yang mau mengajari penulis?

Harap diingat, karena Pullquote bukan bagian resmi dari WordPress. Dengan katalain bukanlah Plugin, maka setiap anda kembali dari mode HTML ke mode Visual, kode Pullquote akan otomatis di hapus. Ini karena langkah WordPress mencegah benda asing masuk ke sistem tatanan post. Sehingga, cara penggunaan bisa diakal dengan menyelesaikan naskah posting terlebih dahulu, baru men-pergunakan Pullqote. Baru klik Publish atau Save dan tidak kembali lagi ke mode Visual.

Popularity: 2% [?]