Style a Blockquote

Apa kah blockquote itu?
Blockquote biasanya berisi kata kata kutipan dari sebuah sumber / yang lain lainnya, bahkan karena keunikan blockquotenya, ada yang menaruh code css,/ html atau code code lainnya pada blockquote.


Sebenarnya, untuk code ada lagi code cssnya, tapi kali ini, kita akan lebih fokus pada code css blockquote.

apa kalian pernah melihat, blockquote yang jika arahkan mouse ke blockquote tersebut lalu berubah warna / bahkan ada yang bisa membesar, itu semua berasal dari code CSS, jika kita paham akan code CSS tentu itu akan mudah, tapi kali ini, kita akan menggunkan code standarnya saja.

Mulia ciiin...

Efek warna dan Border

CSSnya :

blockquote{
margin: 1em 3em;
color: #999;
border-left: 2px solid #999;
padding-left: 1em; }

Contohnya :

puluthriau, the best pokoke
Be Smart with puluth
free tutorial
Come to my blog evry day yo

Efek Warna Background

CSSnya :

blockquote {
margin: 1em 3em;padding:2px;
background-color: #FFF; }
blockquote p{
margin: 0;
color:#000; }

Contohnya :

puluthriau, the best pokoke
Be Smart with puluth
free tutorial
Come to my blog evry day yo

Efek Warna Background dan Borders

CSSnya :

blockquote{
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px dotted #FFF;
background-color: #F00; }
blockquote p {
margin: 0;color:#000; }

Contohnya :

puluthriau, the best pokoke
Be Smart with puluth
free tutorial
Come to my blog evry day yo

Efek Gambar Background

CSSnya :

blockquote {
margin: 1em 20px;
padding-left: 50px;
background: transparent url(quote.gif) no-repeat; }

Contohnya :

puluthriau, the best pokoke
Be Smart with puluth
free tutorial
Come to my blog evry day yo

Sepertinya, cukup sekian Terima Kasih

Tutorial lebih lanjut akan hadir dilain waktu.

Selamat Mencoba