Css Tutoriais

Blockquote Personalizado

15 de April de 2006

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>

heart


Leia Também

Deixe seu comentário

Anderson
29/04/2010 ・ 17:07

Veja só heim, post de 4 anos e hoje me ajudou hehe. Obrigado!

30/06/2011 ・ 19:27

Adorei! Funcionou direitinho no Blogger. Só em vez de colar acima de ]]
Beijos lindinha! :8:

07/08/2011 ・ 10:16

Adorei, usei ele em meu blog mas agora eu coloquei outro, assim que puder eu trooco *-*
bjs e amo seus tutos ♥ :34:

28/12/2011 ・ 03:07

Gostei muito daqui!
Tudo muito lindo.
Feliz ano novo!

Fernanda
01/02/2012 ・ 21:35

Aaaaaaai, valeu Tamara! Eu tava com uma pequena dúvida em relação às aspas e seu tutorial me ajudou! 😀