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
Com o término das duas tags antigas (Profissa no Ps e Manual da Blogueira), tinha que criar mais uma, né?
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 #000000Pra 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;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:
color: #000000
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
É isso. Beijinhos com glitter :*
Nossa, adorei saber mais - sou péssima com HTML -
ResponderExcluirNã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/
Ooown, que bom que gostou >< Okok, disponha :33
ExcluirEu uso essa tabela, é a melhor pra mim. Quando não acho cores lá, eu procuro em paletas mesmo :D
ResponderExcluirGeralmente 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
Também acho mais fofo pra fora, até porque pouca gente usa :3
ExcluirAh, 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!
ResponderExcluirJu, do Epílogos e Finais.
Aaah, também vivo confundindo height com widht! azshasuhasu ><
ExcluirOkok *u*
gostei do tutorial ^^
ResponderExcluirMuito bom o tutorial. Eu entendo algumas coisas porque sei um pouco de ingles rsrsrs the-paradiise.blogspot.com.br
ResponderExcluirAaah, que bom então :33
ExcluirAdorei o post, eu comecei a mexer com os códigos há pouco tempo, mas acho que estou começando a entender kkk
ResponderExcluirAmei o blog, já estou te seguindo e curti a fanpage
Bjos,
Mel Pires
www.assuntosdemeninas.net
Ooown, brigada e que bom que gostou! *---*
ExcluirAdoro entender esses "trein"
ResponderExcluirvivo mexendo no meu lay.
Adorei o posst.
BjooooooooooO
doidinhaporesmalte.blogspot.com.br
Obrigada, bom que gostou *---*
ExcluirAdorei esse manual, adoro essas dicas de html.
ResponderExcluirbeijos
Obrigada, bom que gostou! *---*
ExcluirAdoro saber mais sobre essas coisas, adoro mexer em HTML, mesmo sabendo pouco. Beijão <3
ResponderExcluir@keithpappen
www.detalhesamor.blogspot.com
Aaawn, que bom que gostou *u*
ExcluirMuito bom o tuto, mas não vou tentar porque sou horrível com html :(
ResponderExcluirBeijos
ilovecantores.blogspot.com
Aaah, ok ><
ExcluirNossa os posts ensinando vão me ajudar muito rsrssrrs !
ResponderExcluirAdooreiii !
Beijooos !
http://meninachicmc.blogspot.com.br/
Aaah, que bom Laura! *u*
ExcluirSeus tutoriais são sempre incríveis!!
ResponderExcluirFlor, estou sentindo falta de seus comentários lá no blog. Tá tendo um joguinho. Que tal participar?
http://deumjeitosomeu.blogspot.com/
Beijos
Ooown, brigada >< Aaah, vou ir lá visitar e participar agora! *u*
ExcluirAhh ótimas dicas, de tanto usar acabei decorando e sei o básico sabe? Mas na hora de fazer um layout saber isso facilita!
ResponderExcluirbeijos
blog-cereja.blogspot.com
Também acho que facilita *u*
ExcluirEbaah ! finalmente postou .-.
ResponderExcluirQuem será que ficou cobrando em ? RSRSRSRSR
Obrigada, ótimo ótimo.
Beijocas ||Eternal-Bella.Blogspot.Com
Nem sei u3u
ExcluirGostei do post!
ResponderExcluirO tutorial é bem legal!
Beijos,
sonhosde-primavera.blogspot.com.br
Obrigada, bom que gostou! :3
ExcluirOi flores! Eu acho o blog muito legal hoje na verdade é minha primeira visita! :)
ResponderExcluirJá estou seguindo! - Segue de volta?
Kisses,
Ju
www.sweet-dreams-ju.blogspot.com
Aaah, obrigada, mas não ^^
ExcluirOMG!! 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
ResponderExcluirOoown, que isso, ashuahuas ><
ExcluirMuiitoo bom! Olha não sei se alguem ja disse mais o titulo esta escrito errado, esta: PERSONALIXANDO.
ResponderExcluirDesculpa falar,mas quero ajudar *--*
Bjinhos
http://chuvadesonhooficial.blogspot.com.br/
Acredita que ninguém tinha me avisado antes? e.e Muito obrigada por falar, viu? Já arrumei *u8
ExcluirEsse tutos são maras,amei!
ResponderExcluirMINHA MÃE ME ENSINOU
Obrigada, bom que gostou ^^
ExcluirAdoro seus tutos! Esse foi ótimo!
ResponderExcluirBeijinhos!
gotta-be-you-blog.blogspot
Obrigada, bom que gostou! :3
ExcluirPaula-san!!!! Konbanwa!
ResponderExcluirEu recebi o seu recado! Por favor, pode me enviar novamente o seu email? Aí eu explico td direitinho, ok? ;D
Paulina Paulina Paulina Paulina Paulina que saudade de ti menina T^T
ExcluirShesuis, 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
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.
ResponderExcluirwww.levigustavodicas.com
Obrigada ^^
ExcluirMuito legal o post.
ResponderExcluirGostei da sombra, acho que vou por lá no blog, ponho em cima de que código?
Beijos
neversaynever-believe.blogspot.com.br
Obrigada, bom que gostou! Pode por em cima do de menu, do da sua barra lateral, área de posts ou do que quiser, hahaha ><
ExcluirAmei 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.
ResponderExcluirTenha um bom fim de semana
universoteengirl-porlarissa.blogspot.com
Ooown, disponha >< Que isso Lari, adoro que façam pedidos! *---*
ExcluirOkok :3
Adorei, pra variar!!! sou pessima nisso rs
ResponderExcluirBeijos,
www.demodaemmoda.com
Obrigada, bom que gostou, hahaha ><
ExcluirSeria ótimas umas novas tags, irei curtir depois a página, que pena que ele tinha sido hackeado ein...
ResponderExcluirAmei o tutorial!
Adolescente Nerd
Aaah, okok! *u* Poisé, mas muito obrigada então! :3
ExcluirMais 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
ResponderExcluirBeijos ♥
Sim Senhorita (Clique aqui ou no perfil)
@SiimSenhorita
@SiimSenhorita
Também erro mundo nesse! ahsuahsuasu ><
ExcluirMenina, tu arrasa. Eu já te disse isso, não foi? Fiz um post onde mencionei seu blog. ♥
ResponderExcluir>>Bonequiinha de Luxo<<
- xoxo -
Ooown, brigada >< Okok, vou ir lá ver! *u*
Excluiresses códigos são bem simples e prático adorei
ResponderExcluirbeijos
http://croquidemoda.blogspot.com.br
Obrigada, bom que gostou! ^^
ExcluirEu li mas não comentei no dia. Então estou aqui agora para isso.
ResponderExcluirPosts 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)
Ooown, que bom que ajudou, Ana >< Aaah, okok :3
ExcluirAdorei 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.
ResponderExcluirO 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
Obrigada, bom que gostou! :D Aaah, ok, hahaha ><
ExcluirNossa, sinto muito pela internet D: A da minha cidade antiga era bem assim :/
Beijos! *3*