.

terça-feira

Textual description of firstImageUrl

Menu Simples Elegante

ACESSOS:
Deixe seu comentário


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
RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}