Blockquote personalizado com imagem

Ensinei a personalizar o blockquote e agora vou ensinar de novo, só de de uma maneira diferente. Esse blockquote tem uma imagem de uma "aspas" que fica muito legal e diferente, ótimo para usar em blogs com citações de livros. Pessoalmente é uma das minhas personalizações preferidas de blockquote. Veja um preview aqui.

1- Vá em Design > Editar HTML

2-Aperte CTRL+F e procure por ]]></b:skin>, ACIMA disso, cole:

.post blockquote {

  -moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  border-radius: 10px;

  -khtml-border-radius: 10px;

  margin:5px 0px 15px 0px;

  padding:20px 20px 20px 60px;

  background-color:#e2e5ee;

  background-image:url(http://img546.imageshack.us/img546/6404/blockquotee.png);

  background-repeat:no-repeat;

  background-position:5px 20px;

  border-top: 1px solid #d5dbe2;

  border-left: 1px solid #d5dbe2;

  border-right: 1px solid #d5dbe2;

  border-bottom: 1px solid #fff;

  font-style:italic;

  color:#4d83c2;

  }

.post blockquote p {

  margin:.25em 0;

Entendendo o código:

-moz-border-radius: 10px;

  -webkit-border-radius: 10px;

  border-radius: 10px; 

Essa é a borda arredondada, apague se quiser deixar quadrada ou amente o número para arredondar mais.

margin:5px 0px 15px 0px;

 Espaço do blockquote e da margem do post.

padding:20px 20px 20px 60px;

Espaçamento da borda e o texto do blockquote.

background-color:#e2e5ee;

Cor do background (fundo). Escolha uma cor clara.

image:url(http://img546.imageshack.us/img546/6404/blockquotee.png);

Imagem do blockquote. Troque se quiser uma imagem sua. 

 background-repeat:no-repeat;

  background-position:5px 20px;

Posição da imagem e repetição. Posição: 5 é distancia (largura) da imagem e o texto. 20 é a distancia (altura) da imagem e o fim do blockquote.

 border-top: 1px solid #d5dbe2;  border-left: 1px solid #d5dbe2;  border-right: 1px solid #d5dbe2;  border-bottom: 1px solid #fff; 

Bordas. Top (topo); Left (esquerda); Right (direita); Bottom (abaixo); #d5dbe2 é a cor. Mude conforme sua preferencia. *Repare que a borda debaixo está com cor diferente, é por causa de um "gradiente" próprio do blockquote. Mude se quiser.

font-style:italic;  color:#4d83c2;

Font-Style: estilo da fonte. Mude como quiser. Color: cor.

.post blockquote p {

  margin:.25em 0;

Margem do blockquote para o resto da postagem.

Seu blockquote vai ficar assim:

Clique para ver maior.

Se quiser você pode salvar essa aspas e mudar as cores conforme o tema do seu blog.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar