Menu Simples Elegante

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA07gfqx6UHxl16610mYeCNw85OOGrAeurYuP2wvfxFiSdFKrhZMy9NVi9OFmiEdeUMPA_zZlbJUw5yg_9y_TVjrI3ngMCl5rcYwNH8cwE6YUIMJiITEwYvpc_O6_mOsBFdUk97R7hqdE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCU-6l9Nm2ZTnE74H4eIX7fXsS1QLcuOFnxItZ8gmqT5VNbSSDjmV3_x1EzWf-rKRCvnT_jrE4HSxF4ukwcZz8wPKGWr_tYDi3ixcOndHdkP62g7I-6MfZbGi1yOkPGON9h2cTcW8rXwc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEhOYsGfX3lon2DIjHE1ECdZ5dXe07Fn9fOrzIucWUvZJ_gSJd-oNwB6BvqMESyjoFilf7-UKasftMKGEXZMEshNJqyOVPrGmkZVqJoiM-xSI2JCo-wdO8m6xc6CN1wnIQ8dPuR5YNx4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcp4E6xsEpoATYLgs6d8syM_9ArRYuO6uupMr1UIT_ktdYCLubkjFUeHm3NWhDSh7WOPWWzCU980U-9-J87meFiptNZ60ct1j9UJaz5D_Lt8x1UT51AxvoDhcNsvgEqBZjS3xo0EC2oas/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUXcgqLF04ZYzpGsSQS_fp9xqYJxt3UIQWoer6E53YaTvPMDP17Wh1LYWWbf8dFK0K4KOn2NMyuzYk6fBEltKA6mhsREvDUkj_vwqmQIPhgCB1U6-k-y0XXNM_CZNmIDT4j3EZV0qhR4Yy/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!!!