Menu de Categoria Opacity Effect Hover

  • 11:32
  • 01 maio 2016


Primeiro tutorial do blog com um lindo e simples menu de categoria com imagens. Dá pra usar ele acima das postagens (cabeçalho) ou no próprio gadget na sidebar, fica na sua preferência. também vou deixar 1 psd (photoshop) pra vocês baixarem e editarem, as imagens do menu peguei no site Flaticon. Se quiser algum tutorial é só pedir nos comentários ou no chat do blog. Farei o que estiver ao meu alcance..!



Menu acima dos post
1. No Modelo => Editar Html cole acima de }]]></b:skin> o código à seguir:

.opacit-e {
text-transform: uppercase;
float: left;
padding-left: 40px;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opacit-e a {
color: #000;
font-size: 12px;
font-weight: 500;
font-family: sans-serif;
display: inline-block;
width: 77px;
}
.opacit-e a:hover {
color: #CCC;
}
.opacit-e img {
width:77px;
}
.opac {
alpha(Opacity=99);
opacity:0.99;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opac a {
alpha(Opacity=99);
opacity:0.99;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opac:hover a {
alpha(Opacity=30);
opacity:0.30;
}
.opac a:hover {
alpha(Opacity=90);
opacity:0.90;
}

2. No blog de teste eu coloquei o html abaixo do </header> mas se quiser que fique acima do título coloque acima de <header>.

<center>
<div class='opac'>
<div class='opacit-e'>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/FR8o6emzi/web.png'/>Web</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/SGfo6en0m/make.png'/>Make Up</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/Xjfo6en10/looks.png'/>Looks</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/QrUo6en1g/fotos.png'/>Fotos</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/dL8o6en20/musica.png'/>Músicas</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/43po6en2g/videos.png'/>Videos</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/yl0o6en2s/livros.png'/>Livros</a></div>
<div class='opacit-e'><a href='LINK'><img src='http://static.tumblr.com/pfobaef/D7So6en35/receitas.png'/>Receitas</a></div>
</div>
</div>
</center>

Menu no Gadget "Sidebar"
1. É basicamente o mesmo código, mas com algumas modificações, então cole acima do }]]></b:skin>

.opacit-e {
text-transform: uppercase;
float: left;
padding:0px 0 5px 18px;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opacit-e a {
color: #000!important;
font-size: 12px;
font-weight: 500;
font-family: sans-serif;
display: inline-block;
width: 77px;
}
.opacit-e a:hover {
color: #CCC!important;
}
.i-opa img {
width:52px;
}
.opac {
alpha(Opacity=99);
opacity:0.99;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opac a {
alpha(Opacity=99);
opacity:0.99;
transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.opac:hover a {
alpha(Opacity=30);
opacity:0.30;
}
.opac a:hover {
alpha(Opacity=90);
opacity:0.90;
}

2. E agora é ir no Layout => Adicionar um Gadget e escolher HTML/JavaScript e cole dentro o código abaixo:

<center>
<div class='opac'>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/FR8o6emzi/web.png'/>Web</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/SGfo6en0m/make.png'/>Make Up</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/Xjfo6en10/looks.png'/>Looks</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/QrUo6en1g/fotos.png'/>Fotografia</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/dL8o6en20/musica.png'/>Músicas</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/43po6en2g/videos.png'/>Videos</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/yl0o6en2s/livros.png'/>Livros</a></div>
<div class='opacit-e'><a href='/'><img src='http://static.tumblr.com/pfobaef/D7So6en35/receitas.png'/>Receitas</a></div>
</div>
</center>

Espero que gostem. Bjs e até à próxima de muitos tutoriais..!

Compartilhe

Veja Também:

Comentário(s)
0 Comentário(s)