Membuat Blockquote yang berbeda warna
Posted by: rivermaya on: 9 Desember, 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 
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 ! 
referensi :
64 Tanggapan ke "Membuat Blockquote yang berbeda warna"
10 Desember, 2008 pada 3:29 pm
Mbak maya orgny gak sombong ya,mbak mau bkunjung di blog kcil spt blogku,mau ksh comment lg ma tukar ilmu.Gak spt blog tetangga kita yg berPR 5 itu.
Tetap ramah dan gak sombong y mbak.Sbg award to mbk maya,dg sukarela aku psng link mbak tnp mnta linkback.
11 Desember, 2008 pada 1:39 am
Mbak, Masih bingung neeh…he…he…he…tapi biar dicoba dulu
11 Desember, 2008 pada 2:31 pm
Itu.. tu.. lho mbak.. Anu.. alahh.. itu lho mbak.. Aku takut kl mo bikin tutor WP, takut kl dilabrak dikira copas blognya.
Skrng pndah comment dsini aj, hbs kl dsni dtanggapi commentnya.
Wah.. pngen lht theme brnya mbak ni,slnya ol pk HP gak bs lht 
12 Desember, 2008 pada 12:20 pm
Themenya yg satunya keren banget.Enak ya mbak dah punya domain ma hosting sendiri,bisa mænan JavaScript ma edit theme sesukanya.Hbs mbak pemain lama,beda ma aku yg br 2 bln. Aku jd pngen lg ngeblog di blogspot ni.Mo nanya,URL blog baru itu hr lhr mbak ya?
12 Desember, 2008 pada 12:39 pm
walah begono toh carane, wihh sip banget dah. rivermaya emang top, makasi mbak infonya
15 Desember, 2008 pada 3:40 pm
Wow, mantab bener nih tutorialnya…
Terimakasih untuk infonya, Mbak…
15 Desember, 2008 pada 9:08 pm
aku bru bikin WP, cara rubah themes-nya gimna ya?
Please, bantu aku dong, maklum PEMULA!
19 Desember, 2008 pada 8:37 am
seiring waktu berlalu begitu cepat
aku datang keblogmu dengan membawa Software can’t copy CD 
salam kenal
3 Januari, 2009 pada 12:43 pm
mas/mbk klw mw install plugin wordpress tapi g ada hostingnya gmn ya???
6 Januari, 2009 pada 8:59 am
Hebuaatt deh…!
Terus terang saya gak pengalaman di wp
Salam kenal
7 Januari, 2009 pada 1:21 pm
terimakasih telah berbaik hati u/ memberikan infonya, semoga tambah ilmunya…..:-)
14 Januari, 2009 pada 1:40 am
kalau saya lagi belajar bisnis online di http://www.internetsukses.com/?ref=ianto Bisnis Internet Pemula.
Hanya Kerja 1 Jam/Minggu saja > Penghasilan 1 Juta/Bulan, GARANSI
ada KANTOR dan LAB atau Hub Call Center.
14 Januari, 2009 pada 5:49 am
Kunjungan Blog Regedit, Artikelnya bagus apalagi kata-katanya menarik menambah wawasan dan pengalaman saya trims ya…lanjutkan artikelnya saya tunggu. O iya…Teman boleh minta bantuannya? Saya lagi ikut lomba Speedy Blogging Competition 2008, dimana criteria penilaiannya blog adalah banyak pengunjung, posting dan komentar. Boleh saya minta komentar dari teman untuk artikel di blog saya? Please….. Kalau Boleh Kunjungi blog saya ya hari ini saya baru posting artikel tolong komentarnya kalau bisa komentarnya berkaitan dengan artikel yang di pilih teman. Ini alamatnya : http://regedit.blog.telkomspeedy.com/ terima kasih banyak satu lagi kalau mau tuker link masukan saja link teman di Guest Book insya Allah swt besok langsung saya pasang link teman.
14 Januari, 2009 pada 4:02 pm
Mbak, fungsi searchnya ada di mana yah ? Kok dicari-cari gak ketemu ? Kebetulan mau nyari topik tertentu.
14 Januari, 2009 pada 5:13 pm
wah..blognya aja blum selesai dah dapet pelajaran yang brharga nih…dan masih buta banget. klau belajar langsung bisa gak? kursus kecil kali ya…hehehe…
16 Januari, 2009 pada 4:50 pm
Sebenernya blog quote tuh buat apa seh??
Saya sendiri masi bingung..
22 Januari, 2009 pada 7:11 pm
wah bagus banget mbak’e. tambah ilmu baru nih. gaksia2 nengok blog ini. tks
25 Januari, 2009 pada 9:13 am
Informasi ini sangat menarik dan bermanfaat buat para netter. Semoga ilmu yang di sebarkan ini mendatangkan manfaat buat penulis dan pembacanya. Saya juga lagi belajar ngenet, tapi masih awam. Trimakasih atas ilmu dan panduan serta informasinya ya, jangan lupa mampir ke blog saya
http://www.yanto-home.blogspot.com
SALAM HANGAT!!!
26 Januari, 2009 pada 7:06 am
wah terima kasih atas informasinya, jadi tahu bagaimana membuat ‘perbedaan’ di teks wordpress…
thanks…
29 Januari, 2009 pada 12:22 pm
wah,,thx infonya yah,,hhe,,
salam kenal juga deh,,
eniwei,,
daftar ibsn yuk di sini,, trus logonya ambil di sini,,
berbagi tak pernah rugi,,salam ibsn,,
31 Januari, 2009 pada 3:13 pm
wah,keren-keren..
thq buat infonya mbak..
oia,mampir donk di blog saia..
http://yeyekh.wordpress.com/
matur thankyu..
6 Februari, 2009 pada 3:22 pm
hiks…blm ngerti mbak..
Maklum masih pemula…Bisa kasih contoh tutorialnya pake gambar ga???
Thx ya mbak.. nice blog..
12 Februari, 2009 pada 1:56 pm
Komen lagi ah, he he…
Blog mbak kok rame banged ci… Munkin karena mbak cewek kali ya, jd banyak blogger yg nempel kayak perangko
16 Februari, 2009 pada 4:51 pm
Mbak Maya,
Saya dah coba koq hasil statistiknya spt ini? Ada tulisan DECLINE? Emang salah dimanenya ya?
Statistics
Statistics for seven_7
Registered on: 2009-02-15 15:43:33 – Userid: 662
You have 0 indexed posts from your site(s)
Links to your blog(s)
0 total backlinks.
Individual backlinks can be seen here:
More detailed statistics will be available when we’re done developing them
A very requested feature is to DECLINE a link from a url, we are working on getting this implemented as soon as possible.
Plus jgn lupa kasih petunjuk… buat sesama Abers neeh… hehehe………..
16 Februari, 2009 pada 9:51 pm
ini utk Link Building Plugin ?? kog komennya disini 
)
ga papa itu cuma belum ada backlink aja statnya,
tulisan DECLINE itu maksudnya, fitur yg mereka lg usahain adalah supaya bisa rejek/decline backlink yg ga sesuai, tp masih lagi diusahain gitu loh
28 Februari, 2009 pada 10:27 pm
wah…saya kok ga berhasil mbak?
stylesheet itu yang visual ya mbak?
.bgmerahnya dimasukkan setelah klik ikon blokquote?
pusingg.. maklum mbak saya baru coba buat blog
1 Maret, 2009 pada 2:27 am
Terima kasih pencerahannya, tentu akan semakin mempercerah blog quote kami, hingga ga menghitam melulu… Once again, thanks.
3 Maret, 2009 pada 2:29 pm
wah sayang blog gw di wordpress.com blum di upgrade. jd g bisa praktekin deh 
6 April, 2009 pada 9:55 am
ini tergantung theme yang dipakenya apa ya,mbak?
soalnya klo theme saya kayaknya ngga ngaruh klo mo ganti warna.
eh, tapi dicoba dulu kali yaa?
tengkyu ya tutor-nya..
[...] Membuat Blockquote yang berbeda warna [...]
11 Mei, 2009 pada 1:03 pm
materinya simpel bos tapi banyak yang nyari tuh hihihihihi
[...] Membuat Blockquote yang berbeda warna [...]
1 September, 2009 pada 11:18 pm
maturnuwun..
saya koleksi dulu sebagai referensi..
masih belajar..
3 Oktober, 2009 pada 11:21 am
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
56 | Link Tutorial Blog Lengkap (Wordpress, Blogger/ Blogspot) « .mifka weblog.
9 Oktober, 2009 pada 4:09 pm
[...] Membuat Blockquote yang berbeda warna [wordpress'] [...]
16 Oktober, 2009 pada 3:48 pm
wah ganti theme nih mbak maya … yang penting yg dulu2 jangan dihilangin mbak
3 November, 2009 pada 4:36 am
Terima kasih mbak maya atas informasinya semoga bermanfaat bagi semua blogger Indonesia.
5 November, 2009 pada 11:16 pm
wah, sepertinya menarik, patut dicoba… sayangnya saya kurang mengerti akan CSS, tapi untuk belajar, bagus lah…
BED-BOY
16 November, 2009 pada 9:43 am
owww begitu toh caranya,,mantab nii informasinya,,makaci yaa,,,
wahhh cari2 lagi ah tips di blog ini,,,,
Tinggalkan Balasan
Perlu Belajar Ini Nih !
Komentar Baru
 | aamahmad di Menyembunyikan Kategori T… |
 | Yugi Mustofa di WordPress RSS Widgets Open in … |
 | Teguh Iman Prasetya di Membuat Teks Marquee di S… |
 | farhanies di Forum Belajar WordPress |
| farhanies di Forum Belajar WordPress |
 | triirawan di Kode-kode HTML |
 | ncca19 di Adsense di WordPress.com … |
 | grandchief di Menghilangkan Nofollow di Kome… |
| Cristopher di Mengatur Gambar di Postin… |
| Cristopher di Link Building Plugin |
 | azzaam di GuestBook |
| azzaam di Tentang Aku |
 | taiguraentisaa di GuestBook |
 | cah pare di WordPress RSS Widgets Open in … |
 | ir di Cara Install Plugins |
Forum Belajar WordPress
- nengdecib on "Blog jadi Blank"
- nootoorie on "Nanya mbak (salam kenal dulu)"
- easymakesmoney on "WP V 2.8 menu add post kok hilang please help me"
- wharzutility on "Mohon dukungan"
- wharzutility on "salam kenall, tolong bantuannya yaa"
- nadya on "salam kenall, tolong bantuannya yaa"
- nadya on "salam kenall, tolong bantuannya yaa"
- zaiful79 on "Salam kenal baru daftar nih"
- wharzutility on "(Ask)Bisa gak di wordpress posting di subdomain"
- wharzutility on "Salam kenal baru daftar nih"
10 Desember, 2008 pada 12:08 am
Info yang bagus, tp ada info dari WordPress 2.7 terbaru lho mbak? Kita bisa mengaktifkan efek hujan salju di blog kita, seperti di halaman muka WordPress.com. Lihat cara aktifkannya di http//bootingskoblog.wordpress.com
Sapa tau mbak mo buat postingannya.
11 Desember, 2008 pada 10:39 am
thanks infonya