Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Gildo Kaldorana dice...

Me gusta, es sencillo pero esta muy bien. A lo mejor lo pongo en el blog.
Muchas gracias.
Un saludo

Jaime Trujillo Escobedo dice...

Sencillo y minimalista, Gildo Kaldorana, así es ;). En tu blog quedaría muy bien (ya que el fondo es blanco) aunque te comento que estoy fabricando nuevos diseños... por si te gustan más ☺.

¡¡Saludos!!

Anónimo dice...

me gustan kiero kompra 1 pareja

Jaime Trujillo Escobedo dice...

Anónimo, ¿Qué es lo que te gusta? te comento que yo no vendo nada :S.

Marcus dice...

Hola Jaime!
En esto de los menus hay una cosa que no entiendo, los enlaces que quieren decir? Que por ejemplo si tu pones un enlace de un post te saldrá el título de el post en el menú y tú puedes acceder al post des de el menú? O si quieres poner las etiquetas y los nombres de los posts de esas etiquetas podrás acceder a ellos mediante el enlace?
Con esto me ago un lío, me podrías ayudar?
Gracias.

Jaime Trujillo Escobedo dice...

Marcus, un menú es una especie de lista de enlaces.

Esos enlaces pueden conducirnos a otras páginas web o blogs, así como a páginas dentro de un mismo sitio web.

Puedes poner un enlace que diga "Perros" e incluir la URL (dirección) de la etiqueta perros (que puedes conseguirla haciendo clic con el botón derecho del ratón encima de la etiqueta que aparece al pié de las entradas y copia la dirección del enlace).

Para conseguir la url de una entrada, haz lo mismo (clic con el botón derecho del ratón encima de la etiqueta que aparece al pié de las entradas y copia la dirección del enlace) que antes y pon el título que quieras en el menú.

Si necesitas más ayuda dímelo ☺.

Marcus dice...

Gracias Jaime! :D Ahora lo entiendo!
Una cosilla... Estaba intentando poner el menú desplegable con niveles i subniveles y cuando iba ya por buscar la segunda línea de HTML (después de poner el código de el menú) el buscador no me lo encontraba, por que puede ser?

Jaime Trujillo Escobedo dice...

Marcus, no te preocupes, la línea puede tener otro nombre.

¿En qué blog deseas poner el menú?

¿Te refieres a esta línea?...

<div id='content-wrapper'>

Necesito saber eso para poder ayudarte ;).

Marcus dice...

Es esa línea. De el blog principal, aunque en el otro me gustaría poner algo. Pero no este menú.

Jaime Trujillo Escobedo dice...

Marcus, entonces busca esta línea:

<div id="main-wrap1">

Y encima pega el código del menú.

¿En el otro blog quieres poner un menú? Si es así, puedes elegir otros modelos en dicha categoría.

Marcus dice...

Gracias Jaime!
Probaré como ha ido.
Por cierto, ¿por que a veces cuando publico un comentario, tarda un poco en salir en tu blog?
Es solo una curiosidad.

Marcus dice...

Hola Jaime.:(
Sigue sin aparecer. A mi me sale en vez de content, crosscol. Si no es ninguna molestia, podría decirte mi contraseña, y si quieres, podrías mirar mi plantilla.

Jaime Trujillo Escobedo dice...

Marcus, los comentarios no es que tarden en aparecer sino que re guardan en mi Escritorio. Tengo habilitado la opción de "moderar comentarios", lo que me permite publicarlos o rechazarlos (no editarlos).

Casi siempre intento publicarlos y responder lo antes posible.

En cuando a lo de la plantilla, no me des la constraseña (nunca acepto este tipo de datos).

Puedes mandarme la plantilla en un documento de word a mi correo.

Para copiar la plantilla, ve a Diseño > Edición de HTML y marca la casilla "expandir plantilla de artilugios.

Copia todo el código e insértalo en el documento ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo