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*/
#buscaemenu {
}
#menuimagem {
float:right; Indica o lado que ele vai Flutuar ou seja ficar delete essa parte
margin:0 0px 0 0px;
margin-left:400px; o quanto o menu ira ficar para esquerda
margin-top:-100px; a altura que ele vai ficar depois delete essa parte
z-index:2;
position:absolute;
}
#themes {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat 0px -70px;
height:70px;
float:left;
margin:0;
padding:0;
width:121px;
}
#themes:hover {
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat 0px 1px;
}
#renders {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -121px -70px;
height:70px;
float:left;
margin:0;
padding:0;
width:171px;
}
#renders:hover {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -121px 1px;
height:70px;
float:left;
margin:0;
padding:0;
width:171px;
}
#tutoriais {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -292px -70px;
height:70px;
float:left;
margin:0;
padding:0;
width:130px;
}
#tutoriais:hover {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -292px 1px;
height:70px;
float:left;
margin:0;
padding:0;
width:130px;
}
#utensilios {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -423px -70px;
height:70px;
float:right;
margin:0;
padding:0;
width:115px;
}
#utensilios:hover {
display:block;
background:url(http://dl.dropbox.com/u/18943078/The/Fundo%20Menu.png) no-repeat -423px 1px;
height:70px;
float:left;
margin:0;
padding:0;
width:115px;
}
Depois Vamos Para Segunda parte
Vocês Vão Adicionar esse Codigo Abaixo da tag:
<body>
<div id='menuimagem'>
<a href='http://thecreatos.blogspot.com/search/label/Templates' id='themes' target='_blank'/>
<a href='http://thecreatos.blogspot.com/search/label/Renders' id='renders' target='_self'/>
<a href='http://thecreatos.blogspot.com/search/label/Tutoriais' id='tutoriais' rel='nofollow' target='_blank'/>
<a href='http://thecreatos.blogspot.com/search/label/Utens%C3%ADlios' id='utensilios' rel='nofollow' target='_blank'/>
</div>
Nenhum comentário:
Postar um comentário