Follow Us @soratemplates

quinta-feira, 4 de outubro de 2012

Orelhinhas de Gato na Sidebar

Olá ^^ Hoje vou mostrar para vocês como colocar orelhinhas de gato na sidebar, assim como a que uso aqui no blog.
O tutorial é rápido e fácil; você só vai precisar das orelhas, de um gato :p e do código, que é o mesmo do post de ontem, o das cortininhas, ou se preferir, desse aqui feito pela Giza Veiga, que foi o que testei primeiro. Esses códigos servem para vocês adicionarem várias imagens em lugares diferentes, basta mudar o posicionamento e editar umas coisinhas.
Vamos lá!
1. Escolha uma das imagens abaixo ou crie alguma imagem; ela deve ser da mesma largura (ou um pouco mais larga) do que a definida por você em sua sidebar, e de preferência, ter a mesma cor de fundo que sua sidebar possuir (note que eu deixei o código das cores para combinar).
As imagens abaixo têm tamanho 410 de largura por 144 de altura. Para redimensionar, é só diminuir o número em destaque que aparece na URL:
http://1.bp.blogspot.com/-Q0xIJuc-nCk/UG2yeiADRGI/AAAAAAAAGAw/ShrxIhrX9eU/s1600/catblack.png
Por exemplo, se sua sidebar tiver 200px de largura, troque o 1600 por 200.

Cor: #D6B1D3

Cor: #FAFFD5

Cor: #E9E3FF

Cor: #000000

Cor: #ffffff
Você pode saber a largura da sua sidebar procurando no HTML do seu template por tudo o que se referir a sidebar/sidebar-wrapper, ou, caso tenha feito seu template no Designer do Blogger, indo em Modelo-Personalizar-Ajustar Larguras.
Pode editar a vontade as orelhas, usar como base ou usar essas mesmo ^-^ Quando quiser saber o código da cor use a ferramenta "Seletor de Cores" de seu editor de imagens (recomendo: Photoshop ou Pixlr Online). A ferramenta possui a forma de um conta gotas.
Ferramenta Seletor de Cores no Pixlr Editor Online. O código da cor aparece em forma de números e letras.
Elas combinam com essas patinhas aqui:
2. Cole a URL da imagem nesse código:
<div style='background-image: url(&apos;URL DA IMAGEM&apos;);background-repeat:no-repeat;top:0px;left:0px;width:100%;height:0px;z-index:100;position:absolute;'/>
Em que:
-Para que a imagem não se repita como um background você deve deixar no-repeat;
-A distância do topo (top:0px) até a sidebar deve ser definida por você. Quanto maior o número, mais a imagem "desce";
-A distância da esquerda (left:0px) ou direita (right:0px) também será definida de acordo com seu layout. Se quiser que fique mais para a direita, aumente o número em left, tipo left:500px;
-width 100% mostra a largura total da imagem, ou seja, você só precisa definir a altura em height:0px, que no caso das orelhinhas foi 144px;
-E finalmente, deixe position:absolute para a imagem aparecer apenas no topo, sem deslizar como uma cortininha.
*OBS: Esqueci de dizer que o código todo deve ser colado acima de </body> no HTML do seu template ^^.
Agora é só editar conforme seu layout; fica legal combinar com a cor da borda da sidebar, ou plano de fundo neh ^-^
Espero que gostem e beijus...

18 comentários:

  1. Essas orelhinhas são um mimo.
    A cara do seu blog *---*
    xoxo

    ResponderExcluir
  2. Ameeei teu blog :)
    um encanto.

    Já estou seguindo;
    visita?

    http://fernandavitiello.blogspot.com.br/

    Beijo

    ResponderExcluir
  3. Nossa, que fofiiiiinho! Amei, muito lindinho!
    Deixa o blog bem Kawaii ^^
    Beijinhos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  4. LIIIIIIIIIIIIIINDO MAN. muito criativo.
    Absolute Dream.

    ResponderExcluir
  5. Muito obrigada e sejam todas bem vindas!!!
    Com certeza irei retribuir as visitas ^^
    Já retribuo o carinho <3
    Beijinhus...

    ResponderExcluir
  6. Oh.... são lindinhas d+

    bjss
    blog-polllyanna.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito obrigada e fico super feliz que tenha gostado ^^
      Beijus...

      Excluir
  7. As orelhinhas ficam muito fofas, aliás são muito fofas.bjs
    no-planetaroom(.)blogspot(.)com
    o blog mudou de nome e de url.

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^
      Já atualizei seu link e vi o blog, ficou fofíssimo :)
      Beijus e obrigada...

      Excluir
  8. Awwwwwwwwwwwwwwwwwwwwn' é muito fofo isso gente *u*
    Eu amei, preciso fazer isso no meu blog *-------*
    Véi na boua, teu blog é mega fofo *v*

    Beijinhos~~> Paradise City

    ResponderExcluir
  9. legal, da pra fazer isso com qualquer imagem ne?

    ResponderExcluir
  10. Muito obrigada meninas ^^
    Fico feliz que tenham gostado!!
    E Bia, dá sim; você pode pôr laços, orelhinhas de coelho, urso...enfim, qualquer imagem :3
    Beijus...

    ResponderExcluir
  11. Amei as orelhinhas! Foi você quem as fez? se sim você poderia fazer um tuto ensinando como faze-las? Eu amei elas! São muito Kawaii!

    ResponderExcluir
    Respostas
    1. Essas orelhinhas são do gatinho que uso no cabeçalho ^^
      Eu só recortei e mudei as cores em um editor de imagens :3
      Beijinhus...

      Excluir
  12. Não consegui Ç.Ç
    Buááá eu queria ter T^T

    ResponderExcluir
    Respostas
    1. Tem que ir testando conforme o seu blog :3

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart