Blockquote com Efeito Hover

Oi de novo!

Bem, será que não tem nada para postar além de tutoriais? Agora vou ensinar a colocar

aquela paradinha que nunca vou conseguir escrever o nome sem copiar e colar um blockquote

com efeito hover, que você pode personalizar facilmente, e também é muito fácil de colocar.

Preview dele aqui, mas se colocarem no blog e personalizarem, 

garanto que não vão se arrepender! Não lembro onde eu vi esse tutorial. Se for do 

seu blog, comente! Então, chega de papo e vamos ao tutorial!

1 - Procure por:

]]></b:skin>

2 -  Em cima desse código cole o código abaixo:

blockquote {
 border-right: 10px solid #A020F0;
border-left: 10px solid #A020F0;
background-color: #f5f2f3;
padding: 10px; font-size: 12px;
color: #000;
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;
}
blockquote:hover {
 border-right: 30px solid #00BFFF;
border-left: 30px solid #00BFFF;
color: #000;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
} 

Vamos entender o código para se você quiser fazer mudanças:

Código da borda á direita:

border-right: 10px solid #A020F0; 

 Código da borda á esquerda:

border-left: 10px solid #A020F0;  

Código do fundo:

background-color: #f5f2f3; 

Código da fonte:

color: #000; 

Código da cor da fonte e da borda quando passa o mouse:

box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3; 

Espero que tenham gostado de mais esse tutorial!