//
you're reading...
Tip & Trik Wordpress

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’)
  • 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

About upfmacampurdarat

Program Pemberdayaan Petani Melalui Tegnology Informasi

Diskusi

Belum ada komentar.

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

Arsip

Kategori

Kalender FMA Campurdarat

Juni 2011
S S R K J S M
    Nov »
 12345
6789101112
13141516171819
20212223242526
27282930  
%d blogger menyukai ini: