Jennyfer Aguillar | Criando caixinha de banner

07:00

Olá galerinha,esse é meu primeiro post como colaboradora por um dia e espero que gostem. Já reparou quantas vezes entrou em um blog e eles tinham uma caixinha como essa abaixo?

E você ficou doido de vontade de ter uma e não sabia nem por onde começar,então,eu vou mostrar um jeito super fácil e prático de fazer sua própria caixinha de banner com imagem personalizada e tudo :)Vem conferir :D


Primeiro de tudo,você precisa ter a imagem do seu banner,para fazê-la você pode usar o Photoshop,Photoscape...Mas eu prefiro usar um editor online,e creio que também vai ser mais fácil para vocês,vá em www.pixlr.com/editor e coloque em Create a New Image

Não existe um padrão definido de tamanho a ser usado,isso depende do tamanho da sua sidebar(que fica na lateral do blog,com as descrições de autor,as categorias do blog...) mas eu recomendo fazer igual eu deixei na imagem abaixo,a parte Transparent eu recomendo deixar porque aí sua imagem ficará boa em qualquer fundo.



Agora,basta você escolher uma imagem de enfeite,escrever o nome do seu blog e está pronto. Depois de salvar,precisamos hospedar a imagem,porque ela vai ganhar um link que será usado no banner,eu recomendo usar o www.imgur.com/ é só colocar em Upload Images e selecionar a imagem que deseja.

Agora,vamos ao código :)
Vá em Layout>Adicionar Gadget>HTML/Java Script< Cole o código abaixo:



<div align="center">
    <img alt="NOME DE SEU BLOG" title="NOME DE SEU BLOG" src="ENDEREÇO DE SUA IMAGEM" border="0" width="LARGURA DE SUA IMAGEM" height="ALTURA DE SUA IMAGEM"/><textarea rows="3" cols="17" onfocus="this.select()" onmouseover="this.focus()" name="textarea">&lt;center&gt;&lt;a href=&quot;ENDEREÇO DE SEU BLOG&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;NOME DE SEU BLOG&quot; title=&quot;NOME DE SEU BLOG&quot; src=&quot;ENDEREÇO DE SUA IMAGEM&quot; border=&quot;0&quot; width=&quot;LARGURA DE SUA IMAGEM&quot; height=&quot;ALTURA DE SUA IMAGEM&quot;/&gt;&lt;/a&gt;&lt;/center&gt;
</textarea></div>

Substitua todas as partes coloridas adequadamente e salve o gadget posicionando-o onde achar melhor. No meu exemplo,vai ficar assim :)
<div align="center">
    <img alt="Blogs Up" title="Blogs Up" src="http://i.imgur.com/xflj3Wa.png" border="0" width="250" height="250"/>
    <textarea rows="3" cols="17" onfocus="this.select()" onmouseover="this.focus()" name="textarea">
    &lt;center&gt;&lt;a href=&quot;http://www.blogsup.com.br/&quot; target=&quot;_blank&quot;&gt;&lt;img alt=&quot;Blogs Up&quot; title=&quot;Blogs Up&quot; src=&quot;http://i.imgur.com/xflj3Wa.png&quot; border=&quot;0&quot; width=&quot;250&quot; height=&quot;250&quot;/&gt;&lt;/a&gt;&lt;/center&gt;
    </textarea></div>


Prontinho,viram como é fácil?Agora não tem desculpa para não fazer o seu :) Qualquer dúvida é só me procurar viu :)
Beijos ^.^
Image Map

Compartilhe

Tags: , , ,

Autora e administradora do grupo/blog Blogs Up

You Might Also Like

2 comentários

  1. Jennyfer Aguillar6 de fevereiro de 2016 às 08:01

    Adorei participar :) em breve faço outro post!
    Qualquer dúvida me procurem,por favor,pelo facebook ou pelo blog,porque no insta e twitter fico menos online.
    Obrigada por postar Lihz <3
    Beijos ^.^

    ResponderExcluir
  2. Unknown7 de fevereiro de 2016 às 15:27

    Nossa, muito obrigada, extremamente útil!

    ResponderExcluir