Como Personalizar o Blockquote do blog - Modelo 1 | Quero Dicas | Tutoriais para seu blogs


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 a conversa 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 ela está:

Eu achei uma gracinha com este fundo, mais como já informei, você poderá alterá-lo se quiser
SAIBA: 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 - Flextool

Gostou? Então deixe seus comentários. Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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