Sabe aquele menuzinho que todo blog tem na sidebar, como nesse layout?
Tenho certeza que você já teve vontade de colocá-lo em seu blog, mas parecia tão complicado que acabou desistindo, ou até chegou a encontrar como faz em algum blog por aí, mas no tutorial não explicava como a coisa funcionava e você ficou a ver navios. Bem, hoje eu vou ensinar como criar seu próprio menu e farei o possível para explicar cada detalhe de como ele funciona. É mais fácil do que parece, vai por mim.
Vamos lá?
Bom, para explicar de uma maneira mais fácil, o melhor seria usando o Bloco de Notas, para depois passar para seu layout do blogger, então abra o seu aplicativo e siga as instruções abaixo antes de começarmos a criar o nosso menu:
Com o Bloco de Notas aberto, crie essas duas tags:
Agora vamos salvar criando uma página "falsa" para que possamos visualizar os resultados. Clique em Arquivo > Salvar como. Na janela que abrir, escolha o destino que você quer salvar seu arquivo. No nome do arquivo, digite meumenu.html. Você é obrigado a colocar .html no final, senão não irá funcionar. Em Tipo, coloque a opção Todos os Arquivos e em Codificação, coloque a opção UTF-8. Clique em Salvar.
Nossa "página falsa" foi criada. Então, agora, podemos começar a criar nosso menu.
Vá até a tag <body>, pule uma linha e digite o que está abaixo:
<a href="link" id='meumenu'>Título</a>
Você acaba de criar um link. Será nele que criaremos o nosso menu. Crie mais dois links como esse e mude o Título para o nome das páginas que você usará em sua sidebar. Eu usarei Home, About e Ask. Ah! E se você quiser colocar mais links depois, é só copiar e colar novamente quantas vezes você precisar.
Sabe o "id" ali no meio da tag de link? Ele é conhecido como um Seletor de Elemento ID, mas vou explicar sobre ele mais pra frente. Apenas lembre-se do nome que você colocou ali entre as aspas, ok? Ele será muito importante para personalizar seu menu. Por enquanto, use o mesmo que eu usei (meumenu) para que não haja dúvidas ou erros mais para frente.
Abra a "página falsa" que criamos. Se não estiver faltando nada, seu menu ficará dessa forma:
Muito bem, agora nós vamos personalizá-lo!
Vá até a tag <style>, pule uma linha e digite o que está abaixo:
#meumenu {
}
Mas o que é isso? Isso, meu amigo, é um Seletor de ID que mencionei lá em cima. Esse tipo de seletor é usado para marcar elementos únicos com um ID em suas páginas. Resumindo, Se você quiser personalizar apenas o menu, ele irá personalizar apenas o menu, entendeu?
Para ficar um pouco mais claro, vou adicionar uma informação aqui: Há um outro tipo de seletor, chamado Seletor de Classe, onde você cria apenas um nome para o seletor, mas poderá usar as informações nele contidos quantas vezes forem necessárias na sua página. E essa parte que expliquei agora você pode esquecer, pois não vamos usá-la para criar nosso menu, só foi uma informação a mais para que você pudesse entender como funciona o Seletor de ID.
Para que o Seletor de ID funcione, você é obrigado a usar o "hashtag" antes do nome da sua ID. E esse nome precisa ser O MESMO que você usou no ID do link, senão não irá funcionar. Por isso eu usei o nome meumenu.
Antes de você colocar uma corzinha no seu menu, você precisa adicionar uma propriedade nele: o float.
O float é meio imprevisível às vezes, e te gera uma baita dor de cabeça quando você está criando um site, mas nesse caso, acredito que não dará problema nenhum - pelo menos, no meu caso, não deu. Ele é uma propriedade que faz o objeto "fluturar" à esquerda ou à direita do restante do conteúdo, ou seja, ele garantirá que seus links fiquem um ao lado do outro em seu layout.
Então, vamos lá: Após o início das chaves ( { ), pule uma linha e digite:
float:left;
background:#069; /* Cor do fundo do menu */
margin: 1px; /* Espaço entre os menus */
width: 60px; /* Largura dos Menus */
font-size: 12px; /* Tamanho da fonte */
color:#FFF; /* Cor das letras */
text-align:center; /* Centralizar letras */
text-decoration: none; /* Traçado embaixo do link */
Deixei especificado na frente o que cada propriedade significa para facilitar para vocês. Não se esqueçam de colocar ";" no final de cada linha, senão o comando não irá funcionar!
Salve e atualize a "página falsa". O resultado será esse:
Você pode deixar seu menu dessa forma mesmo, mas eu particularmente gosto de colocar mais uma propriedade para que o espaço interno de cima e de baixo do link fique maior. Vou ensinar aqui para vocês como faz. Essa parte é opcional.
O padding define o espaço entre a bora e o conteúdo de um elemento. Seria como uma "margem para dentro" de um determinado elemento. Vamos supor que você cria um box em uma página e escreve um texto nele. Quando você visualizar na web, o texto estará colado à margem desse box e ficará visualmente feio. Se você usar a propriedade padding, será criado um espaço em branco entre o texto e a borda do box.
Para explicar de uma maneira mais simplificada, seria isso aqui:
Então vamos colocar um "espacinho" no nosso menu. Pule uma linha depois do ";" de "text-decoration" e digite o que está abaixo:
padding-top: 3px; /* Espaçamento interno - cima */
padding-bottom: 3px; /* Espaçamento interno - baixo */
Salve e atualize a "página falsa". Seu menu ficará dessa forma:
Pronto, agora está do jeito que eu gosto. Lembrando que essa parte é opcional, você não precisa fazê-la. Você também pode mudar os valores, caso ache necessário.
E nossos códigos ficaram assim até o momento:
Mas esse menu está meio morto, não acham? Já sei! Vamos colocar um efeito hover nele, onde ao passar o mouse, a cor do fundo mude. Vai ficar show!
Após o final das chaves ( } ), pule duas linhas e digite o que está abaixo:
#meumenu:hover {
}
Você criou o mesmo seletor, mas dessa vez com o comando hover, que dará o efeito citado antes.
Agora, coloque o mouse depois das chaves abertas ( { ) e pule uma linha. Digite o que está abaixo:
background: #000; /* Cor do fundo hover */
color: #fff; /* Cor das letras hover */
Salve. Abra a "página falsa" e veja o resultado.
Bem, seu menu está pronto! Agora vamos colocá-lo na sua sidebar.
No painel do seu blog, vá para Layout. Adicione um gadget de HTML/Javascript. Habilite a função de HTML do gadget clicando em Editar HTML que fica no canto superior direito da caixa de texto. Cole APENAS os códigos de links que você criou. Ficará assim:
Salve. Agora vá em Modelo > Editar HTML. Clique em qualquer lugar do HTML e aperte CTRL+F. Na caixa de busca que aparecer, digite ]]></b:skin>. Agora você copia os códigos que você criou que estão entre as tags <style> e </style> (sem copiar essas tags) e cole antes de ]]></b:skin>. Assim:
Salve e visualize seu blog. No meu caso, a largura que coloquei de 60px para meu menu ficou pequena, então aumentei para 84px para ficar do tamanho da sidebar. Vocês podem modificar essa parte também caso acharem necessário.
Pronto! Está feito o seu menu! Acharam difícil? Em caso de dúvidas é só perguntar nos comentários.
Até mais!
Nenhum comentário:
Postar um comentário