Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1513083632
Vida do cache: 1513126832
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Postagens Tutoriais Blogger

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 😉



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

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.

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

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

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