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.
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 😉
Obrigado.
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.
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.
Como eu coloco uma caixa de comentarios no meu blog, tipo essa sua???
Essa minha é própria do wordpress.
Como eu defino a largura?
Sayonara,
João
Alguns recursos variam de template para template. Sendo assim, não tenho como ajudar.
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.
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
Muito boa essa dica, no meu blog funcionou perfeitamente.
Mais uma boa dica! Parabéns Clau!
Att.
@JamisHenri
Oi, Clau
Assim fica fácil demais! =)
Obrigado.
Abraços