Como Personalizar o Blockquote do blog - Modelo 1 | Quero Dicas


Como Personalizar o Blockquote do blog - Modelo 1


No começo da semana eu falei sobre o que é  Blockquote. Veja esta postagem e entenda melhor: O que é Blockquote (Citação) do blog e porque usá-la? e como prometido, estarei postando algumas personalizações de Blockquote para seu blog. 

Não vou alongar e darei logo o resultado.
Esta customização, você poderá alterar a imagem se desejar, a fonte, cor, a borda etc. Deixei tudo explicadinho ao lado de cada código, espero que gostem!

Veja a imagem, como ele está:

Eu achei uma gracinha com este fundo, mas  já informei, você poderá alterá-lo se quiser e desejar

Nota: Infelizmente, não sei o motivo, o modelo Travel não aceita o código.

Não gostou desse modelo? Então veja esses outros:
► Personalizando o Blockquote do blog - Modelo 2
► Blockquote para blog - Modelo 3

  Tutorial

Eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a blogs de teste! Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
1 - Acesse o painel do seu blog.

2 - Vá em Modelo e Editar HTML

3 - Tecle Ctrl + F e procure por:

 ]]></b:skin>
 

Dica: Para ser mais rápido a procura, 1º clique dentro do HTML depois use CTRL + F e na caixa de pesquisa cole o código.

4 - Acima dele cole o código a seguir:

.post blockquote {
border: 2px double #FFB6C1; /* cor e tamanho da borda */
background-image:url(http://2.bp.blogspot.com/-f-jHTadY2hA/VO4Ux9Vr23I/AAAAAAAAJmY/_qeFB_1Nlvo/s1600/blockquote%2B2.jpg);
background-repeat:repeat;
padding: 10px; /* espaçamento do texto */
font-size: 14px; /* tamanho da fonte */
font-family: arial; /* fonte */
font-weight: none; /* se quiser bold é só trocar */
color: #000;  /* cor da fonte */
text-align: justify; /* alinhamento do texto - center, right, left*/
-webkit-border-radius: 2px; /* bordas arredondadas */
-moz-border-radius: 2px; /* bordas arredondadas */
border-radius: 2px; /* bordas arredondadas */
}
   
5 - Salve e prontinho! Seu Blockquote do blog está personalizado.

 Personalizando


• Como já devem ter visto, eu coloquei descriminando o que você deve alterar.
• Onde está:

http://2.bp.blogspot.com/-f-jHTadY2hA/VO4Ux9Vr23I/AAAAAAAAJmY/_qeFB_1Nlvo/s1600/blockquote%2B2.jpg

Será onde você poderá trocar a imagem, pela sua.

• Caso não saiba hospedar suas imagens, veja um dos tutoriais abaixo:
Como hospedar uma imagem gratuitamente na Web para seu blog

• Tabela de cores - AQUI

Beijinhos

COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.