13 de dez. de 2011

Avatar

Tutorial - Menu Hover


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='http://imegacreate.blogspot.com/' id='home' title='Volte Para a Pagina Inicial'/>
</div>
<div id='CONTATO2'>
<a href='http://imegacreate.blogspot.com/' id='contato2' title='Entre em Contato !'/>
</div>
<div id='PARCERIA'>
<a href='http://imegacreate.blogspot.com/' id='parceria' title='Faça Parceria !'/>
</div>
<div id='ANUNCIE'>
<a href='http://imegacreate.blogspot.com/' id='anuncie' title='Faça Sua Propaganda !'/>
</div>
<div id='EQUIPE'>
<a href='http://imegacreate.blogspot.com/' id='equipe' title='Faça Seu Pedido !'/>
</div>
<div id='FAQ'>
<a href='http://imegacreate.blogspot.com/' id='faq' title='Dúvidas ?  Retire - a Agora mesmo !'/>
</div>
</div>
E-mail Del.ici.ous BlogThis! Technorati Compartilhe no Twitter StumbleUpon Compartilhar no Facebook Promova este post no orkut Share to Google Buzz

0

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p