Primeiro Nao Tire meus Creditos
Tá ae o tutorial que me pediram de como colocar
menu igual da the
Autor:Matheus Andrade
Categoria:Tutoriais
Olá Galerinha Hoje Vol Encinar Vocês Como Por Esse Menu A Hover De Imagens no
Blogger
Primeiro De CTRL + F e Digite
]]></b:skin>
Depois de Encontrar Logo Acima Adicione esse Codigo:
/*-----Menu Imagem-----*/
#menuimagem{
width:900px;
height:500px;
display:block;
position:absolute;
margin:395px 0 0 30px;
}
#home {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Inicio%201.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#home:hover {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Inicio_Houver.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#HOME{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 20px;
}
#contato2 {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Contato.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#contato2:hover {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Contato_Houver.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#CONTATO2{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 200px;
}
#parceria {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Parceria.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#parceria:hover {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Parceria_Houver.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#PARCERIA{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 380px;
}
#anuncie {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Anuncie.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#anuncie:hover {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Anuncie_Houver.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#ANUNCIE{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 560px;
}
#equipe {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Pedido.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#equipe:hover {
background:url(http://dl.dropbox.com/u/34726796/Design_Fantastics/Pedido_Houver.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#EQUIPE{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 741px;
}
Depois Vamos Para Segunda parte
Vocês Vão Adicionar esse Codigo Abaixo da tag:
<body>
<div id='menuimagem'>
<div id='HOME'>
<a href='Seu Link aki' id='home' title='Volte Para a Pagina Inicial'/>
</div>
<div id='CONTATO2'>
<a href='Seu Link aki' id='contato2' title='Entre em Contato !'/>
</div>
<div id='PARCERIA'>
<a href='Seu Link aki' id='parceria' title='Faça Parceria !'/>
</div>
<div id='ANUNCIE'>
<a href='Seu Link aki' id='anuncie' title='Faça Sua Propaganda !'/>
</div>
<div id='EQUIPE'>
<a href='Seu Link aki' id='equipe' title='Faça Seu Pedido !'/>
</div>
<div id='FAQ'>
<a href='bleachxd@live.com/' id='faq' title='Dúvidas ? Retire - a Agora mesmo !'/>
</div>
</div>
Nenhum comentário:
Postar um comentário