20 de jul. de 2012

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

3 comentários:

  1. Gostei e usei! Olha meu blog é novo vc segue eu to seguindo o seu :3
    bldechiclete.blogspot.com

    ResponderExcluir
  2. Olá.. gostaria de saber, se você tem algum tutorial de como fazer o blog todo uma galeria, tipo cheio de imagens.. só no blog todo.. sem menu sem nada.. só as imagens :) me ajudaria muito.. obrigada ;)

    ResponderExcluir
  3. Não funcionou :( Mas obrigado! xD

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!