Espaço Otaku | Home About Parceria Contato

Barra de emoticons animados para comentarios do blog

💬

Yoo... Mina, hoje eu trouxe uma coisinha bem legal para alegrar os comentários do blog de vocês, emoticons animados estilo anime, o tema é de um gatinho bem simpático kkkk (Eu não sei o que é esse bichinho, eu chuto um gato kkk). Vejam como vai ficar depois que terminarmos:


Click na imagem para visualizar a versão animada nos comentários do blog de testes.
 Versão animada.

Legal né? (Respondam nos comentários kkk), a seguir está o tutorial, estou ensinando passo a passo como vocês vão inserir os emoticons em seus blogs.

Por favor pessoal, façam backup antes de começarem.

Qualquer dúvida referente a instalação, podem perguntar nos comentários ou podem me mandar um e-mail no menu contatos ou até mesmo podem me encontrar no chat do blog. Vamos lá:
  • Inserir o CSS
Entre no painel do blogger e em modelos, click na opção editar HTML. De "Ctrl+F" e procure por:
]]></b:skin>. Acima dessa tag você vai colar o código a seguir:





  • Inserir os emoticons no HTML
Nessa parte vamos inserir os emoticons para que eles fiquem visíveis na área de comentários. Repita o processo, entre no painel do blogger e em modelos, click na opção editar HTML. De "Ctrl+F" e procure  pela seguinte linha:

<b:include data='post' name='threaded-comment-form'/>
Veja na imagem a seguir (Clique para ter uma melhor visualização):


Insira o código abaixo ACIMA dela:





  • Ultima etapa: Javascript
Repita o mesmo processo até o editor de HTML, de "Ctrl+F" e procure por </body>, ACIMA dela cole o código a seguir:



E para quem está com duvidas sobre a instalação (Muita gente me mandou e-mail perguntando como faz isso, eu não achei aquilo e isso e mais aquilo...), eu gravei um video mostrando para vocês como fazer a instalação, passo a passo.

No vídeo eu peço para vocês fazerem o download do arquivo onde tem os códigos, mas os códigos que tem o documento que eu mostro no vídeo são os mesmos aqui do post.

)

Bem... acho que por hj é só isso...
Até mais pessoal.

20 comentários:

  1. Gostei do tutorial!
    Eu conheço esse bonequinho também, ele é muito legal hsausha' Mas não acho que é um gato, nem sei se é um bicho e.ê
    Talvez eu use em um próximo layout, ficaria muito legal ;3

    Zona Neutra

    ResponderExcluir
    Respostas
    1. Eu achei muito legal tmb, kkkkk. Deu um trabalhinho no javascript mais ficou legal hehe.
      Vai ser legal comentar lá com eles kkkk.
      Abraço.

      Excluir
  2. Que kawaii *^^*
    Achei lindo, um dia desses eu uso :3
    AHsuashuahs acho que isso não é um gato...
    Talvez seja só um menininho, aquilo é cabelo huehuehue

    ~Chuuu

    ResponderExcluir
  3. Kawaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii desuuuuuuuuuuuuuuuuuuuuuuuuuuuu!!! Que fooofinhooooooo!! *¬* Adorei o Tutorial! o/



    Diego...se escreve "trouxe" e não "trouce" meu "anjinho" >.< kkkkkkkkkkk! (Desculpa eu está te corrigindo! Ç.Ç)


    Fui,Bjs!!!♥

    ResponderExcluir
    Respostas
    1. kkkkkkkkk, são bem engraçadinhos mesmo kkk.
      Tem problema n more, eu tenho que prestar mais atenção quando eu to escrevendo, tiver um erro eu agradeço quando os meus leitores me corrigem.
      Abraço....

      Excluir
  4. Oowwwt que fofos! Eu acho que é um gatinho sim, pelo menos aparenta ser um! Muito fofo adorei o tuto! ♥

    ResponderExcluir
  5. Amei o tutoral, super cute, assim que trocar o lay irei utilizar...

    Diego-chan gostaria de lhe pedir um favorzinho, sera que poderia votar em meu blog, pois estou participando de uma promoção e presciso de uma ajudinha

    ta aki o link:http://galaxykawaiii.blogspot.com.br/2014/01/promocao-2-etapa.html#

    Agradeço desde ja fofo
    Bjokas

    ResponderExcluir
    Respostas
    1. Vai ficar muito legal nos comments do seu blog.
      Sim, voto sim... Abraço.

      Excluir
  6. Esses emoticons são muito kawaiis *oooo* teve uma época que eu usava alguns deles kkkk
    Muito bom esse tutorial!

    http://aprendiz-de-mangaka.blogspot.com.br/

    ResponderExcluir
  7. Amei os emoticons *U*
    eu irei usar no próximo layout do meu blog^^ (é claro que irei colocar o nome do seu blog nos créditos finais)

    ResponderExcluir
  8. Esse bichinho é muito fofo, eu já conhecia ele *-*
    Acho que é um gatinho sim, ótimo tutorial :3

    Rilakkuma Coffee

    ResponderExcluir
  9. Que fofinhooooo,pra mim ele parece um gato também kkkk um menino,um bichinho desconhecido kkkkk,mas é fofinho e engraçado kkk vou colocar em um próximo layout com certeza.Ficou muito legal,gostei do tutorial.Gostei do ~4 achei a cara dele bem engraçada.Você que fez todo o html e tudo?Ficou muito bom hauahuauah.
    Byee!

    ResponderExcluir
    Respostas
    1. A parte do CSS é HTML é mais simples mas o Javascript precisei de ajuda do meu professor kkkk. Abraço.

      Excluir
  10. Faz um tempinho que não visito seu blog, esse layout do Hyouka ficou muito kawaii.

    Achei bem compreensivo por você aceitar a correção dos seus leitores, às vezes via um errinho e não falava para não te chatear.

    Mas, como você permitiu eis uns que observei:

    1 - Na frase: O tema e de um gatinho bem simpático ( quem ler pensa que vc está citando duas coisas diferentes, pela falta de acento na letra E;

    2 - A palavra tutorial está escrito como tutoria

    3 - Estão faltando os acentos da palavra dúvida e até, que estão escritas como duvida e ate

    4 - Na frase: Veja na imagem á seguir ( parece que vc tentou colocar o acento grave, porém não é necessário )

    Contudo, adorei a sua explicação *-*
    E me desculpe meu fofo por estar te corrigindo.

    ResponderExcluir
    Respostas
    1. kkkkkk, n tem problema n... Eu gosto quando me corrigem porque isso mostra que vocês realmente estão lendo as postagens. Vlw mesmo, não tinha percebido esses erros. Vou passar a fazer estes posts na parte da manha, porque estou mais acordado kkkk, o resto do dia fico parecendo um robô em modo automático.
      Abraço.

      Excluir
  11. Yoooo
    Como você está Diego-kun?
    Que kawaii, mais achei mó bullying você mandar eu clicar na imagem e aparecer "Permissão negada".. ~le chora kkkk
    Achei muito legal *-*
    E curti bastante o tutorial.
    Até breve e se cuide o/

    ResponderExcluir
  12. Acho super-legal, já usei algo assim uma vez, mas confesso que agora morreria de preguiça de colocar e.e'... Tutorial muito bem explicado ;3

    ~kiss *3*
    hantonokokoro.blogspot.com.br/

    ResponderExcluir
  13. Finalmente um tutorial que estava procurando ._. só que com carinhas de mangás, até que em fim, obrigada Diego R. Leite, nem imaginei que ia encontrar aqui aueuaue :v e o novo layout tá ótimo, roxo u.u, muito bonito :>

    ResponderExcluir