Blockquote personalizado e com efeito hover

O primeiro tutorial do blog *-*

Blockquote, para quem não sabe, é uma caixinha como a do exemplo abaixo. Ela é muito usada em blogs para dar alguma informação extra para o post, ou fazer um comentário sobre alguma coisa não relacionada a postagem. Também é bastante usada em tutoriais, para colocar códigos. Efeito hover, é quando passamos o mouse por cima de alguma coisa, e essa coisa muda.

Viiu ? Esse é um exemplo de bloquote. Passe o mouse aqui em cima e veja um exemplo de efeito hover. É isso que vamos aprender a fazer hoje.

Entenderam ? Ótimo, agora vamos ao tutorial:

Primeiro, vamos até o seu HTML (Painel > Design > Editar HTML).

Agora você vai procurar no seu HTML a tag ]]></b:skin>. Para encontrar com mais facilidade, é só dar Ctrl+F e digitar essa tag. Ele aparecerá destacado em laranja (ou outra cor dependendo do seu navegador).

Agora, acima da tag, cole o código abaixo:

 blockquote {
border: 1px solid #FF1493;
background-color: #000000;
padding: 10px;
font-size: 11px;
color: #ffffff;
text-align: justify;
}
 blockquote:hover {
border: 1px solid #00FFFF;
background-color: #000000;
}

As partes coloridas são a que vamos personalizar. Entenda o código:

Rosa: aqui vamos personalizar a borda do blockquote. Para alterar o tamanho, basta substituir "1px" por um número maior. "solid" é o estilo da borda, (clique aqui para ver outros estilos), e #FF1493 é a cor em HTML (clique aqui para ver outras cores em HTML).

Azul claro: É o fundo do blockquote. Para mudar a cor, é só mudar a parte destacada por outra cor (sempre em HTML).

Amarelo: Tamanho do texto dentro do blockquote. Recomendo deixar assim.

Verde claro: Cor do texto dentro do blockquote, se for mudar, sempre em HTML.

Laranja: Borda quando o mouse estiver em cima do blockquote (efeito hover). Funciona do mesmo modo que a primeira.

Vermelho: Cor do fundo com mouse em cima.

Se quiser, pode colocar os cantos arredondados, assim como o meu blockquote. É só adicionar o código abaixo:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Se quiser que fique arredondado sem o mouse está em cima, adicione depois de blockquote { e se quiser que fique arredondado com o mouse em cima, depois de  blockquote:hover {


Espero que tenham gostado e que usem muuito o tutorial ! Podem reblogar, mas creditem hein !
Beijinhos.