Como provavelmente leram no título da postagem, eu sou o novo postador do blog. Prazer, me chamo Fernando, porém, podem me chamar de Lanx.
Postarei diversos tutoriais, entre eles:
Tutoriais de menu, tutoriais de CSS, tutoriais de design gráfico (imagens em geral), entre outros.
Nesta primeira postagem, ensinarei a fazer um
rodapé com
submenu. (Um exemplo pode ser visto em meu
blog de testes.
)
Etapa 1 : O rodapé
Crie um rodapé com as seguintes dimensões:
982 x 125 (982 pixels de largura e 125 pixels de altura.) Personalize-o como quiser. No meu caso, colocarei um fundo do CP e dois pinguins.
(Clique para ampliar)
Etapa 2 : O "Fundo do menu"
Faça um "Retângulo com borda arredondada", que chamaremos de "Fundo do menu" com as dimensões 450 x 89 (450 pixels de largura e 89 pixels de altura). Mais uma vez, personalize-o como quiser, porém sem alterar as medidas. O "Fundo do menu" deverá estar a 259 px da borda esquerda (<<) e 17 px da borda superior (borda de cima, para quem não sabe).
(Clique para ampliar)
Etapa 3 : O Gadget
Hospede a imagem em um host qualquer (
recomendo imgur.com ou imageshack.us) e pegue o
link direto (
Direct Link).
Coloque-o normalmente no rodapé, como se fosse um
fundo qualquer. Em seguida, crie um
gadget de HTML na parte
mais a baixo do layout (o footer).
(Clique para ampliar)
Etapa 4 : O código
Agora, vamos configurar o código na página de edição de HTML do blog. Primeiramente, aperte ctrl+f e procure por "footer-wrapper" (sem aspas). Em seguida, copie a ID do último gadget.
Agora, aperte ctrl+f novamente, e procure por "]]></b:skin>" (sem aspas) e logo acima, cole o seguinte código, substituindo IDDOWIDGET pela ID obtida :
/*Configurações do Menu Secundário */
#IDDOWIDGET {
width: 450px;
margin-left: 250px;
font-size: 16px;
}
Após colocar tal código em seu HTML, volte para a página de gadgets. No gadget criado, coloque o seguinte código, substituindo
www.linkdoseublog.blogspot.com pela respectiva página de seu blog :
<br />
<center>Nome do seu blog. Todos os direitos reservados.<br />
Designed by: Nome do designer.
<br />
Versões : <a href='http://linkdoseublog.blospot.com'>Clássico</a> || <a href='http:/linkdoseublog.blogspot.com/?m=1'>Celular</a><br />
<a href='http://www.linkdoseublog.blogspot.com'>Home</a> <a href='http:// www.linkdoseublog.blogspot.com'>Equipe</a> <a href=' www.linkdoseublog.blogspot.com '>Contato</a> <a href=' www.linkdoseublog.blogspot.com '>Parceria <a href=' www.linkdoseublog.blogspot.com '>Sobre</a> <a href='http://play.clubpenguin.com/pt/'>Jogar</a></a></center>
Agora, basta salvar o widget, visualizar, e pronto! Gostaram do tutorial? Dúvidas? Comente para sabermos sua opinião sobre este menu!
e vá em Filters, PhotoShop Live Effects e aplique Stroke. Acompanhe pelas imagens:
