Criando seu próprio Blockquote

Hey, angels :) What's up?

ATUALIZAÇÃO: caso alguém não saiba, o código de blockquote deve ser adicionado antes da tag 

 ]]></b:skin>.

O tutorial de hoje é bem interessante e útil. Vou ensinar como criar um blockquote Não foi dessa forma que fiz o daqui, mas faço exatamente assim no Mrs. Nightshade. Vamos ao tutorial?

O código base, por onde todos devem começar, é esse aqui:

blockquote {

}

Os demais serão adicionados entre as chaves.

Existem coisas que não podem faltar, como por exemplo:

padding: 6px;

margin:10px;

Color: #333;

Background: #FFF;

Agora, basta personalizar. Como? Aqui vão alguns códigos que vocês podem usar:

PARA COLOCAR BORDAS

border: borda em todos os lados. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 

border-bottom: borda em baixo. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 

border-top: Borda em cima. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 

border-left: Borda na esquerda. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 

border-right: Borda na direita.Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;

PARA ARREDONDAR BORDAS

-webkit-border-radius: 10px; - Altere o número como desejar.

-moz-border-radius: 10px; - Altere o número como desejar.

border-radius: 10px;  - Altere o número como desejar.

Coloquem os três códigos acima para dar certo, tudo bem?

Lembrete importante: todos os códigos devem ser adicionados entre as chaves, como o dito antes.

EXEMPLO DE RESULTADO

blockquote {

padding: 6px;

margin:10px;

color: #333;

background: #FFF;

border-right: 2px solid #FF69B4;

border-left: 2px solid #FF69B4;

}

 Viram como é simples?

Aprendi com ajuda do We Heart HTML, mas hoje em dia faço sozinha.

Qualquer dúvida é só comentar ou mandar uma pergunta aqui.

Espero que tenham gostado.

Beijos,

Mrs. Nightshade.

Hey, angels :) What's up?

Estou muito feliz com meu resultado no Concurso de Redação TV Tem, caso queiram saber mais podem ler no início do post de hoje (no Mrs. Nightshade) e em outro post que pretendo fazer ainda hoje apenas com fotos (também no Mrs. Nightshade).

Enfim, hoje eu gostaria de ensinar vocês como personalizar o blockquote do blog. Para quem não sabe...

Isso é blockquote.

Aprendi no Extras Place Fame. Agora que os créditos foram dados, vamos aprender?

Vá em Design > Editar HTML. Aperte Ctrl+F e procure por:

]]></b:skin>

Logo acima dessa tag cole os códigos para blockquote que você pode encontrar em vários blogs. Você também pode escolher um desses dois:

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

}

Muito simples, não é?

Espero que tenha sido útil e que tenham entendido!

Beijos,

Mrs. Nightshade.