Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Postagens Tutoriais Blogger Vanessa S.

Caixa de códigos personalizada com imagem no topo

No outro artigo você viu como Criar uma caixa simples para exibir códigos no Blogger.

Eu havia prometido disponibilizar 2 modelos de caixas,portanto, neste tutorial veremos um outro modelo de caixa mais personalizada. Assim é só você escolher qual prefere usar no seu blog e aplicar os estilos de acordo com o seu gosto.

2. Criar 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;

DICA:
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>

Bom, é isso ai!
Boa blogagem 😉

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

12 Comentários

  1. Charles disse:

    Obrigado.

  2. Carlos Gomes disse:

    Olá, primeiramente parabéns pelo excelente trabalho,

    gostaria de saber se já aconteceu como o meu caso, de a imagem ficar por baixo da caixa de texto em cores…

    gostaria de saber se há algo que precisa ser feito.
    Obrigado.

    • Vanessa disse:

      Alguns recursos podem variar de template para template. Pode ser algo relacionado ao seu, ou algo que vc tenha feito errado. Lamento,mas não tenho como saber.

  3. Lucas disse:

    Como eu coloco uma caixa de comentarios no meu blog, tipo essa sua???

  4. Æ »ich: GO« disse:

    Como eu defino a largura?

  5. .:: Clau ::. disse:

    Sayonara,
    João

    Alguns recursos variam de template para template. Sendo assim, não tenho como ajudar.

  6. João Santos disse:

    Olá boa tarde,

    Fiz exatamente como manda o seu tutorial e aconteceu que, ficaram aparecendo 2 imagens e sempre com uma fraze "seu banner aqui" Talvez se você expecificasse mais o tamanho da imagem debaixo. Fiquei meio perdido.

  7. Sayonara disse:

    Oi Clau!!
    Td bem! Tentei colocar esta caixa no meu blog , fiz tudo direitinho como tutorial. Mas qdo coloco o Código
    no editor da postagem. A caixa não aparece fica tudo branco só aparece a palavra insira seus códigos aqui. Talvez meu templante não aceita. Mas se vc souber uma outra forma ficarei grata.
    Obgda

  8. avanteweb disse:

    Muito boa essa dica, no meu blog funcionou perfeitamente.

  9. comandoblogger disse:

    Mais uma boa dica! Parabéns Clau!

    Att.
    @JamisHenri

  10. Max Martins disse:

    Oi, Clau

    Assim fica fácil demais! =)
    Obrigado.

    Abraços

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.