Hola a todos:
¡Venga, que ya estamos en febrero! Se pasa el tiempo volando (parezco una abuela o a mi madre mismamente) y más cuando no quieres que pase tan rápido :P Últimamente estoy muy animada con el blog, escribiendo una entrada o dos por semana... quién me ha visto y quién me ve, pero es que tengo un poco más de tiempo libre para dedicarme a mí y a mis cosas, algo que me pone extremadamente CONTENTA.
Os voy a enseñar cositas que he estado haciendo ayer y hoy.
Cambiando y personalizando mi blog, estoy haciendo algún tutorial por si vosotros tenéis las mismas dudas que yo. La cuestión es ayudar y familiarizarse con algo de código HTML.
He estado cambiando la barra del menú horizontal y he hecho un menú con secciones y listas enlazadas para poder poner elementos de la misma categoría en un mismo grupo, como por ejemplo los Alfileres, siendo de Boda y Bautizo.
¿Os preguntáis cómo se hace esto?
- DEFINICIÓN DE LA LISTA
Inicialmente tendremos que añadir un gadget HTML/Javascript como el que se tiene en la siguiente figura, yendo previamente a Diseño.
Posteriormente, desde la pantalla de configuración del blog, habrá que dirigirse a Plantilla y de ahí a la edición HTML.
Estando en la edición, se buscará la parte del código que pertenece al HTML que acabamos de crear, pulsando sobre el botón Ir a widget, como se ve en la siguiente imagen:
Dicho código se sustituirá por el siguiente código:
donde las URL del enlace X con los links de las páginas que vais a poner y Pestaña X el título del link que aparecerá en el menú. Recordad que lo tenéis que completar para referenciar a vuestro blog, como por ejemplo el siguiente código:
NOTA: Recordad que las listas en HTML se forman con las etiquetas <ul></ul>, que delimita el comienzo y el final de una lista, y <li></li>, que define cada una de las pestañas. Por lo tanto, es en la pestaña Alfileres donde se define una nueva lista, que comienza con <ul></ul> en su interior y que contiene las dos pestañas de los alfileres de Boda y Bautizo. Es así como se crean listas dentro de una lista.
Ahora, explicaremos cómo personalizar la lista que hemos creado anteriormente poniendo el código css correspondiente. Os copiaré el código que yo tengo en mi página pero que es personalizable en colores y tamaños.
Vamos a la plantilla HTML del blog, abrimos su buscador (pulsando Ctrl+F) y buscamos el código ]]></b:skin> Justamente, antes de ese código tendremos que copiar el siguiente código:
Finalmente, guardaremos la plantilla y comprobaremos que ya tenemos el menú horizontal con pestañas. Podéis cambiar el color de fondo y demás configuración en cada uno de los css que se han detallado anteriormente.
Espero que os haya servido de ayuda este Tutorial. Si tenéis alguna duda, no dudéis es poneros en contacto conmigo.
Un saludo y hasta otro día ;)
donde las URL del enlace X con los links de las páginas que vais a poner y Pestaña X el título del link que aparecerá en el menú. Recordad que lo tenéis que completar para referenciar a vuestro blog, como por ejemplo el siguiente código:
NOTA: Recordad que las listas en HTML se forman con las etiquetas <ul></ul>, que delimita el comienzo y el final de una lista, y <li></li>, que define cada una de las pestañas. Por lo tanto, es en la pestaña Alfileres donde se define una nueva lista, que comienza con <ul></ul> en su interior y que contiene las dos pestañas de los alfileres de Boda y Bautizo. Es así como se crean listas dentro de una lista.
- PERSONALIZACIÓN DE LA LISTA. CÓDIGO CSS
Ahora, explicaremos cómo personalizar la lista que hemos creado anteriormente poniendo el código css correspondiente. Os copiaré el código que yo tengo en mi página pero que es personalizable en colores y tamaños.
Vamos a la plantilla HTML del blog, abrimos su buscador (pulsando Ctrl+F) y buscamos el código ]]></b:skin> Justamente, antes de ese código tendremos que copiar el siguiente código:
Finalmente, guardaremos la plantilla y comprobaremos que ya tenemos el menú horizontal con pestañas. Podéis cambiar el color de fondo y demás configuración en cada uno de los css que se han detallado anteriormente.
Espero que os haya servido de ayuda este Tutorial. Si tenéis alguna duda, no dudéis es poneros en contacto conmigo.
Un saludo y hasta otro día ;)
No hay comentarios:
Publicar un comentario