08/02/2013

Blockquote/ O que é?/ Como usar

Blockquote? O que é? Como usar? 
Hoje vou disponibilizar alguns estilos de blockquote e explicar como se usa. 
Clica ai em Leia mais e aprenda.


Blockquote é essa caixinha aqui: 

Isso é o blockquote! 

Bom antes de você saber como faz é melhor você personalizar seu blockquote porque o do blog não aparece, é simples sem cor sem estilo, muito bleh! 
Para colocar esse blockquote clique em MODELO >> EDITAR HTML >> Ctrl +ff 
E procura por  ]]></b:skin> e cole acima de  ]]></b:skin>
O código do blockquote que você vai escolher ai embaixo. 

Os blockquotes são esses: 

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;
} 


Para mudar as cores do Blockquote é só trocar o que está grifado em vermelho, use essa tabela (www)

Como colocar esses Bloquotes na página, lembrando que você só pode escolher UM desses códigos acima! 
Para usar o blockquote é simples. 
Basta abrir a página de postagem e clicar nesse botão com aspas. image
E escrever o que quiser! 

Eu espero te ajudado a todos vocês! Caso não tenha entendido pergunte aqui (www)

Blockquotes retirado do Just debee (www)

6 comentários: