Personalizando o Blockquote do blog - Modelo 2 | Quero Dicas | Tutoriais para seu blogs


Personalizando o Blockquote do blog - Modelo 2


Mais um modelo para o Blockquote (citação) para vocês, como havia prometido. Como para mim, promessa é divida, já estou cumprindo =D

Esta personalização para o Blockquote do seu blog, ficará igual ao meu. Podendo é claro, trocar suas cores, fonte e tamanho. Se você ainda não viu o daqui do Quero Dicas ou passou despercebido, veja na imagem abaixo:


E ai, gostou? Então vamos ao tutorial.
Lembrando: Assim como no primeiro modelo: Blockquote para blog - Modelo 1 / Fundo com imagem e o Blockquote - Modelo 3. Este também não é aceitável no modelo de template Travel. :(

   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>

4 - Acima dela, cole o código a seguir:

.post blockquote {
border-left: 5px solid #DDD;/* cor e tamanho da borda lateral */
border-bottom: 1px solid #e5e5e5;/* cor da borda */
border-right:  1px solid #e5e5e5;/* cor da borda */
border-top:  1px solid #e5e5e5;/* cor da borda */
background-color: #f5f5f5;/* cor do fundo */
padding: 10px; /* espaçamento do texto */
font-size: 18px; /* tamanho da fonte */
font-family: georgia; /* fonte */
font-style: italic; /* se quiser normal é só trocar por none */
color: #000; /* cor da fonte */
text-align: left;/* 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 pronto! O seu Blockquote do blog está personalizado =D

   Personalizando

Eu já deixei, ao lado de cada código suas funções e como você pode alterar, se quiser.
É muito fácil e simples, não há mistérios.
Abaixo a tabela de cores, para colori-lo.
• Tabela de cores: Flextool

Caso tenha gostado, deixe seus comentários. Beijinhos
Me Contrate!

5 comentários

Clique e deixe seu comentários
sábado, 17 outubro, 2015 ×

Olá, adorei a super dica! estava exatamente procurando por isso e já faz um bom tempo! muito obrigada, hoje mesmo eu vou adicionar no meu blog, beijocas

Resposta
avatar
admin
domingo, 18 outubro, 2015 ×

Poxa achei tão lindo, mas no meu não está funcionando, ele nem é esse travel :( que pena
mas gosto muito das suas dicas, viu!

Resposta
avatar
admin
domingo, 18 outubro, 2015 ×

Obrigada Bia (se assim posso chamá-la :/ ) por gostar das minhas dicas. Precisando é só pedir.
Em relação ao sua tentativa, qual é o modelo que usa?

Resposta
avatar
admin
quarta-feira, 21 outubro, 2015 ×

Olá, pode chamar de Bia sim, claro, mas hoje eu consegui =D obaaaaaaa

Resposta
avatar
admin
sexta-feira, 23 outubro, 2015 ×

eeeeeeeeeeeeeeeeeeeeee que bom que conseguiu =D

Resposta
avatar
admin


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.