Personalizando Blockquote

Oooooi Lindas *w*

Hoje eu vou ensinar vocês a personalizar o blockquote de vocês, aquela caixinha que aparece quando você poem uma citação.

Mas antes, eu sei que a Rocky já falou isso, mas:

Dos criadores de Cadê, cadê a Ana sumiu e Cheira para ver se tá com cheiro de pepsi, vem: Gato-Sacola.

É, na aula de artes da escola, eu olhei pra janela e vi um gato branco, e a minha amiga Ana, que já usa óculos coitada, pensou que o gato era uma sacola, mas aí ele se mexeu e agente começou a zuar da cara dela, mas a gente sempre zoa cada uma de nós. Mas emfim, a história do Cheira para ver se tá com cheiro de pepsi, no próximo post eu conto, e depois a da Cadê, cadê a Ana sumiu.

Vamos para o Tutorial!

Modelo 1:

Você pode mudar as cores :3

Bom, se gostou, vá no painel do blogger>Modelo>Editar HTML e dê CTRL+F e pesquise por

]]></b:skin>

Após isso, cole esse código acima

blockquote {
border-right: 10px solid #f99db3;
border-left: 10px solid #f99db3;
background-color: #f5f2f3;
padding: 10px;
font-size: 12px;
color: #e193a6;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
}

No "border-right" é a borda da direita, aí no "10px" você pode mudar, para mais, mais gordinha, e para menos, mais fininha. E também pode trocar a cor, que tem a "#". "Border-left" é a mesma coisa, só que com a borda da esquerda.

No "background-color" é a cor do seu background, a cor do fundo, aí você pode mudar também. "Font-size" é o tamanho da fonte. E a "color" é a cor dela. 

Modelo 2

Se gostou, faça a mesma coisa: HTML: ]]></b:skin> e cole esse código:

blockquote {
border-right: 16px solid #a0def5;
background-color: #e4f2f8;
padding: 10px;
font-size: 11px;
color: #000000;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: inset 0 0 10px #ecebeb, 0 0 3px #84bfd5;
}

Para mudar as cores e tamanhos, faça a mesma coisa que no modelo 1.

Modelo 3

 

Faça a mesma coisa: HTML> ]]></b:skin> e cole esse código:

blockquote {
border: 3px solid #fafcfd;
background-color: #fbf0ff;
padding: 10px;
font-size: 11px;
color: #a48ead;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #d7bce2;
}

Para personalizar, fala a mesma coisa que no Modelo 1. 

Modelo 4

HTML> ]]></b:skin> e cole esse código:

.post blockquote {
background:url(LINK DA IMAGEM DE FUNDO AQUI) ; /*Altere o fundo como preferir*/
border:2px dashed #2b2a59; /*Altere a cor da borda como preferir*/
padding: 5px;
margin:10px 20px 10px 20px;
}

No "Link da imagem de fundo aqui" você cola a URL da imagem que você quer que fique no fundo. Em "border" você altera a largura da borda, e a cor.

Bom gentinha, foi isso. -Bye

Créditos: Cherry Bomb

Caramelos Encantados