Cara Modifikasi Blockquote Blogger

|

Blockquote adalah sebuah code yang biasanya digunakan untuk memberikan highlight kepada sebuah text di dalam artikel. Dengan memberikan blockquote, sobat memberikan kesan bahwa text tersebut penting dan harus dibaca. Nah contoh blockquote dari dindingcoret seperti ini:

Nah ini adalah blockquote dari dindingcoret, background blog ini hitam tapi background blockquote dibuat lebih terang dan sangat mencolok. Bentuk tulisan pun juga berbeda, kami menggunakan style italic.

Untuk memberikan blockquote, sobat bisa hanya dengan menseleksi tulisan yang dituju dan mengklik tanda petik pada toolbar blogger. Atau bisa juga dengan memberikan tag <blockquote>.........</blockquote>


Intinya :

Blockquote memberikan kesan yang penting terhadap kalimat itu dan sebaiknya dibaca karena informasi yang diberikan adalah PENTING.

Disini kita akan banyak berbicara tentang bagaimana memodifikasi tampilan blockquote agar sesuai dengan selera sobat.

Bagaimana mencari kode dari blockquote?

Kode blockquote biasanya ada di CSS template yang bisa sobat temukan diantara tag <b:skin>
Nah bentuk kode CSS blockquote tidak selalu sama pada setiap template, ini sebagian contohnya

.post-body blockquote {

font:italic 14px/19px Georgia, "Times New Roman", Times, serif;
padding:10px 20px;
margin:10px 0;
background:#1b2023;
}

atau ada juga yang kodenya seperti ini:

.blockquote {

font:italic 14px/19px Georgia, "Times New Roman", Times, serif;
padding:10px 20px;
margin:10px 0;
background:#1b2023;
}

Bedanya adalah deklarasinya aja. Yang satu pakai post-body, yang satu ngga pakai. Jadi intinya tidak masalah.

Menambahkan style pada Blockquote

Yang bisa dimodifikasi pada layout blockquote blogger adalah tulisan, border, dan background.

Modifikasi Style Tulisan

Oke sekarang kita akan mulai dengan code CSS blockquote standar, yang artinya belum ada style apapun,

.blockquote {
margin:1em 20px;
}

Penjelasan:
Margin menandakan bahwa sesi ini menadapat aturan bahwa letaknya memiliki margin sehingga akan menjorok kedalam. "1em" berarti margin atas dan bawah blockquote adalah memiliki space sebesar 1 kali enter. 20px menandakan margin kanan dan kiri blockquote memiliki margin sebesar 20px dan menjorok kedalam.

Memberikan style

Untuk memberikan style maka sobat bisa menambahkan code font untuk mengubah jenis tulisan:

.blockquote {

font:Georgia, "Times New Roman", Times, serif;

margin:1em 20px;
}

Jenis-jenis font yang dapat digunakan (cukup copy paste code font):

1. Arial = Arial,Helvetica,sans-serif
2. Courier New = "Courier New",Courier,monospace
3. Georgia = Georgia,"Times New Roman",serif
4. Times New Roman= "Times,"Times New Roman",serif
5. Helvetica = "Helvetica Neue",Arial,Helvetica,sans-serif
6. Trebuchet = "Trebuchet MS",sans-serif
7. Verdana = Verdana,sans-serif

Memberikan style italic atau bold

.blockquote {
font:italic 14px/19px Georgia, "Times New Roman", Times, serif;
margin:1em 20px;
}

Penulisan bold atau italic disusul dengan deklarasi ukuran font. pada italic 14px/19px berarti besar font adalah 14px dan jarak space adalah 19px.




Memberikan Warna pada font

.blockquote {
font:italic 14px/19px Georgia, "Times New Roman", Times, serif;

color:#FF00AE;

margin:1em 20px;
}

code #FF00AE akan memberikan warna ungu pada font.

Nah tutorial yang lainnya tunggu sebentar ya sobat, nanti akan keluar yang seri 2 dan 3 kog, menambah border dan menambah background pada blockquote.

Share