Blockquote yang berbeda warna

18 Dec 2008

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)
  • 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 ! D

referensi :


TAGS


-

Author

Follow Me

Search

Recent Post


Categories

Archive