Hace unos días hice una entrada sobre cómo hacer un menú con CSS Tab Designer 2. Ahora les explicaré cómo subir el (o los) menú al blog. Eso sí pongan mucha atención, porque soy medio lela para transmitir conocimiento (o sea, explicar algo) y esto necesita un poco de paciencia. Pero tranquilos, si hasta yo pude hacerlo ustedes también van a poder. Ya verán que cuando se le agarra la práctica no es tan difícil ;)
Nota1: empezaré a partir del último punto visto en la entrada anterior.
Nota2: hagan una copia de seguridad de su plantilla para evitar accidentes y siempre estén pendientes de utilizar la "Vista previa" para ver cómo les va quedando el blog.
En primer lugar, cuando hayamos salvado nuestro menú veremos una serie de archivos. El .txt nos permitirá hacerle cambios al menú. Pero además tendremos otros dos tipos de archivos. Vamos a tener un .html en el que podemos ver el código html que vamos a copiar a nuestro blog. Y además tenemos unas imágenes, creo que por lo general son dos. Estas imágenes están ahí porque el código html las llama para que veamos el diseño del menú como lo queremos. Sin esas imágenes no podemos ver el menú. Este es un screenshot con los archivos que necesitaremos de ahora en adelante. No se alarmen si no ven el .txt en la imagen:
A. SUBIENDO LAS IMÁGENES A UN SERVIDOR
Antes que nada, debemos subir las imágenes a un servidor. Podemos utilizar Photubucket, Glitter-graphics, o una cuenta en geocities. OJO: Antes de utilizar alguno de estos sitios deben abrir una cuenta en ellos. Cuando tengan su cuenta, nada más buscan un botón que diga "Subir" o "Upload". Ahí podrán subir las imágenes que necesiten, solo deben seguir las instrucciones que el sitio les pida.
IMPORTANTÍSIMO: Si lo notaron, las imágenes que tienen en su carpeta dicen algo así como esto:
tableright.gif
tableleft.gif
Esto hace referencia a qué lado van las imágenes y por eso es importante que no olviden el nombre de la imagen. Cuando las suban a un servidor y éste les pida ponerles el nombre, NÓMBRENLAS IGUAL. Así no se les va a dificultar encontrarlas y distinguirlas más rápido, de acuerdo?
En mi caso, subí varias imágenes porque en mi blog hay varios menú de CSS Tab Designer 2. En el siguiente screenshot van a ver cuatro imágenes que subí a Photobucket. Noten que las imágenes mantienen "left" o "right" en su nombre. Es importante mantener esas especificaciones para cuando subamos el código al blog:
***NO cierren la ventana del buscador en el que ven estas imágenes porque las van a ocupar.
B. SUBIENDO EL MENÚ A NUESTRO BLOG
1. Entramos a nuestro panel de Blogger --> Diseño --> Edición HTML. Yo recomiendo usar Mozilla Firefox porque nos facilitará buscar las partes del código en las que vamos agregar nuestro menú.
1.1 Para esto, nada más dan Ctrl + F y se les abrirá una pestañita abajo para que busquen el código.
2. Marcan la casilla que dice "Expandir plantilla de artilugios".
3. Buscamos el código html de nuestro blog que dice así:
4. En la carpeta de nuestra computadora en la que está guardado nuestro menú, abrimos con "Bloc de notas" o "Notepad" el archivo .html En mi caso el archivo se llama "menú.html"
5. En ese archivo, seleccionamos y copiamos el CSS de nuesto menú. El CSS es la hoja de estilo y sin eso no podremos visualizar nuestro menú. Noten que [RESTO DEL CÓDIGO] es lo que está dentro del estilo. Más o menos es algo como esto:
6. Volvemos a la Edición de HTML de nuestro blog y copiamos el código anterior JUSTO ANTES DE:
7. Ahora aquí es donde metemos las imágenes que subimos con anterioridad en un servidor. Si ponen atención, en el código CSS que acabamos de meter en nuestro blog viene una parte que dice más o menos así:
Este código va a cambiar dependiendo del menú que hayan utilizado. Lo importante es que noten que entre paréntesis tenemos esto: ("tableft10.gif") y ("tabright10.gif")
Lo que hay que hacer es cambiar esa parte del código. Por ejemplo:
"tableleft10.gif" lo cambiaremos por la dirección (URL) en la que guardamos el "tableleft" que subimos con anterioridad al servidor. Para eso, primero debemos copiar el URL de la imagen que subimos a nuestro servidor. En photobucket sería algo así:
Cuando copiamos la dirección de la nueva imagen, vamos al código en Edición HTML de nuestro blog y lo cambiamos. El resultado quedaría semejante a esto:
Noten que "tableleft.gif" lo cambié por la dirección en la que está la imagen y, si le ponen atención, al final de la dirección dice algo semejante a "tableleft.gif". Lo mismo con "tableright.gif". Sé que no me estoy explicando al máximo pero el punto de esto es que deben colocar en el CSS del menú la dirección de las imágenes que conforman nuestro menú. Por eso era importante que conservaran el nombre original cuando las renombraran en el servidor: así no se les perdería a la hora de ponerlas en el código html del blog.
8. Si tenemos más menú entonces repetimos el proceso.
9. Todo eso fue solo para poner el estilo de nuestro en el html de nuestro blog. Ahora para terminar de agregar nuestro menú solo hace falta una cosa: meter esa parte del código donde queremos que vaya. En el siguiente screenshot verán la parte del código que es del menú, y que está en el documento que tienen abierto en "Notepad" o en "Bloc de notas. Deben copiarlo.
10. Si quieren poner un menú que vaya justo debajo del banner (como pueden ver en mi blog) deben localizar en "Edición HTML" el siguiente código:
11. JUSTO ANTES DE ESE CÓDIGO van a pegar el menú que quieren que esté debajo del banner. Por ejemplo, pondría algo como esto:
Noten que en el documento que ustedes tienen abierto en "Notepad" o en el "Bloc de notas" viene una etiqueta como ésta:
Eso variará según el diseño del menú que hayan elegido. Ese pedazo de código hace referencia al nombre del diseño que eligieron y NO LO VAMOS A METER EN NUESTRO BLOG porque sino nos saldría como el título del menú y esa no es la idea.
Cuando terminen esto, denle vista previa para ver cómo les está quedando y GUARDEN PLANTILLA.
12. Otra manera muchísimo más sencilla de agregar el menú al blog es por medio de un widget. Sin embargo, si lo hacen así el menú no quedará debajo del banner. Para agregar el menú por medio del widget TIENEN GUARDAR LA PLANTILLA. Cuando la hayan salvado siguen esta ruta: Diseño --> Elementos de página --> Añadir un Gadget --> HTML/JavaScript y copian el código del menú.
En el siguiente screenshot verán cómo tengo los menú en mi blog. Uno está justo debajo del banner, y el otro en un widget que está en la parte superior de la columna principal del blog:
Si tuvimos suerte y yo me di a entender tan bien como me lo propuse, ustedes ya tienen su menú en su blog.
En esta sección, "La autora y sus locuras", notarán que también sale otro menú si dan clic en alguna de las siguientes opciones: "Avisos", "Entretenimiento", "La autora", "Mundo aesiriano". Ése menú también está en un widget...bueno, en realidad en varios. CSS tab Designer 2, hasta donde sé, no nos permite hacer menú interactivos que abran más opciones si damos clic en una pestaña o cosa parecida. Lo que hice para agregar un efecto similar a eso es poner muuuuuuchos widgtes con los menú que quería que aparecieran cada vez que dábamos clic en las opciones anteriores, y que éstos solo fueran visibles cuando abrieran determinada etiqueta en el blog. Es sumamente difícil porque requiere demasiada paciencia para lograrlo, pero sí se puede.
Lo que utilicé fue el código que Rosa da en esta entrada del Escaparate, y decidí que mis widget solo fueran visibles cuando se abre determinada etiqueta. En este blog, hay tantos widgets como etiquetas y eso requiere mucha paciencia y mucho tiempo libre para acomodarlos, ocultarlos y modificarles el html... sí, sé que utilizo mi tiempo en cosas poco productivas ¬_¬
Bueno, espero que la mega-súper-extensa entrada les haya servido. Si tienen dudas, comentarios y e-mail, estoy disponible, pero como se habrán dado cuenta no soy nada buena explicando... por algo descarté por completo Educación entre mis carreras por estudiar, ja, ja.
Nota1: empezaré a partir del último punto visto en la entrada anterior.
Nota2: hagan una copia de seguridad de su plantilla para evitar accidentes y siempre estén pendientes de utilizar la "Vista previa" para ver cómo les va quedando el blog.
En primer lugar, cuando hayamos salvado nuestro menú veremos una serie de archivos. El .txt nos permitirá hacerle cambios al menú. Pero además tendremos otros dos tipos de archivos. Vamos a tener un .html en el que podemos ver el código html que vamos a copiar a nuestro blog. Y además tenemos unas imágenes, creo que por lo general son dos. Estas imágenes están ahí porque el código html las llama para que veamos el diseño del menú como lo queremos. Sin esas imágenes no podemos ver el menú. Este es un screenshot con los archivos que necesitaremos de ahora en adelante. No se alarmen si no ven el .txt en la imagen:
A. SUBIENDO LAS IMÁGENES A UN SERVIDOR
Antes que nada, debemos subir las imágenes a un servidor. Podemos utilizar Photubucket, Glitter-graphics, o una cuenta en geocities. OJO: Antes de utilizar alguno de estos sitios deben abrir una cuenta en ellos. Cuando tengan su cuenta, nada más buscan un botón que diga "Subir" o "Upload". Ahí podrán subir las imágenes que necesiten, solo deben seguir las instrucciones que el sitio les pida.
IMPORTANTÍSIMO: Si lo notaron, las imágenes que tienen en su carpeta dicen algo así como esto:
tableright.gif
tableleft.gif
Esto hace referencia a qué lado van las imágenes y por eso es importante que no olviden el nombre de la imagen. Cuando las suban a un servidor y éste les pida ponerles el nombre, NÓMBRENLAS IGUAL. Así no se les va a dificultar encontrarlas y distinguirlas más rápido, de acuerdo?
En mi caso, subí varias imágenes porque en mi blog hay varios menú de CSS Tab Designer 2. En el siguiente screenshot van a ver cuatro imágenes que subí a Photobucket. Noten que las imágenes mantienen "left" o "right" en su nombre. Es importante mantener esas especificaciones para cuando subamos el código al blog:
***NO cierren la ventana del buscador en el que ven estas imágenes porque las van a ocupar.
B. SUBIENDO EL MENÚ A NUESTRO BLOG
1. Entramos a nuestro panel de Blogger --> Diseño --> Edición HTML. Yo recomiendo usar Mozilla Firefox porque nos facilitará buscar las partes del código en las que vamos agregar nuestro menú.
1.1 Para esto, nada más dan Ctrl + F y se les abrirá una pestañita abajo para que busquen el código.
2. Marcan la casilla que dice "Expandir plantilla de artilugios".
3. Buscamos el código html de nuestro blog que dice así:
4. En la carpeta de nuestra computadora en la que está guardado nuestro menú, abrimos con "Bloc de notas" o "Notepad" el archivo .html En mi caso el archivo se llama "menú.html"
5. En ese archivo, seleccionamos y copiamos el CSS de nuesto menú. El CSS es la hoja de estilo y sin eso no podremos visualizar nuestro menú. Noten que [RESTO DEL CÓDIGO] es lo que está dentro del estilo. Más o menos es algo como esto:
6. Volvemos a la Edición de HTML de nuestro blog y copiamos el código anterior JUSTO ANTES DE:
7. Ahora aquí es donde metemos las imágenes que subimos con anterioridad en un servidor. Si ponen atención, en el código CSS que acabamos de meter en nuestro blog viene una parte que dice más o menos así:
Este código va a cambiar dependiendo del menú que hayan utilizado. Lo importante es que noten que entre paréntesis tenemos esto: ("tableft10.gif") y ("tabright10.gif")
Lo que hay que hacer es cambiar esa parte del código. Por ejemplo:
"tableleft10.gif" lo cambiaremos por la dirección (URL) en la que guardamos el "tableleft" que subimos con anterioridad al servidor. Para eso, primero debemos copiar el URL de la imagen que subimos a nuestro servidor. En photobucket sería algo así:
Cuando copiamos la dirección de la nueva imagen, vamos al código en Edición HTML de nuestro blog y lo cambiamos. El resultado quedaría semejante a esto:
Noten que "tableleft.gif" lo cambié por la dirección en la que está la imagen y, si le ponen atención, al final de la dirección dice algo semejante a "tableleft.gif". Lo mismo con "tableright.gif". Sé que no me estoy explicando al máximo pero el punto de esto es que deben colocar en el CSS del menú la dirección de las imágenes que conforman nuestro menú. Por eso era importante que conservaran el nombre original cuando las renombraran en el servidor: así no se les perdería a la hora de ponerlas en el código html del blog.
8. Si tenemos más menú entonces repetimos el proceso.
9. Todo eso fue solo para poner el estilo de nuestro en el html de nuestro blog. Ahora para terminar de agregar nuestro menú solo hace falta una cosa: meter esa parte del código donde queremos que vaya. En el siguiente screenshot verán la parte del código que es del menú, y que está en el documento que tienen abierto en "Notepad" o en "Bloc de notas. Deben copiarlo.
10. Si quieren poner un menú que vaya justo debajo del banner (como pueden ver en mi blog) deben localizar en "Edición HTML" el siguiente código:
11. JUSTO ANTES DE ESE CÓDIGO van a pegar el menú que quieren que esté debajo del banner. Por ejemplo, pondría algo como esto:
Noten que en el documento que ustedes tienen abierto en "Notepad" o en el "Bloc de notas" viene una etiqueta como ésta:
Eso variará según el diseño del menú que hayan elegido. Ese pedazo de código hace referencia al nombre del diseño que eligieron y NO LO VAMOS A METER EN NUESTRO BLOG porque sino nos saldría como el título del menú y esa no es la idea.
Cuando terminen esto, denle vista previa para ver cómo les está quedando y GUARDEN PLANTILLA.
12. Otra manera muchísimo más sencilla de agregar el menú al blog es por medio de un widget. Sin embargo, si lo hacen así el menú no quedará debajo del banner. Para agregar el menú por medio del widget TIENEN GUARDAR LA PLANTILLA. Cuando la hayan salvado siguen esta ruta: Diseño --> Elementos de página --> Añadir un Gadget --> HTML/JavaScript y copian el código del menú.
En el siguiente screenshot verán cómo tengo los menú en mi blog. Uno está justo debajo del banner, y el otro en un widget que está en la parte superior de la columna principal del blog:
Si tuvimos suerte y yo me di a entender tan bien como me lo propuse, ustedes ya tienen su menú en su blog.
En esta sección, "La autora y sus locuras", notarán que también sale otro menú si dan clic en alguna de las siguientes opciones: "Avisos", "Entretenimiento", "La autora", "Mundo aesiriano". Ése menú también está en un widget...bueno, en realidad en varios. CSS tab Designer 2, hasta donde sé, no nos permite hacer menú interactivos que abran más opciones si damos clic en una pestaña o cosa parecida. Lo que hice para agregar un efecto similar a eso es poner muuuuuuchos widgtes con los menú que quería que aparecieran cada vez que dábamos clic en las opciones anteriores, y que éstos solo fueran visibles cuando abrieran determinada etiqueta en el blog. Es sumamente difícil porque requiere demasiada paciencia para lograrlo, pero sí se puede.
Lo que utilicé fue el código que Rosa da en esta entrada del Escaparate, y decidí que mis widget solo fueran visibles cuando se abre determinada etiqueta. En este blog, hay tantos widgets como etiquetas y eso requiere mucha paciencia y mucho tiempo libre para acomodarlos, ocultarlos y modificarles el html... sí, sé que utilizo mi tiempo en cosas poco productivas ¬_¬
Bueno, espero que la mega-súper-extensa entrada les haya servido. Si tienen dudas, comentarios y e-mail, estoy disponible, pero como se habrán dado cuenta no soy nada buena explicando... por algo descarté por completo Educación entre mis carreras por estudiar, ja, ja.
genial, muy bien explicado n_n
ResponderSuprimirwuau explicas mui bien esta mui padre la explicacion no tenia idea de como poder subir un menu pero aora ya lo se =) mil gracias
ResponderSuprimir