Caixa de Código Personalizada - I

Olá amores, tudo bem? Hoje eu trago algo que é meio que uma novidade aqui no blog, pela primeira vez, trago um código de uma caixa de código (lol). Ok, não é algo tão útil, mas mesmo assim, dá aquele toque a mais em algum template.

Antes de ver o código, precisamos saber o que é uma caixa de códigos. A caixa de código é somente uma caixa onde você coloca os códigos na sua postagem, como por exemplo: Fiz um post sobre título das postagens, eu vou colocar o código do título, você usa a caixa de códigos para isso. Para usar a caixa de código, você vai em HTML (em sua postagem, quando estiver fazendo a postagem) e coloca <code> mais o código e quando terminar de pôr o código coloca </code>. Bom, agora que já sabe o que é como usar, continue lendo para pegar o código desta caixa de código.

Você já viu a caixa (onde está lá no começo da postagem [começo não, parágrafo anterior], onde tem "o código DESTA [...]"), agora o código dela é o seguinte (aplique ele antes de ]]></b:skin):

/*------ Caixa de Código (Etc For Me) ------*/ code { background: #eedddb; border: 1px solid #e9d4d2; font: normal normal 12px 'Trebuchet MS', Trebuchet, sans-serif; color: #fff; text-align: justify; text-shadow: 1px 1px 5px #cfb8b8; padding: 7px; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } code:hover { background: #bd9590; border: 1px dashed #c79e9a; font: normal normal 12px 'Trebuchet MS', Trebuchet, sans-serif; color: #fff; text-align: justify; text-shadow: 1px 1px 5px #cfb8b8; padding: 7px; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } /*------ Caixa de Código (Etc For Me) ------*/
Troque as partes em roxo pela cor que você quer.

 Esse foi o código pessoal, desculpem o atraso, eu tava um pouco ocupada! Se pegaram o código comentem e deem créditos (PS: Também funciona como blockquote, só que para blockquote você troca os "code {" e "code:hover {" por "blockquote {" e "blockquote:hover {")