julho 21, 2018

Caixinha de Coelho em Css com Widget do We❤it

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:
.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.
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:
Share:

2 comentários:

  1. 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.
    Amei 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

    ResponderExcluir

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