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:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMz0Mg_aNATzuBKVH5DUa7DK3PIVeQ7-w4krn7RWxvnZgdhwwFqAwfZnvzO1Y40f701F5KL97IhOGaec9SyHP-UrKID-T215ASgiRvQAMnVCpGxf4Eux2DkibuYdZKlbnpPm7LZa_YRw/1600/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('URL DA IMAGEM');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...
Essas orelhinhas são um mimo.
ResponderExcluirA cara do seu blog *---*
xoxo
Obrigada ^^
ExcluirBeijinhus...
Ameeei teu blog :)
ResponderExcluirum encanto.
Já estou seguindo;
visita?
http://fernandavitiello.blogspot.com.br/
Beijo
Nossa, que fofiiiiinho! Amei, muito lindinho!
ResponderExcluirDeixa o blog bem Kawaii ^^
Beijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)
LIIIIIIIIIIIIIINDO MAN. muito criativo.
ResponderExcluirAbsolute Dream.
Muito obrigada e sejam todas bem vindas!!!
ResponderExcluirCom certeza irei retribuir as visitas ^^
Já retribuo o carinho <3
Beijinhus...
Oh.... são lindinhas d+
ResponderExcluirbjss
blog-polllyanna.blogspot.com
Muito obrigada e fico super feliz que tenha gostado ^^
ExcluirBeijus...
As orelhinhas ficam muito fofas, aliás são muito fofas.bjs
ResponderExcluirno-planetaroom(.)blogspot(.)com
o blog mudou de nome e de url.
Que bom que gostou ^^
ExcluirJá atualizei seu link e vi o blog, ficou fofíssimo :)
Beijus e obrigada...
Awwwwwwwwwwwwwwwwwwwwn' é muito fofo isso gente *u*
ResponderExcluirEu amei, preciso fazer isso no meu blog *-------*
Véi na boua, teu blog é mega fofo *v*
Beijinhos~~> Paradise City
legal, da pra fazer isso com qualquer imagem ne?
ResponderExcluirMuito obrigada meninas ^^
ResponderExcluirFico feliz que tenham gostado!!
E Bia, dá sim; você pode pôr laços, orelhinhas de coelho, urso...enfim, qualquer imagem :3
Beijus...
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!
ResponderExcluirEssas orelhinhas são do gatinho que uso no cabeçalho ^^
ExcluirEu só recortei e mudei as cores em um editor de imagens :3
Beijinhus...
Adorei XD
ResponderExcluirNão consegui Ç.Ç
ResponderExcluirBuááá eu queria ter T^T
Tem que ir testando conforme o seu blog :3
Excluir