.

terça-feira

Menu Simples Elegante

ACESSOS:
AQUI

Nesta postagem compartilho com vocês este menu bem simples, porém, bem prático para aqueles que não gostam de muita extravagância.






Para colocar em seu blog...... Entre em "Modelo" - "Editar HTML" e procure pela tag
]]></b:skin>
Tendo encontrado a tag, basta colocar ACIMA dela o seguinte código
/* MENU SIMPLES ELEGANTE BY DICASHOT */
#menu {
width:520px;
padding-bottom: 59px;
margin: 0 auto;
}
.m1 {
background: url(http://4.bp.blogspot.com/-RgJFCJEHtE0/UGv0LSmu8uI/AAAAAAAANkM/0aluVW4dGPQ/s1600/home.png) no-repeat;
background-position: 0px 10px;
width: 127px;
height: 59px;
position: absolute;
color: #cc3300;
font-family: 'Viga', sans-serif;
text-shadow: 1px 1px 2px #807f7f;
text-align:center;
font-size: 20px;
line-height: 75px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m1:visited {
color: #cc3300;
}
.m1:hover {
color: #6d6969;
background-position: 0px 0px;
line-height: 65px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m2 {
background: url(http://4.bp.blogspot.com/-KL0paxeGd7o/UGv0LEJv8OI/AAAAAAAANkE/D-4oOU9HWAI/s1600/contato.png) no-repeat;
background-position: 0px 10px;
width: 141px;
height: 59px;
position: absolute;
color: #cc3300;
font-family: 'Viga', sans-serif;
text-shadow: 1px 1px 2px #807f7f;
text-align:center;
font-size: 20px;
line-height: 75px;
margin-left: 117px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m2:hover {
color: #6d6969;
background-position: 0px 0px;
line-height: 65px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m3{
background: url(http://2.bp.blogspot.com/-AWHGhuNQyWo/UGv0O8LcLaI/AAAAAAAANkc/mBlNi0njOZc/s1600/parceria.png) no-repeat;
background-position: 0px 10px;
width: 144px;
height: 59px;
font-family: 'Viga', sans-serif;
text-shadow: 1px 1px 2px #807f7f;
position: absolute;
text-align:center;
color: #cc3300;
font-size: 20px;
line-height: 75px;
margin-left: 248px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m3:hover {
color: #6d6969;
background-position: 0px 0px;
line-height: 65px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m4{
background: url(http://3.bp.blogspot.com/-ThFEuio9SAQ/UGv0Kgdd9oI/AAAAAAAANj8/nK3gsRgNs5A/s1600/anuncie.png) no-repeat;
background-position: 0px 10px;
width: 138px;
height: 59px;
position: absolute;
text-align:center;
color: #cc3300;
font-size: 20px;
font-family: 'Viga', sans-serif;
text-shadow: 1px 1px 2px #807f7f;
line-height: 75px;
margin-left: 382px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m4:hover {
color: #6d6969;
background-position: 0px 0px;
line-height: 65px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m5{
background: url(http://1.bp.blogspot.com/-ljoVhPxBPW4/UQW797AXyCI/AAAAAAAALy4/aGvntm8cKWs/s1600/leitores.png) no-repeat;
background-position: 0px 10px;
width: 126px;
height: 59px;
position: absolute;
text-align:center;
font-size: 20px;
color: #cc3300;
line-height: 75px;
margin-left: 510px;
font-family: 'Viga', sans-serif;
text-shadow: 1px 1px 2px #807f7f;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
.m5:hover {
color: #6d6969;
background-position: 0px 0px;
line-height: 65px;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-moz-transition: all 0.3s ease-out;
}
Tendo feito isto, está finalizada esta parte. Salve e feche.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:
<div id='absolute'><div id='menu'>
<a class='m1' href='/'>HOME</a>
<a class='m2' href='/p/contato.html'>CONTATO</a>
<a class='m3' href='/p/parceria.html'>PARCERIA</a>
<a class='m4' href='/p/anuncie.html'>ANUNCIE</a>
</div></div>
Tendo feito isto, está pronto seu menu!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade