Caixa de códigos personalizada com imagem no topo

Sem Outro Artigo Você. Viu Como  CRIAR UMA Caixa Simples parágrafo exibir Códigos Blogger não .

Eu havia prometido disponibilizar dois modelos de Caixas, portanto, Veremos tutorial Neste hum Outro Modelo de Caixa Mais personalizada. ASSIM E até Você. escolher Qual prefere não USAR Seu Blog e aplicar OS Estilos according to o Seu Gosto.  

2. CRIAR Caixa de Códigos personalizada com imagem Sem topo

O Procedimento de Instalação e utilização Desta Caixa e o MESMO Do Outro Modelo publicado há anterior Artigo. A Diferença única, E that parágrafo ESTA Vamos acrescentar Mais um Trecho de Código CSS , Que Sera o devemos Onde locais Incluir UMA Imagem parágrafo Que ELA Apareça nenhum topo da caixinha. 

Veja o Modelo:

No menu "modelo", EM panelinha "editar html ", Nao Precisa Clicar em" Expandir MODELOS de Widgets "e Procure Por: ]]> </ b: skin> 

E cole logotipo Acima dela:

/ * Topo da Caixa * /
pré {
background: # XXXXXX url (ENDEREÇO-DA-IMAGEM) no-repeat scroll left top;
padding-top: 25px;
}
/ * Caixa dos Códigos * /
código {
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 20px 5px;
}

Salve como modificações.

Para Incluir UMA Imagem parágrafo Que ELA Apareça nenhum topo da Caixa, Conforme ESTA NA Imagem de Exemplo, coloque um url da Sua Imagem Onde ESTA Escrito: "ENDEREÇO-DA-IMAGEM", não Trecho:
background: # XXXXXX url (ENDEREÇO-DA-IMAGEM) no-repeat scroll left top; 

DICA:
Use uma Imaginação, CRIE UMA Imagem Opaco combinar com núcleos como fazer template Seu.

Se para utilizar UMA Imagem parágrafo Que ELA ocupe TODO o topo Acima da Caixa de Código, conforme do ESTA não Exemplo Meu, CRIE UMA Imagem sem tamanho Mínimo de 600 × 26.

Só parágrafo Você. trocadilho hum Pouco Mais:
No Código, o Trecho Destacado los verde ->  pré  código  código "eu determinei Opaco uma Caixa tenha UMA barra de rolagem, Opaco aparecerá automáticamente, apenas se Altura da Caixa ultrapassar OS 100px. Se Você. Quiser, Edite uma Altura Máxima da Caixa.
Você. Se Localidade: Não Quiser barra de rolagem, Simplesmente Apague Este Trecho fazer Código.
Se Quiser acrescentar UMA Imagem AO plano de Fundo da Caixa, coloque a url da Sua Imagem Onde ESTA "ENDEREÇO-DA -IMAGEM ", não Trecho" código ".

Da MESMA forma Opaco A Outra Caixa Simples, Semper Opaco para utilizar uma Caixa parágrafos PUBLICAR Códigos nsa mensagens, Você. Devera Incluir uma tag parágrafo Que o blogger reconheça a caixinha.
No Modo 'editar HTML "da postagem, Você. DEVE INSERIR OS Trechos com sistema operacional Códigos Opaco ira exibir na postagem SUA, Entre como tags, desta forma:

<pre> <code>
insira SEUS Códigos Aqui
</ Pre> </ code>

Bom, é Isso ai!
Boa blogagem