Tutoriais  15/04/2006 

Blockquote Personalizado

Modelo 1

01. Coloque depois no seu arquivo style.css

blockquote {
border: 1px solid #FFD0DF;
background-color: #FFF1F5;
padding: 10px;
font-size: 11px;
color: #808080;
text-align: justify;
}

02. E no lugar em que você quer que apareça o blockquote coloque:

<blockquote>Seu texto aqui</blockquote>

Modelo 2

01. Coloque no seu arquivo style.css

blockquote {
border: 1px solid #FFD0DF;
background: #FFF1F5 url(http://www.endereço/edit.gif) no-repeat top left;
padding: 10px;
font-size: 11px;
color: #808080;
text-align: justify;
padding: 10px 10px 10px 35px;
font-size: 11px;
text-align: justify;
}

02. Faça uma imagem com as aspas mais ou menos assim:

03. Substitua no código "http://www.imagem.com.br/edit.gif" pelo endereço da sua imagem.

04. E no lugar em que você quer que apareça o blockquote coloque:

<blockquote>Seu texto aqui</blockquote>

05. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc.

Se você não tem um arquivo style.css, troque a linha:

blockquote {

por

.blockquote {

E para usar o Blockquote:

<div class="blockquote">Seu texto aqui</div>


Diego
10/10/2008 ・ 18:06

ALELUIA ACHEI ONDE ENSINA A FAZER BLOCKQUOTE :1:
Brigado msm hein ;D

09/12/2008 ・ 16:48

BOOOM! MUUIITO BOOOOM :9:

14/12/2008 ・ 23:42

:9: Amei o codigo e me ajudou muito no meu flogvip
beijuu

08/02/2009 ・ 17:34

Ain brigada pelo tuto!eu tava msm precisando…bju pra vc!

Gabi
18/03/2009 ・ 14:39

:11: eba!! isso q eu tava procurando *_* obrigada

04/05/2009 ・ 14:54

Muito bonito.

03/06/2009 ・ 12:31

Oii /
amei ak muito suseeso msm
beijão 🙂

:28:

23/02/2010 ・ 12:13

Parabéns pelo artigo!
Já o coloquei em prática!

True-Luv | Indicando blogs
http://dsxbrasil.com.br/blog/internet/true-luv-indicando-blogs

Ana Carolina
21/03/2010 ・ 15:08

Oii Tamara, muito lindo o blgo, parabéns!
Então, se eu quiser ter dois tipos de blockquote no blog, tem como?
por exemplo, um com um imagem para usar normalmente e outro sem para usar como div?

21/03/2010 ・ 19:22

Tem sim, só criar uma div com os mesmos atributos 😉