10 maio 2012

Tutorial: 10 estilos de blockquote!

Tumblr_lcyycf4xym1qdkkrho1_500_large

Hooy! Meninas, eu já tinha ensinado antes como personalizar sua blockquote. Mas hoje... trago 10 estilos diferentes!
AS MINA PIRA :D
Créditos ao blog lindão Just Debee! ♥

Para Fazer
"Primeiro, vá até Design > Editar HTML;
Depois aperte Ctrl + F ou F3 e procure pela tag ]]></b:skin>"
Agora, quando você escolher a blockquote que você quiser, é só copiar o código dela e colar ACIMA daquele códigozinho em azul lá em cima!

Os estilos
blockquote { border-left: 8px solid #FA6B8F; background-color: #efefef; padding: 4px; color: #333333; text-align: justify; } 

blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
} 
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
} 
 blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
} 
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
border-radius:10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
} 
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
border-radius:0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
} 
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
-moz-box-shadow:5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #ccc;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4)";filter:progid:DXImageTransform.Microsoft.Shadow(color=#ccc,direction=120,strength=4);
} 
blockquote {
border: 1px solid #c9c9c9; /* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
-khtml-box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
blockquote {
border-bottom: 1px dashed #33CCCC;/* cor da borda */
background-color: #efefef; /* cor de fundo */
padding: 10px;
font-size: 11px; /* tamanho da fonte */
color: #333333; /* cor da fonte */
text-align: justify;
} 

/*---Início do blockquote personalizado pelo Blog das Meninas---*/
blockquote {
border: 1px solid #00BFFF; /* cor da borda */ 
background-color: #F8F8FF; /* cor de fundo */
padding: 10px;
font-size: 12px; /*tamanho da fonte */
color: #696969; /* cor da fonte */
text-align: justify;
-webkit-border-radius: 0px 9px 0px 9px; /*Pontinhas da Borda - não modifique se qusier o formato igual ao blockquote acima */
box-shadow: -2px 4px 15px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-moz-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-webkit-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
-khtml-box-shadow: -2px 2px 5px #ADD8E6; /*Sombra do blockquote/ coloque os quatro igual ou não irá conseguir fazer o efeito*/
}
/*---Fim do blockquote personalizado pelo Blog das Meninas---*/
Para personalizar
Os códigos são auto-explicativos. Se você quiser trocar as cores, etc, fique a vontade e use essa tabela.
Lembre-se de que os códigos vão pra esse lindinho aqui embaixo:
Brigada flor! :D

Espero que tenham gostado! Qualquer dúvida, só comentar!
Beijão, Vickie ;)




Um comentário:

  1. Gostei desses estilos. Estou procurando alguns pro layout que estou fazendo XD
    Obrigada pelo tuto ^^

    http://lerimaginarcriar.blogspot.com.br/

    ResponderExcluir