Caixa de códigos personalizada com imagem no topo

O procedimento de instalação e utilização desta caixa é o mesmo do outro modelo publicado no artigo anterior. A única diferença, é que para esta vamos acrescentar mais um trecho de código CSS, que será o local onde devemos incluir uma imagem para que ela apareça no topo da caixinha.

Veja o modelo:

No menu “modelo”, clique em “editar html“, não precisa clicar em “expandir modelos de widgets” e procure por: ]]></b:skin>

E cole logo ACIMA dela:

/*topo da caixa*/
pre{
background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) 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 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;
}

Salve as modificações.Para incluir uma imagem para que ela apareça no topo da caixa, conforme está na imagem de exemplo, coloque a url da sua imagem onde está escrito: “ENDEREÇO-DA IMAGEM”, no trecho:background:#XXXXXX url(ENDEREÇO-DA-IMAGEM) no-repeat scroll left top;
Use a imaginação, crie uma imagem que combine com as cores do seu template.

Se for utilizar uma imagem para que ela ocupe todo o topo acima da caixa de código, conforme está no meu exemplo, crie uma imagem no tamanho mínimo de 600×26.

Só para você entender um pouco mais:
No código, o trecho destacado em verde -> pre code 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“.

Da mesma forma que a outra caixa simples, sempre que for utilizar a caixa para publicar códigos nos posts, você deverá incluir a tag para que o blogger reconheça a caixinha.
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>

CRÉDITOS DO ARTIGO:http://www.mundoblogger.com.br/2010/10/caixa-de-codigos-personalizada-com.html