Manipulasi Blockquote Dengan CSS

By HP Yitno

Cascading Style Sheet - Seolah nggak pernah ada habisnya untuk dibahas. Secara hanya dengan mengetahui perintah dan fungsi css saja, kita sudah bisa berkreasi dengan itu. Contoh sederhananya adalah pembuatan template yang unik namun masih tetap memiliki kecepatan loading yang cepat. Saya yakin template yang seperti ini tidak akan pernah terwujud jika seorang web designer tak mengerti dasar-dasar css.

Tutorial saya kali ini akan membahas bagaimana cara memanipulasi blockquote dengan css supaya tampilannya terlihat indah dan menarik. Blockquote sendiri adalah sebuah kutipan yang berasal dari sumber tertentu dan patut menjadi perhatian para pembaca. Posisinya berada di tengah-tengah artikel dan sedikit menjorok ke dalam. Sekarang ini pemakaiannya tidak hanya sebatas itu saja. Para pembuat tutorial seperti saya juga sering memanfaatkannya sebagai pengganti tag division (mengapit sebuah kode script)

Ada dua metode yang akan saya berikan yaitu dengan merubah template dan tanpa merubah template. Jika memakai teknik merubah template, maka seluruh blockquote yang ada dalam situs kamu akan berubah secara otomatis sesuai kode css yang kalian sisipkan. Jadi sahabat tidak akan kerepotan memasukkan kode css lagi nantinya. Sedangkan jika menggunakan cara kedua, sahabat perlu memasukkan kode css setiap hendak menggunakannya. Kelebihannya adalah kita bisa membuatnya berbeda-beda antara postingan yang satu dengan yang lainnya.

Berikut cara menyisipkan cascading style sheet dalam blockquote:
1. Dengan merubah template
a. Login ke dashboard blogger
b. Pilih template dan klik edit html
c. Cari kode ]]></b:skin> dengan bantuan CTRL+F
d. Masukkan kode css berikut ini tepat diatasnya

blockquote {border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;}

e. Simpan template

Cara penggunaannya:
Silahkan anda membuat postingan seperti biasanya. Kemudian block paragraf yang akan dijadikan blockquote. Setelah itu tekan icon (") yang berada diatas lalu terbitkan postingan.

2. Tanpa merubah template
a. Login ke dashboard blogger
b. Buat artikel seperti biasa
c. Block paragraf yang akan dijadikan blockquote
d. Klik icon (") yang berada diatas

e. Rubah mode compose ke mode html
f. Sisipkan kode css ini ke dalam tag blockquote.

style="background: white; border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;"

g. Ubah mode html ke mode compose
h. Publish artikel

Keseluruhan kode css kedua akan seperti ini:

<blockquote class="tr_bq" style="background: white; border-left: 5px solid #D9DDD6; font-family: helvetica; font-size: 14px; font-style: italic; line-height: 1.4em; margin: 0px; padding: 0px 5px 0px 10px; text-align: justify; white-space: line-wrap; word-break: hyphenate; word-wrap: break-word;">...</blockquote>

Keterangan CSS:
border-left : 5px solid #D9DDD6  (border sebelah kiri)
font-family : helvetica  (jenis huruf)
font-size    : 14px  (ukuran huruf)
font-style   : italic  (bentuk tulisan miring)
line-height  : 1.4em  (lebar baris)
margin       : 0px  (jarak border dengan garis tepi)
padding     : 0px 5px 0px 10px  (jarak tulisan dengan border)
text-align   : justify  (tulisan rata kanan dan kiri)
background : white  (warna background)

Hasil penggunaan kode css diatas akan tampak seperti ini:

Memperoleh penghasilan lewat blog sebenernya tidak begitu sulit selama kita tahu caranya. Masalahnya tidak semua orang rela membagi ilmunya secara gratis. Tapi disini - saya akan menunjukkan cara-cara menghasilkan uang lewat internet dengan gratis. Caranya dapat anda baca disini.

SHARE :