Tutoriales

Menú desplegable con jQuery Superfish en Blogger

Publicado por Claudia en Octubre 30, 2011

Tiempo atrás les hablaba de un tutorial para crear menús desplegables sólo con CSS. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de implementar, basada en los menús desplegables de las plantillas de Premium Blogger Templates. Este menú usa el plugin jQuery Superfish, y debiese funcionar bien para todos.

Agregando un menú desplegable a tu plantilla Blogger, paso a paso

1. Carga la última versión de jQuery

Si no tienes jQuery en tu plantilla, puedes cargarlo directamente desde Google, incluyendo la siguiente línea de código en la Edición de HTML de tu plantilla (todos los cambios se harán allí mismo), justo antes de </body>:

1
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

2. Agrega Superfish

Sigue leyendo

Tags: ,
Blogger

Añadir enlaces externos al menú de páginas de Blogger

Publicado por Claudia en Agosto 16, 2011

Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo “PageList” (páginas) por un “LinkList” (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.

La creación de páginas estáticas de Blogger siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de Páginas sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.

Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: Luis Gray anuncia que ya es posible añadir enlaces externos en un widget de páginas de Blogger.

Cómo hacerlo, paso por paso:

1. En Diseño/Elementos de la página, añadir un widget de Páginas en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.

2. Ve a Blogger in Draft, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a Páginas /Página nueva / Dirección Web.

Ahora, sólo agrega tu enlace, como se muestra a continuación:

Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.

Tags: , , ,
Blogger, Herramientas

Pure CSS Menu: Generador de menús desplegables sin javascript

Publicado por Claudia en Enero 27, 2010

Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic.

Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.

Cómo instalar un menú (en Blogger)

El fichero “purecssmenu-com.zip” contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:

1. Abrir el archivo purecssmenu.html. Éste se abre en una nueva pestaña de tu navegador.

2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción “Ver código fuente de la página“. Esos son los correspondientes códigos a ser pegados en la plantilla.


3. El código CSS comprendido entre las etiquetas <style> y </style> (excluidas éstas), debe ser pegado en la Edición de HTML de la plantilla, justo antes de ]]></b:skin>. Guardar los cambios.

4. El código HTML comprendido entre los comentarios <!– Start PureCSSMenu.com MENU –> y <!– End PureCSSMenu.com MENU –> debe ser copiado antes o después del cierre del div ‘header-wrapper‘ (en la plantilla Mínima de Blogger), reemplazando las dobles comillas por comillas simples (). Una manera más simple de hacerlo, es creando un nuevo gadget de HTML/Javascript desde Diseño /Elementos de la página, en la sección llamada “crosscol-wrapper” que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.

5. Como últimos pasos, queda hospedar en tu hosting las imágenes contenidas en la carpeta images y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de pruebas, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:

#crosscol-wrapper { background:#E62E6B; width: 100%;}
Tags: ,