sábado, 3 de dezembro de 2011

Personalizando o chat

Então atendendo a vários pedidos de como eu personalizei meu chat, aqui está um tutorial muito simples. Eu fiz ele meio correndo *o* mais acho que está bem explicado. Ficará mais ou menos assim: (O fundo e a borda vocês mesmos podem fazer ou se preferir usar as imagens que eu disponibilizei )


acesse: http://xat.com/web_gear/chat.php


Após copiar o código você pode colar tanto em alguma postagem ou página (na aba editar HTML) ou como HTML java script .


Gente quem não curtiu o fundo ''foguete'' do chat pode fazer um fundo personalizado ok! Aqui uma base (400x299).
Faça uma imagem um pouco maior que as medidas  do seu chat e hospede ela em algum site que faça isso gratuitamente >imgur<. Fiz essa de exemplo:
Cole o código abaixo ANTES do código do seu chat:

<div style="background:url(LINK_DA_IMAGEM) no-repeat;padding-right:20px;padding-left:20px;padding-top:30px;padding-bottom:10px;">

Mini GifsNos trechos:
(LINK_DA_IMAGEM) = coloque a URL da sua imagem. (clique em cima da imagem com o botão direito do mouse e selecione '' copiar url da imagem ''. Só isso.)

padding-right: equivale á margem direita;
padding-left: equivale á margem esquerda; 
padding-top: equivale á margem de cima;
padding-bottom: equivale a margem de baixo

 Lembre se só altere os números grifados de azul!

Após você ajustar o chat sobre o fundo/borda no final do código do chat adicione a tag: </div> pronto agora é só salvar.
Espero ter ajudado!

38 comentários :

  1. Ameei o tuto jackie, muito bom estava mesmo querendo saber :D

    ResponderExcluir
  2. Aii jackie amei , haha' super facil :pp
    Bjs Dry
    sweetcandyup.blogspot.com

    ResponderExcluir
  3. Aii que fofo Meu blog ainda não tem um Chat* mais com esse tuto vou tratar de fazer um kkk

    http://clubteenbrasil.blogspot.com/

    ResponderExcluir
  4. que legal *U* vc explica mt bem Kackie :3 a Olha, já mudei o link la, viu? Visiita *---*

    bjos caramelados :****

    It’s Becky

    ResponderExcluir
  5. Que bacana menina, teus tutoriais são muito bons. Obrigada por me seguir também.
    Beijooos

    ResponderExcluir
  6. ^^ Eu adoro seus tutoriais guria agora eu estou com essa mania de chamar as pessoas amadas de guria kkk'
    Bjs Dry
    SweetCandyUp.blogspot.com

    ResponderExcluir
  7. Ah este poeta das confusas palavras
    Cantador de todas as canções de tristeza
    Trovador vestido de arlequim trapeiro
    Fazendo vénias a uma imaginada realeza

    Que diz palavra sobre palavra
    Às vezes fica mudo com um olhar de dor
    Dos seus lábios escorrem sons sem sentido
    Porque…Às Vezes Há Palavras Que São Como Fazer Amor…


    Doce beijo

    ResponderExcluir
  8. hauauhau' agora eu não paro de falar guria , XD kkk' mais eu adoroo chamar é entra no msn tenho que falar com você ^^
    Bjs Dry
    SweetCandyUp.blogspot.com

    ResponderExcluir
  9. Jackie vc naum está entendendo assim ó como eu faço para deixar o link embaixo da caixinha link-me para outras pessoas copiarem e colarem??

    ResponderExcluir
  10. aaaaah, sua linda!
    brigada por visitar meu blog, :j:

    aah, nossa esse tutorial me ajudou demais, odiava aquele fundo de corações no meu chat D=
    aliás, seu blog me ajuda muito!
    Beijooooos
    :l:

    ResponderExcluir
  11. Hoy, jackiee tudoo boom?
    Essas coisinhas cuties... no post.
    é vc q personaliza eles ou já tem um programa próprio q vc coloca, e é automaticoo?
    bjookas
    kah santos :)
    http://fluorescentadolecent.blogspot.com

    ResponderExcluir
  12. Sempre com tutoriais de arrasar, se não fosse você o que seria do meu blog??
    Saiba que seu post sobre cabeçalhos eu aproveitei{muito obrigada!!!!}, mas na hora de mapear a imagem não sabia como colocar a caixa de pesquisa ( ç__ç ) me ajuda, por favor?? beijos

    ResponderExcluir
  13. :h:ooi floor , ja estou te seguindo,
    adorei seu blog , mt mt legal !
    #milbeijinhos
    Da uma passadinha la no meu blog
    http://karenbarbiepink.blogspot.com

    ResponderExcluir
  14. Uma das coisas que deixa seu blog melhor ainda é que você dá muitas dicas de tutoriais. Isso ajuda bastante.
    De Princesa ♥ Para Princesa

    ResponderExcluir
  15. oi!
    tu faz encomendas???
    www.blogdasbff-geenic.blogspot.com

    ResponderExcluir
  16. Obg Jackie akele post me ajudou msm!!!
    <3 Bjoos

    ResponderExcluir
  17. Eu já não tenho paciência com o MSN, imagina com esse chat *morre*, hyahahuauh.

    http://bruna-morgan.blogspot.com/

    ResponderExcluir
  18. Jackie amo seu blog é perfeito! Sigo todos os tutoriais dele! Seguindo, se puder e quiser me segue? Um beijinho,
    voandolalonge.blogspot.com :l:

    ResponderExcluir
  19. Amei o tutorial , ^^
    jackie coloca brushes??? entra no msn tambem??
    bjs dry
    sweetcandyup.blogspot.com

    ResponderExcluir
  20. ahh esse chat foi uma das primeiras coisas que eu coloquei no meu blog, valeu pelo tuto Jackie, depois eu vou mudar um pouquinho o visu dele kkk
    bjs
    http://s2juuh.blogspot.com/

    ResponderExcluir
  21. Olá,

    Ótimo tutorial pra quem quer personalizar o chat,bem detalhado e simples de fazer.

    Novo post Jackie,confere?E este é mt especial pra mim ♥

    Beijoos :*

    http://meianoite-br.blogspot.com/

    ResponderExcluir
  22. Sempre arrasando nos tutoriais né dona Jackie?!
    HAHA' Adooorei,vou testar em breve,deixa eu ter meu chat *---*
    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  23. Aii adoro seu blog , sempre lindo.
    Bjs Dry
    SWEETCANDYUP.BLOGSPOT.COM

    ResponderExcluir
  24. ameei o tuto.. sseu blog é lindo demaais amiga!
    Seguindo linda, segue de volta?
    http://tamichesteen.blogspot.com/

    ResponderExcluir
  25. Ahaha isso sim eu gostaria de aprender, adorei amor ! thx!! bjs

    ResponderExcluir
  26. PF, ensina a botar o link "leia mais" em imagem no blog??? :h:

    Bjus!! *---*

    http://mundo-cute-blog.blogspot.com

    ResponderExcluir
  27. Fica mais Lindo a pessoa personaliza o chat !
    sem falar que fica mais com a cara do blog =D
    e ótima você Jackie encima as suas leitores a fazerem isso =) poor isso esse Blog
    aqui tem de tudoooooooo e muito mais'

    BjããOO :k:

    ResponderExcluir
  28. Ual que lindo o tutorial adorei , tem post novo no meu blog aproveita e vote no seu blog preferido na enquete .
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  29. Ótimas dicas de tutoriais, e essa então de personalizar chats? Ótima!

    ResponderExcluir
  30. Beem legal esse tutu Jackie, taalvez eu faça lá no blog, voou veer ^^
    bjookas
    http://karlarayna.blogspot.com/

    ResponderExcluir
  31. Ah, muito obrigada pelo tutorial !
    Acho muito lindo estes chats personalizados todos fofinhos :3
    mas ainda não irei colocar um chat no meu blog, mas quando eu colocar eu tenho certeza de que irei vir aqui para aprender direitinho à personalizá-lo !
    beijos :]

    beatriizgomes.blogspot.com

    ResponderExcluir
  32. Oi jackie pode usar essas imagens??

    ResponderExcluir
  33. você me ajudou muito! Você podia fazer um tuto como que se coloca esses bonequinhos q nem aqui no seu comentario? Eu não achei comu colocar!
    :h:

    ResponderExcluir
  34. não consegui fas um pra mim e depois fala o ktml dele no meu blog?onovositedatm.blogspot.com

    ResponderExcluir
  35. Não funcionou, olha no meu blog de testes, como ficou: http://templatespramim.blogspot.com.br/p/blog-page_21.html

    ResponderExcluir

.