Tem coisa mais fofa que um coelho?...( ´•ᴥ•` )
Adaptando códigos em HTML e CSS encontrados no Codepen de Julie Park, foi possível fazer uma caixinha de coelhinho animada para usar como widget aqui no blog, como vocês devem ter visto, onde adicionei o widget do we❤it (se não conhece veja aqui; o site atualizou desde a época que postei sobre ele pela primeira vez e agora permite o envio de imagens e postagens com texto). Para usar em seu blog, faça o seguinte...
1. Vá em Layout e adicione um novo gadget HTML/Javascript.
2. Copie e cole o código que deixei nessa página aqui (onde tem a prévia com um coelho rosa) no gadget que você adicionou, personalizando como preferir e salve.
No código você pode editar áreas como as que dizem width e height = largura e altura, margin-top = distância com relação ao topo, background = cores do coelho, left e top = distância da esquerda, do topo..., border ou border-radius = bordas e bordas arredondadas. Mude os valores e cores caso queira personalizar cada parte do coelho representadas pelas classes:
Para obter esse widget do site você também pode acessar a página de widgets, configurar, copiar e colar o código onde quiser.
Quando configurei o widget que uso com o coelho desmarquei as opções mostrar avatar, título, subtítulo e marquei mostrar slideshow, deixei a largura com valor 300.
Resultado:
Adaptando códigos em HTML e CSS encontrados no Codepen de Julie Park, foi possível fazer uma caixinha de coelhinho animada para usar como widget aqui no blog, como vocês devem ter visto, onde adicionei o widget do we❤it (se não conhece veja aqui; o site atualizou desde a época que postei sobre ele pela primeira vez e agora permite o envio de imagens e postagens com texto). Para usar em seu blog, faça o seguinte...
1. Vá em Layout e adicione um novo gadget HTML/Javascript.
2. Copie e cole o código que deixei nessa página aqui (onde tem a prévia com um coelho rosa) no gadget que você adicionou, personalizando como preferir e salve.
No código você pode editar áreas como as que dizem width e height = largura e altura, margin-top = distância com relação ao topo, background = cores do coelho, left e top = distância da esquerda, do topo..., border ou border-radius = bordas e bordas arredondadas. Mude os valores e cores caso queira personalizar cada parte do coelho representadas pelas classes:
.bunny = todo o coelho; .buni = local onde você acrescentará o que quiser; .bhead = carinha; .buear-left ou right = orelhas; .buinner-ear = dentro da orelha; .bueye-left ou right = olhos; .bupupil = pupila; .bunose = nariz; .bline = linha abaixo do nariz; .bublush-right ou left = blush.
3. Para acrescentar algum conteúdo na caixinha é só substituir onde diz 'adicione alguma coisa aqui'. Minha sugestão é o widget do we❤it (já está no código) que mostra as imagens mais recentes do seu perfil, mas pode ser qualquer coisa. Se quiser usar o we❤it, basta mudar a parte do código que diz NOME-DE-USUÁRIO pelo seu nome no link do seu perfil; por exemplo, o meu link é https://weheartit.com/princess_hearts2, e princess_hearts2 é meu nome de usuário.Para obter esse widget do site você também pode acessar a página de widgets, configurar, copiar e colar o código onde quiser.
Resultado:
Tinha visto a caixinha no seu blog e achei muito fofa, ainda mais porque ela até mexe as orelhinhas! É incrível o que as pessoas conseguem fazer só com CSS e HTML.
ResponderExcluirAmei o tutorial - aliás, também amo o blog. Acho que é a primeira vez que comento, mas sempre tô aqui lendo os posts :3
Bjos!
A Life by Kah
Fico feliz que tenha gostado, obrigada e bjuu♡
Excluir