Oi, gente!
Desculpa ter deixado o blog desatualizado esse tempinho, é que eu tenho prova duas vezes por semana então tenho que passar a semana inteira estudando e, também, fazendo trabalhos...
Mas eu consegui achar um tempinho para fazer o novo layout do blog. Não é o melhor, eu sei, mas me agradou muito. O que vocês acharam? Sejam sinceros.
Ah, e junto com o layout tem novidade: músicas para players! Bem tudo começou assim: eu iria fazer o layout da diva Avril Lavigne e pensei que seria legal colocar um player legal no blog, mas e as músicas? Como sabem, eu formatei meu PC a um tempinho, ou seja, estou sem músicas, mas felizmente eu tenho umas salvas no DropBox. Então, eu fiquei pensando sobre quem está nessa situação ou é iniciante no assunto, e decidi fazer essa página. Já tem músicas da Avril, The Wanted, Rihanna, Sugababes e Wonder Girls, mas eu estou aceitando pedidos, ok?
Eu resolvi fazer um tutorial que, na minha opinião, é bem útil e pode ajudar muitas pessoas que realmente querem aprender a mexer no HTML para postar suas próprias coisas. Esse tutorial é bem básico mesmo, mas caso quiserem eu ensino a fazer menus com keyframes.
Eu tive trabalho para fazer esse tutorial de como criar menus, então eu quero créditos, ok?
Antes de tudo, saiba que todos os códigos de menu devem ser sempre colados acima de ]]></b:skin>, assim como os da maioria de efeitos em imagens.Agora eu vou colocar alguns (ou muitos) códigos que são fundamentais para o seu menu ficar com uma aparência melhor.
font-family: determina qual vai ser a fonte do menu (ex.: Arial, Tahoma, Verdana e Trebuchet MS são as que eu mais recomendo, mas pode usar fontes do Google Web Fonts)
font-size: é o tamanho da fonte (ex.: 15px, 10px, 12px e etc)
text-transform: determina se o texto será em minúsculo (lowercase), maiúscula (uppercase) ou a primeira letra maiúscula (capitalize)
text-align: center para o centro; right para a direita; left para a esquerda
font-weight: determina se será em negrito (bold)
font-style: determina se será itálico (italic)
line-height: é a altura da linha
letter-spacing: espaço entre as letras (recomendo 1px ou 2px)
word-spacing: espaço entre as palavras
color: cor da letra do menu
background: cor do fundo do menu
height: determina a altura do menu (ex.: 18px, 20px)
width: determina a largura do menu (ex.: 25px, 22px)
padding: determina o espaço entre as margens e a fonte do menu (4px, 5px)
border: border é a borda. Também pode colocar border-left (borda da esquerda), border-right (borda da direita), border-top (borda do topo) e border-bottom (borda de baixo) {ex.: border-left: 2px solid #ff8888;}
margin: determina o espaço entre os links do menu (5px, 4px)
border-radius: são as bordas arredondadas (border-radius: 10px;)
display: determina se o menu vai ser separado em blocos na mesma linha (inline-block) ou em apenas blocos, sem ser na mesma linha.
float: é semelhante ao text-align. Determina se o menu ficará no centro (center), na direita (right) e na esquerda (left)São muitos, não é? Mas não se preocupe, depois de praticar você memoriza tudo e se vocês sabem um pouquinho de inglês, concerteza será mais fácil ainda de memorizar.
Agora, preste bem atenção nessa parte!
Primeiro temos que começar pela parte mais importante, na minha opinião: o nome da classe. Se não tiver, o resto não vai funcionar. E a classe sempre terá um ponto final (.) antes do nome, assim:
.NOMEdaCLASSE {No códigos você vai colocar alguns dos que você viu lá em cima. Bem, aqui um exemplo:
códigos
}
.NomeDAclasse {O resultado ficou assim:
font-family: Verdana; /* fonte */
font-size: 10px; /* tamanho da fonte */
line-height: 16px; /* altura da linha */
text-align: center; /* centralização do texto */
width: 90px; /* largura do menu */
color: #000; /* cor do texto */
background: #efefef; /* fundo */
border-bottom: 2px solid #000; /* borda preta */
border-radius: 10px 10px 0px 0px; /* borda arredondada */
padding: 5px; /* espaço entre o texto e as bordas */
margin: 5px; /* espaço entre os links */
display: inline-block;}
O resultado ficou bem simples, mas apenas porque eu coloquei poucas coisas.
O menu está sem hover, ou seja, se passar o mouse em cima, ele continuará o mesmo. Para mudar isso, basta fazer algo simples: adicionar :hover.
Como por exemplo:
.NomeDAclasse {Basicamente, é assim que se faz um menu.
font-family: Verdana; /* fonte */
font-size: 10px; /* tamanho da fonte */
line-height: 16px; /* altura da linha */
text-align: center; /* centralização do texto */
width: 90px; /* largura do menu */
color: #000; /* cor do texto */
background: #efefef; /* fundo */
border-bottom: 2px solid #000; /* borda preta */
border-radius: 10px 10px 0px 0px; /* borda arredondada */
padding: 5px; /* espaço entre o texto e as bordas */
margin: 5px; /* espaço entre os links */
display: inline-block;}
.NomeDAclasse:hover {
border-bottom: 2px solid #ff0088;
}
Agora, na hora de colocar, vá em layout • adicionar gadget • HTML/JavaScript:
<div class="NomeDAclasse"><a href="LINK DA PÁGINA">NOME DA PAG</a></div>É só ir colando até dar exatamente o mesmo número de páginas do seu blog.
Por favor, se usarem ou repassarem, creditem!
Ah, e me digam o que acharam do layout, amores.
Beijos
Amei seu novo layout,e o tutorial ficou bem explicadinho.
ResponderExcluirSckitty World
Awn, obrigada ^-^
Excluir...........................................
ExcluirO layout ficou divooo omg ficou muito lindo >///<
ResponderExcluirAdorei o tutorial, sempre tenho um pouco de dúvidas de como fazer um menu legal, gostei muito :D
Nyah Kawaii
Obg amore! Quem bom que você gostou *-*
ExcluirMuito bom o tutorial, sério, me ajudou e vai ajudar muita gente.
ResponderExcluirAAAH, Isa, o novo layout daqui tá lindo, eu a-m-e-i a sidebar *----* Ficou divo, como sempre né, rs.
Ham, que tal músicas da Demi, 1D, Jonas? HJAISHAIS.' São meus gostos, não sei se você vai aceitar, rs.
poisonhtml.blogspot.com
Obrigada, amore. Minha diwa me elogiando, um sonho!
Excluirhm, ñ gosto da Demi, eu sou prisoner - fã do The Wanted, e quem é directioner e/ou prisoner entende, e vivo numa relação de amor e ódio com o Jonas, mas como eu sou muito boazinha e muito diva (e não me acho nada u.u ) eu vou postar ;P
Lindo layout! Mas em meu computador os gadgets no cabeçalho não estão alinhados corretamente :(
ResponderExcluirMesmo assim amei!
Tutorial bem útil viu? Beijos!
Caprichosdabiia.blogspot.com
Eu sei, é horrível. Tentei mudar mas não deu certo ;/
ExcluirOwn, obg
Não me humilha... Ficou mais que perfeito o layout. Pra mim, está tudo normal, sem nenhum problema.
ResponderExcluirKisses.
~Ana @TSD
Perfect
ResponderExcluirhttp://paraisomakeup16.blogspot.com.br
http://www.youtube.com/user/SempreBella1000?feature=mhee
Agora finalmente poderei criar meu próprio menu, tomara que ele saia bonito, gostei bastante de sua ideia! Kisus.
ResponderExcluirKuusou World
Que droga! Com esse novo editor de HTML nenhum dos meus efeitos ta pegando! Estou muito triste! :( me ajude..........
ResponderExcluirOs meus continuam pegando...
ExcluirLindo seu Layout!
ResponderExcluirMas estou tentando fazer um que seja a minha cara, mas seu blog foi um achado.
Eu ñ entendo nada de HTML, mas achei facil começar com suas dicas.
Bjos!
Muito bom esse tutorial,eu adoreii mesmo,eu estava procurando exatamente um assim!
ResponderExcluiroBrigada por me ajudar,beijos!
minhas-confissoes-2012.blogspot.com
Muito lindo o seu blog menina.Você é muito criativa__abraço
ResponderExcluirNão consegui, criei as páginas, mas elas dizem que não existem... me ajudem:
ResponderExcluirumnovo-roteiro.blogspot.com
oi ameei o post e seu blog é PeRfEcT , adorei mesmo já adc o seu blog nos afiliados beijokas
ResponderExcluirhttp://mordidademorango.blogspot.com
Eu achei tudo muito bom e bem explicado mas queria saber o que é esse "nome da classe" que é pra colocar... Obrigado de qualquer jeito
ResponderExcluiras1001paginas.blogspot.com
Ameiii!
ResponderExcluirGostei do layout!
ResponderExcluirgalerinhaconectada.blogspot.com
Lindo! Criei um Menu,com todos os créditos
ResponderExcluir