Sensual Menu: Menú CSS para Blogger+PSD Incluída

Sensual Menu es un menú CSS para Blogger diseñado por mí para Ayuda Bloggers. Es un menú bastante elegante, en distintas variaciones de colores y además es un menú que es fácilmente personalizable.

• Este pack incluye 3 colores, los que puedes apreciar en la imagen superior. 
• Incluye también la plantilla en formato PSD (Adobe Photoshop).

Información del contenido:

• Autor: Cloudx18
• Página Principal: Ayuda Bloggers
• Licencia: Creative Commons Attribution
• Tamaño del archivo: 31.7KB

Recuerda que puedes compartir el contenido, pero recuerda siempre citar la fuente.

¿Cómo añadirlo a Blogger?:

Paso 1: Añadiendo CSS:

Vamos a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios''. Buscamos la siguiente línea:

]]></b:skin>

Arriba de ésta, pega el siguiente código:

/*** Sensual Menu CSS Ayuda Bloggers ***/
#sensualmenu_wrapper {
margin: 0px auto;
margin-bottom:50px;
width:100%;
height:80px;
background: url(http://3.bp.blogspot.com/-leTXsrFAs3M/TdH8XfuEoJI/AAAAAAAAA7k/2H5LBkXXcQA/s1600/CSS+Marino.png) no-repeat center;
}
#sensualmenu {
text-shadow: 0px 1px 3px #c0c0c0;
margin:0 auto;
width:830px;
height:35px;
padding-top:5px;
}
#sensualmenu ul {
width:auto;
list-style-type:none;
display: inline;
height:40px;
}
#sensualmenu ul li{
display:block;
display: inline;
}
#sensualmenu ul li a{
margin-top:15px;
background:none;
display:block;
float:left;
display: inline;
color:#000000;
font-family:'Trebuchet MS', Trebuchet, Arial, Verdana;
font-size: 14px;
text-decoration:none;
padding:5px 10px 0 20px;
height:19px;
text-shadow:1px 1px 1px $bgcolor;
}
#sensualmenu ul li a:hover, #menu_navi_bottom ul li a:visited{
color:$titlecolor;
text-shadow: 1px 1px 1px $bgcolor;
}

Paso 2: Añadiendo el menú:

Ahora busca la siguiente zona de tu plantilla:

<div id='content-wrapper'>

Arriba de ésta, pega el siguiente código:

<div id='sensualmenu_wrapper'>
<div id='sensualmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Inicio'>Inicio</a></li>
<li><a href='#' title='Título Enlace'>Enlace 1</a></li>
<li><a href='#' title='Título Enlace'>Enlace 2</a></li>
<li><a href='#' title='Título Enlace'>Enlace 3</a></li>
<li><a href='#' title='Título Enlace'>Enlace 4</a></li>
<li><a href='#' title='Título Enlace'>Enlace 5</a></li>
<li><a href='#' title='Título Enlace'>Enlace 6</a></li>
<li><a href='#' title='Título Enlace'>Enlace 7</a></li>
<li><a href='#' title='Título Enlace'>Enlace 8</a></li>
</ul>
</div>
</div>