Image Map

15/02/2013

Personalizando Códigos Simples

Oi gente! Se alguma de vocês curte WWE, que tal curtir a página da minha amiga, My Princess AJ Lee? Eu participo de lá como designer, mas ficaria super feliz se tivessem mais curtidas! ^^ Fomos hackeadas recentemente e perdemos a maioria, então, se puderem, ajudem! :3
o que que comida tem a ver com o post? ô produção!
 Depois de duas meninas me pedirem esse post (e de uma delas me lembrar dele todos os dias, rs) finalmente trouxe aqui pro blog.
 Com o término das duas tags antigas (Profissa no Ps e Manual da Blogueira), tinha que criar mais uma, né? hahaha. Mas ainda vou pensar em outras, não se preocupem. Bem, nessa série a minha intenção seria dar algumas dicas de como personalizar códigos, e, talvez, de como criar um menu (isso depois de vocês já souberem o suficiente).
 Hoje vou falar de alguns termos que são necessários para fazer edições, e que são super simples de se decorar. Ah, e obs.: se você já tiver um conhecimento de inglês, ajuda moooointo.

 Sabe aquele menu fofo que você viu mas não gostou das cores/fonte/efeitos? Pois então, pra mudar tudo isso é super fácil! Chega de ficar catando menus diferentes que se adequem as suas necessidades.
Vou levar em conta que todos somos leigas no assunto, ok? Assim quem não sabe nada aprende desde o início e quem já sabe algumas coisas dá uma revisada. Vamos lá:
 background: esse termo significa, basicamente, o plano de fundo de uma coisa. Ex.: o background dessa postagem é branco. Nos menus, você vai encontrar ele ou por imagem ou por código de cor (vou falar mais sobre eles mais adiante). Assim é o por código de cor:
background: #FFF;
 E, se quiser mudá-lo por imagem (ATENÇÃO: não pega em todos os menus ou códigos, teste antes de salvar):
background: url (URL DA SUA IMAGEM) repeat left;
 No código acima, você também pode trocar o "repeat" por "no-repeat", caso não queira que a imagem se repita. E caso queira trocar de imagem para cor, só tirar esse código e colocar o de "background: #FFF".
  border: quem entende de inglês já tira essa de letra- border= borda. Dá pra usar borda de vários modos, e com vários modelos. Pra colocar em algum código/editar, é só colocar/achar o seguinte código:
border: 1px solid #000000
 Pra quem não conhece, a medida "px" é igual a "pixel", e é a medida usada em todos os códigos do seu layout. Analisando o código acima, dá pra ver que 1px é a largura, "solid" é o modelo da borda e "#000000" o código da cor. Aqui tem alguns exemplos de como usar os modelos:
1px solid - 1px dashed - 1px dotted
2px inset - 2px outset - 4px double
 Também tem alguns outros modelinhos, mas esses não são tão bonitos/usáveis.
 font: esse já é fácil, "font" é a fonte do seu código, ou seja, a letra (ex.: Calibri, Arial e a tão horrível que nunca deve ser usada Comic Sans). O código da fonte pode aparecer de dois modos, que são eles:
font: normal 15px Calibri;
color: #000000
 Esse é o modo que mais uso, já que não precisa ficar dividindo, e é bem simples de editar. "Normal" é o modo da fonte, que você pode trocar por "bold" (negrito), "italic" (itálico) ou "underline" (sublinhado), 15px é o tamanho dela, Calibri o nome, e "color" é a cor da fonte. Você pode usar fontes diferentes dessas do blogger com esse tutorial aqui. O outro modo que você pode encontrar é esse:

font-family: Calibri;
font-size: 15px;
font-weight: normal;
color: #000000;

 É o mesmo que o código anterior, só que separado e na ordem contrária. "Font-family" é o nome da sua fonte, "font-size" o tamanho e "font-weight" o modo dela (que, como eu disse antes, pode ser trocado por "bold", "italic" ou "underline").
 widht e height: são, respectivamente, largura e altura, que você só deve colocar caso queira altura e largura fixas no seu menu/código. Eles também são medidos por px.
 sombra: ok, não vai aparecer lá no seu código "sombra", mas você pode muito bem adicionar nele (o que dá todo um toque a mais). Existem dois modelos de sombra, que são eles:
sombra normal - sombra "inset"
 A sombra normal é, bem, normal. Já a "inset" é como se fosse uma sombra pra dentro, interior, sabe? O efeito é super lindo. E pra usá-la é só adicionar o seguinte código:

box-shadow: inset 0 0 15px #000000, 0 0 3px #000000;
 Aí é só personalizar os códigos das cores e o espaçamento (em negrito e itálico, respectivamente). Agora pra botar o outro é só adicionar:
-moz-box-shadow:5px 4px 10px #ccc;-webkit-box-shadow: 5px 4px 10px #ccc;-khtml-box-shadow: 5px 4px 10px #ccc;
 E aí mudar os códigos das cores.
 códigos das cores: finalmente essa parte tão importante! Os códigos das cores são constituídos por um jogo da velha (#) e 6 dígitos, entre letras e números, e vão ser necessários na hora de personalizar os códigos de acordo com as cores do seu layout/que você quer no seu layout. Existem códigos mais simples (que você decora fácil fácil) e também os mais complicados (que você acha em sites e com conta-gotas). Os mais simples são:
#fff = branco, #000000 = preto, #ccc = cinza escuro, #DCDCDC = cinza claro

 E os mais complicados você consegue achar aqui:
Color Hexa ♥ Tabela de cores
 E aí, gostaram? Espero que sim. Também espero que ajude a Lari e a Bella, as lindas que me pediram a série! No próximo já ensino como montar algo, ok?
 É isso. Beijinhos com glitter :*

61 comentários:

  1. Nossa, adorei saber mais - sou péssima com HTML -
    Não sabia a da sombra, e de alguns modelos de borda ú.ú -ja sei mexer mais ou menos com cores '-'
    Ajudou bastante, obrigada :3
    Beijos.
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ooown, que bom que gostou >< Okok, disponha :33

      Excluir
  2. Eu uso essa tabela, é a melhor pra mim. Quando não acho cores lá, eu procuro em paletas mesmo :D
    Geralmente eu não coloco sombra dentro do blockquote ou área de texto, coloco por fora pra ficar mais fofo ou sei lá... e as únicas que eu guardo os códigos é o código do branco e o do preto *rss
    Beijoos!

    http://caramelos-encantados.blogspot.com

    ResponderExcluir
    Respostas
    1. Também acho mais fofo pra fora, até porque pouca gente usa :3

      Excluir
  3. Ah, estou começando á aprender esses códigos, rçrç' Sempre tento editar algo, mas em certas ocasiões acabo esquecendo se é px ou heigh, AHSUAHS' Só para os profissas do HTML, mesmo, rçrç' Se bem que, tudo é possível o.O Amei as dicas, não costumo usar sombras nos meus materiais e nem bordas, mas acho que no próximo layout, estes serão os 'assuntos' centrais ýn)' Kissez!

    Ju, do Epílogos e Finais.

    ResponderExcluir
    Respostas
    1. Aaah, também vivo confundindo height com widht! azshasuhasu ><
      Okok *u*

      Excluir
  4. Muito bom o tutorial. Eu entendo algumas coisas porque sei um pouco de ingles rsrsrs the-paradiise.blogspot.com.br

    ResponderExcluir
  5. Adorei o post, eu comecei a mexer com os códigos há pouco tempo, mas acho que estou começando a entender kkk
    Amei o blog, já estou te seguindo e curti a fanpage
    Bjos,
    Mel Pires

    www.assuntosdemeninas.net

    ResponderExcluir
  6. Adoro entender esses "trein"
    vivo mexendo no meu lay.
    Adorei o posst.
    BjooooooooooO

    doidinhaporesmalte.blogspot.com.br

    ResponderExcluir
  7. Adorei esse manual, adoro essas dicas de html.
    beijos

    ResponderExcluir
  8. Adoro saber mais sobre essas coisas, adoro mexer em HTML, mesmo sabendo pouco. Beijão <3

    @keithpappen
    www.detalhesamor.blogspot.com

    ResponderExcluir
  9. Muito bom o tuto, mas não vou tentar porque sou horrível com html :(
    Beijos
    ilovecantores.blogspot.com

    ResponderExcluir
  10. Nossa os posts ensinando vão me ajudar muito rsrssrrs !
    Adooreiii !
    Beijooos !
    http://meninachicmc.blogspot.com.br/

    ResponderExcluir
  11. Seus tutoriais são sempre incríveis!!
    Flor, estou sentindo falta de seus comentários lá no blog. Tá tendo um joguinho. Que tal participar?

    http://deumjeitosomeu.blogspot.com/

    Beijos

    ResponderExcluir
    Respostas
    1. Ooown, brigada >< Aaah, vou ir lá visitar e participar agora! *u*

      Excluir
  12. Ahh ótimas dicas, de tanto usar acabei decorando e sei o básico sabe? Mas na hora de fazer um layout saber isso facilita!
    beijos
    blog-cereja.blogspot.com

    ResponderExcluir
  13. Ebaah ! finalmente postou .-.
    Quem será que ficou cobrando em ? RSRSRSRSR
    Obrigada, ótimo ótimo.

    Beijocas ||Eternal-Bella.Blogspot.Com

    ResponderExcluir
  14. Gostei do post!
    O tutorial é bem legal!
    Beijos,
    sonhosde-primavera.blogspot.com.br

    ResponderExcluir
  15. Oi flores! Eu acho o blog muito legal hoje na verdade é minha primeira visita! :)
    Já estou seguindo! - Segue de volta?

    Kisses,
    Ju
    www.sweet-dreams-ju.blogspot.com

    ResponderExcluir
  16. OMG!! Paula,Paula,daqui a pouco seus ensinamentos vão fazer você perder o cargo u.u -sóqnunca suhaushaushuahs sonho de toda blogueira isso <3

    ResponderExcluir
  17. Muiitoo bom! Olha não sei se alguem ja disse mais o titulo esta escrito errado, esta: PERSONALIXANDO.
    Desculpa falar,mas quero ajudar *--*
    Bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Acredita que ninguém tinha me avisado antes? e.e Muito obrigada por falar, viu? Já arrumei *u8

      Excluir
  18. Esse tutos são maras,amei!
    MINHA MÃE ME ENSINOU

    ResponderExcluir
  19. Adoro seus tutos! Esse foi ótimo!

    Beijinhos!

    gotta-be-you-blog.blogspot

    ResponderExcluir
  20. Paula-san!!!! Konbanwa!
    Eu recebi o seu recado! Por favor, pode me enviar novamente o seu email? Aí eu explico td direitinho, ok? ;D

    ResponderExcluir
    Respostas
    1. Paulina Paulina Paulina Paulina Paulina que saudade de ti menina T^T
      Shesuis, morri aqui, até sonhei contigo de tanta saudade ;-;
      Posso sim, se quiser por aqui é paulapollygatinha@hotmail.com (humilhante como sempre e.e) mas também vou comentar lá no seu blog com ele para o caso de você não ver o3o

      Excluir
  21. Gostei super legal a dica que você deixa aqui no seu blog, gostei mesmo se puder da uma passadinha la no meu cantinho estou sentindo falta de sua leitura abraços Levi.


    www.levigustavodicas.com

    ResponderExcluir
  22. Muito legal o post.
    Gostei da sombra, acho que vou por lá no blog, ponho em cima de que código?
    Beijos
    neversaynever-believe.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou! Pode por em cima do de menu, do da sua barra lateral, área de posts ou do que quiser, hahaha ><

      Excluir
  23. Amei Paula.muito obrigada por atender o meu pedido(mais um deles,estou te explorando d+). Você me ajudou muito. Essa post já foi pros favoritos.
    Tenha um bom fim de semana
    universoteengirl-porlarissa.blogspot.com

    ResponderExcluir
    Respostas
    1. Ooown, disponha >< Que isso Lari, adoro que façam pedidos! *---*
      Okok :3

      Excluir
  24. Adorei, pra variar!!! sou pessima nisso rs

    Beijos,
    www.demodaemmoda.com

    ResponderExcluir
  25. Seria ótimas umas novas tags, irei curtir depois a página, que pena que ele tinha sido hackeado ein...
    Amei o tutorial!


    Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Aaah, okok! *u* Poisé, mas muito obrigada então! :3

      Excluir
  26. Mais um motivo para eu querer fazer aulas de inglês aoehai. O que eu mais uso e erro é o background-image. Coloco de todo tipo background-url:, background: url, menos o certo eaoiheah

    Beijos ♥
    Sim Senhorita (Clique aqui ou no perfil)
    @SiimSenhorita
    @SiimSenhorita

    ResponderExcluir
  27. Menina, tu arrasa. Eu já te disse isso, não foi? Fiz um post onde mencionei seu blog. ♥

    >>Bonequiinha de Luxo<<
    - xoxo -

    ResponderExcluir
    Respostas
    1. Ooown, brigada >< Okok, vou ir lá ver! *u*

      Excluir
  28. esses códigos são bem simples e prático adorei
    beijos
    http://croquidemoda.blogspot.com.br

    ResponderExcluir
  29. Eu li mas não comentei no dia. Então estou aqui agora para isso.
    Posts assim são ótimos! Vez ou outra eu me arrisco, e escrevo algo e vejo se funcionou. haha Eu acho realmente difícil mexer com html, mas já estou um pouco melhor no quesito. Posts assim realmente ajudam muuuuuuito! Obrigada por tê-lo feito! *-* HAUSHAUHSA Beijão Paula! E me desculpe, mas não vou poder participar do concurso, não ainda. ):

    Diva Pensante (perfil)

    ResponderExcluir
    Respostas
    1. Ooown, que bom que ajudou, Ana >< Aaah, okok :3

      Excluir
  30. Adorei saber desas dicas P. C. Mas ultimamente não tenho mais paciencia p/ endireitar. Foi por isso q pedi p/ vc fazer o meu lay hehe.
    O motivo real é q a internet na minha cidade é uma droga principalmente pq ela não é banda larga. Se não fosse isso estaria sempre melhorando o lay do meu e, quem sabe, fazendo encomendas como vc P. C.
    Mas mesmo assim adorei saber as definições dos termos (confesso q já sabia de alguns, mas desconhecia da maioria deles. Bjs *-*)

    http://peregrinodanoite.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, bom que gostou! :D Aaah, ok, hahaha ><
      Nossa, sinto muito pela internet D: A da minha cidade antiga era bem assim :/
      Beijos! *3*

      Excluir