Menú pointy arrow

Hace tiempo se puso de moda un estilo de menú que daba un efecto muy especial. Al pasar el cursor por un enlace, debajo o encima de éste aparecía una flechita o una esquina doblada.

Se me ocurrió fabricar un menú con un diseño similar...

Ponerlo en tu blog es muy sencillo, simplemente debes seguir los pasos que voy a mostrarte.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:

/*--- Menu pointy arrow ---*/

* html #menu {
float:left;
height:1%;
}

#menu {
overflow:hidden;
padding: 25px 0 20px;
clear:both;
background: #ffffff;
}

#menu .enlaces {
float:left;
text-decoration: none;
background: transparent;
}

#menu .enlaces li {
font-family: verdana,sans-serif;
font-weight: normal;
display: inline;
float:left;
text-decoration: none;
border-right: 1px solid #cccccc;
height: 24px;
letter-spacing:-1px;
}

#menu .enlaces li a {
float: left;
text-decoration: none;
padding:6px 8px 10px;
}

#menu .enlaces ul {
float:left;
text-decoration: none;
border-left: 1px solid #cccccc;
}

#menu .enlaces li ul li {
font-weight:400;
letter-spacing:normal;
}

#menu .enlaces li a:hover {
text-decoration:none;
background: #006699 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBA4WpcGMhXfAy-DPCLyJSkntTvg3yua7Xywb8aieRJV69dSP014qbL1ElCI4Kh83S76A72q2O4CKqwB2BqmyLi3mKettvMDklCfkkU_jZK1J9ate5ky2ELjUcXUXM4FJbznY5c1570k/s1600/pages-bot.png) no-repeat bottom center;
color: white;
}

#menu .enlaces .current_page_item .page_item a:hover {
background: #006699 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhii4RrHLryOR7l89W6-BoOomBdyCsujH21JnZD-3kyHkL2f5Qv1j4ZJkN-7tWFTMsPQ5s3wwXUuxxQJifPDWjxEKWLs1WSsHuX4me2tLw8kI1Hitrb9AbeK8UoYeRCRNYr_0zIWLCCCgA/s1600-r/flechabalcn.png) no-repeat bottom center;
color: #ffffff;
}

#menu .enlaces .current_page_item a, #menu .enlaces .current_page_item a:visited, #menu .enlaces .current_page_item a:hover {
color:#ffffff;
text-decoration:none;
background: #14a958 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhii4RrHLryOR7l89W6-BoOomBdyCsujH21JnZD-3kyHkL2f5Qv1j4ZJkN-7tWFTMsPQ5s3wwXUuxxQJifPDWjxEKWLs1WSsHuX4me2tLw8kI1Hitrb9AbeK8UoYeRCRNYr_0zIWLCCCgA/s1600-r/flechabalcn.png) no-repeat bottom center;
}

#menu .enlaces .current_page_item .page_item a, #menu .enlaces .current_page_item .page_item a:visited {
text-decoration:none;
background: #ffffff;
color: #cccccc;
}

/*--- Fin del menu pointy arrow ---*/

Puedes editar algunas características del menú:

- El color de fondo del primer enlace (el de inicio): Busca la línea de color naranja y cambia #14a958 por el código de tu color favorito ^[+].

- El color de fondo de los enlaces al pasar el cursor por encima: Busca la línea de color verde y cambia #006699 por el código de tu color favorito ^[+].

- La fuente de texto de los enlaces: Busca la línea font-family: verdana,sans-serif; y cambia verdana,sans-serif por la fuente que desees (por ejemplo, Comic Sans MS).

Una vez hayas terminado de personalizar la barra de navegación guarda la plantilla:




Para terminar, vamos a incluir los enlaces.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega esto:

<div id='menu'>
<div class='enlaces'>
<ul>
<li class='current_page_item'><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
<li class='page_item page-item'><a href='URL DE LA PAGINA'><span>TITULO</span></a></li>
</ul>
</div>
</div>

Sustituye en cada caso URL DE LA PAGINA por la dirección de tu enlace (por ejemplo, http://google.es/) y TITULO por la palabra o texto con la que se mostrará el enlace.

Una vez incluidos los enlaces con sus respectivos títulos, podrás guardar el gadget y disfrutar de tu menú pointy arrow.