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  blockquote-buttondi 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 blockquote-button , 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&#8217;)
  • 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 !😀

referensi :

79 thoughts on “Membuat Blockquote yang berbeda warna

  1. Ping-balik: Belajar WordPress « Ir1-aLoNer

    • Kak saya ingin bertanya, bagaimana caranya memodifikasi blockquote namun pada wordpress.com?mungkin dengan mengganti html-nya, bagaimana tulisannya?

      Kak bisakah pada wordpress.com, misal 2 paragraf yang di blockquote, tetapi paragraf ke2 lebih dalam dibanding paragraf ke1, harus bagaimana?

      maaf jika pertanyaannya sudah pernah dibahas, soalnya saya masih baru dalam penggunaan wordpress. terima kasih Kak

  2. Ping-balik: Link Tutorial Blog Lengkap (Wordpress, Blogger/ Blogspot) « .mifka weblog.

  3. benar membantu mbak
    aku termasuk yang baru bisa bikin blog di wordpress,jadi masih perlu banyak bantuan dan pertolongan dari orang2 macam mbak ini

    makasih da banyak membantu dan memberi info buat para pemula seperti aku ini😀

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s