Caixa de códigos personalizada

Oi oi gente! Hoje vim ensinar vocês a fazerem um "blockquote extra" só que especialmente para os códigos. É muito útil caso você poste bastante tutoriais e mais útil ainda se esses tutos tiverem códigos longos, uma vez que há barra de rolagem (que dá pra retirar se quiser) Quero também creditar o Mundo Blogger pelo tutorial. Vejam do que estou falando:

Vá até "design" >>"editar html", (não clique em "expandir modelos de widgets") e procure por ]]></b:skin> 
Logo acima cole:

/*topo da caixa*/
pre{
background:#XXXXXX url(ENDEREÇO-DO-TOPO) no-repeat scroll left top;
padding-top:25px;
}

/*caixa dos códigos*/
code{
overflow:auto;  /* barra de rolagem*/
background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) ;  /* edite cor ou imagem de fundo*/
border:1px solid #XXXXXX;  /* edite cor e tipo de borda */
color:#XXXXXX;  /* cor da fonte*/
font-size:80%;  /* tamanho da fonte */
height:100px; /* edite a altura máxima da caixa*/
display:block;
white-space:pre;
text-align:left;
word-wrap:break-word;
padding:0 10px 5px 20px;
}

Visualize  e se estiver tudo certo salve as modificações.

- Para por uma imagem no topo da caixa (como na minha) coloque a url da sua imagem onde está escrito: "ENDEREÇO-DO-TOPO".

 - Se for utilizar uma imagem para que ela ocupe todo o topo acima da caixa de código, conforme está no meu exemplo, você vai precisar saber a largura da sua caixa, pra isso, coloque uma cor qualquer na caixa, e depois veja esse mini tutorial aqui pra descobrir a largura.

- Onde tiver #XXXXXX coloque o código da cor de sua preferência. Se for usar uma imagem no lugar da cor não precisa alterar esse código.

- No código, o trecho destacado em roxo "pre{" é o local onde você deve configurar a imagem do topo. E o trecho destacado em rosa "code{" é onde você vai personalizar o estilo da caixa, onde ficarão os códigos. 

- Notem que em "code" eu determinei que a caixa tenha uma barra de rolagem, que aparecerá automaticamente, apenas se altura da caixa ultrapassar os 100px. Se você quiser, edite a altura máxima da caixa. Se você não quiser barra de rolagem, simplesmente apague este trecho do código.

- Se quiser acrescentar uma imagem ao plano de fundo da caixa, coloque a url da sua imagem onde está "ENDEREÇO-DA-IMAGEM", no trecho "code".


Agora, sempre que for usar a caixa, você deverá incluir a seguinte tag para ligar o código da caixa ao post. Para isso, no modo "Editar HTML" da postagem, você deve inserir os trechos com os códigos que irá exibir na sua postagem , entre as tags, desta forma: 

<pre><code>

insira seus códigos aqui

</pre></code>

E então? Curtiram o tutorial de hoje? Beijos,  fiquem com Deus :*