Membuat Blockquote yang berbeda warna

Membuat Blockquote yang berbeda warna. Saat kita akan membuat suatu paragraph berbeda, misalnya untuk kutipan, nota bene (NB) atau postscript (P.S) maka kita akan mem-blok paragraph tersebut dengan warna atau bentuk yang lain dari pada konten utama, ini dinamakan “Blockquote” .
Secara default, blockquote sudah tersedia scriptnya di masing-masing theme yang digunakan, kita hanya tinggal menseting paragraph itu, blok dan klik tanda kutip dua seperti ini  di toolbar atas panel postingan.
Nah, biasanya script di stylesheet theme hanya menyertakan satu macam layout untuk blockquote, bagaimana jika kita mau mem-blockquote beberapa paragraph dan kita ingin satu sama lainnya berbeda layout ?

Buka file stylesheet, dan temukan jejeran kode untuk blockquote, tambahkan setelah nya kode seperti ini :

.bgmerah { background: #990000; }

kemudian, saat akan mem-blockquote satu paragraph, blok paragraph tersebut, klik gambar kutip dua , kemudian klik bagan HTML sehingga kita bisa melihat kode-kode di postingan kita.
tambahkan kode
class=”namablockquote” setelah kode <blockquote paling depan.

<blockquote class=”bgmerah”>

Hasilnya :

Ini contoh blockquote dengan layout warna merah, keren kan ? kode warna bisa diganti-ganti, lihat di color-chart dan nama blockquote juga boleh beda asalkan nanti dipanggilnya sama.

atau ingin membuat blockquote seperti ini :

nama .bgblok atau .bgmerah bisa diganti sesuai keinginan, begitu juga background image jika punya gambar mau ditampilkan di latar blockquote

kodenya :

.bgblok {
border:1px dashed #990000;
background:url('/’images/gambar.jpg’') 5% no-repeat #FFCCFF;
margin:20px 10px;
padding:0 20px 0 50px;
}

layout lainnya :

• Untuk blog di WordPress.com,bisa ganti-ganti gini asal sudah upgrade (udah bisa edit .css nya)
• background:url('/’images/gambar.jpg’') –> gambar akan muncul jika sudah upload gambar ke server atau merujuk ke url lain seperti ini background:url('/’http://namadomain.com/images/gambar.jpg’')
• Jangan lupa, perhatikan kode blockquote bawaan themesnya, hasil yang berbeda/error/tidak tampak kemungkinan karena setingan di .css bawaan.
  

yang diatas itu kodenya :

.bggarisdobel {
background-color:transparent;
border-top:3px double #DC143C;
border-bottom:3px double #DC143C;
font-size:1em;
margin-left:5%;
margin-right:5%;
padding:5px;
}

selamat ber-eksperimen Membuat Blockquote yang berbeda warna