domingo, 1 de febrero de 2015

Menú horizontal con pestañas

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.

Menú horizontal con pestañas Blogger


¿Os preguntáis cómo se hace esto?

  1. 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.

Menú horizontal con pestañas Blogger



Posteriormente, desde la pantalla de configuración del blog, habrá que dirigirse a Plantilla y de ahí a la edición HTML

Menú horizontal con pestañas Blogger



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:

Menú horizontal con pestañas Blogger


Dicho código se sustituirá por el siguiente código:


<div class='widget HTML' id='HTML16'>
  <div class='widget-content'>
    <center>
      <div id='lasCosasDeFimo'>
        <ul id='cosasDe'>
          <li>
            <a href='URL del enlace A'>Pestaña A</a>
  </li>
<li>
<a href='#'>Pestaña B</a>
            <ul>
<li>
<a href='URL del subenlace B - 1'>Subpestaña B-1</a>
</li>
<li>
<a href='URL del subenlace B - 2'>Subpestaña B-2</a>
</li>
</ul>
</li>
<li>
<a href='URL del enlace C'>Pestaña C</a>
</li>
<li>
<a href='URL del enlace D'>Pestaña D</a>
</li>
  </ul>
      </div>
  </center>
  </div>
</div>

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:



<div class='widget HTML' id='HTML16'>
  <div class='widget-content'>
    <center>
      <div id='lasCosasDeFimo'>
        <ul id='cosasDe'>
          <li>
            <a href='http://lascosasdefimo.blogspot.com.es'>Inicio</a>
  </li>
<li>
<a href='#'>Alfileres</a>
            <ul>
<li>
<a href='http://lascosasdefimo.blogspot.com.es/p/alfileres-de-boda.html'>Boda</a>
</li>
<li>
<a href='http://lascosasdefimo.blogspot.com.es/p/alfileres.html'> Bautizo</a>
</li>
</ul>
</li>
<li>
<a href='http://lascosasdefimo.blogspot.com.es/p/otras.html'>Otras Creaciones</a>
</li>
<li>
<a href='http://lascosasdefimo.blogspot.com.es/p/sobre-mi.html'> Sobre Mí</a>
</li>
  </ul>
      </div>
  </center>
  </div>
</div>

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.


  1. 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:


/****** MENU HORIZONTAL: PERSONALIZACION ******/
#lasCosasDeFimo {
   border-radius: 15px;
   background: #FFCCCC; /**Color de fondo**/
   width: 850px; /**Ancho de nuestro menú, AJUSTAR**/
   color: #212121;
   margin: 0px;
   padding: 0;
   position: relative;
   border-top:0px solid #960100;
   height:35px;
}
#cosasDe {
   margin: 0;
   padding: 0;
}
#cosasDe ul {
   border-radius: 15px;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
}
#cosasDe li {
   list-style: none;
   margin: 0;
   padding: 0;
   border-left:0px solid #fff;
   border-right:0px solid #fff;
   height:35px;
}
#cosasDe li a, #cosasDe li a:link, #cosasDe li a:visited {
   color: #ffFFFf;
   display: block;
   font:normal 15px Arial, sans-serif; margin: 0;
   padding: 9px 12px 10px 12px;
   text-decoration: none;
}
#cosasDe li a:hover, #cosasDe li a:active {
   background: #FFFFFF;
   color: #9D9F9E;
   display: block;
   text-decoration: none;
   margin: 0;
   padding: 9px 12px 10px 12px;
}
#cosasDe li {
   float: left;
   padding: 0;
}
#cosasDe li ul {
   z-index: 9999;
   position: absolute;
   left: -999em;
   height: auto;
   width: 160px;
   margin: 0;
   padding: 0;
}
#cosasDe li ul a {
   width: 140px;
}
#cosasDe li ul ul {
   margin: -25px 0 0 161px;
}
#cosasDe li:hover ul ul, #cosasDe li:hover ul ul ul, #cosasDe li.sfhover ul ul, #cosasDe li.sfhover ul ul ul {
  left: -999em;
}
#cosasDe li:hover ul, #cosasDe li li:hover ul, #cosasDe li li li:hover ul, #cosasDe li.sfhover ul, #cosasDe li li.sfhover ul, #cosasDe li li li.sfhover ul {
  left: auto;
}
#cosasDe li:hover, #cosasDe li.sfhover {
  position: static;
}
#cosasDe li li a, #cosasDe li li a:link, #cosasDe li li a:visited {
   background: #FFCCCC;
   width: 140px;
   color: #ffffff;
   display: block;
   font:normal 14px Arial, sans-serif;
   margin: 0;
   padding: 9px 12px 10px 12px;
   text-decoration: none;
   z-index:9999;
   border-bottom:1px dotted #fff;
}
#cosasDe li li a:hover, #cosasDe li li a:active {
   background: #FFFFFF;
   color: #9D9F9E;
   display: block; margin: 0;
   padding: 9px 12px 10px 12px;
   text-decoration: none;
}
h3.post-title{
   color: #ffa7a6;
   border-top: 0px solid #000000;
   border-bottom: 1px solid #c4c4c4;
   text-align: center;
}
h2.date-header {
   font-size: 10px;
   text-align: center;
}
.post-body img:hover {
   opacity:0.5;
}
.post-body .pinit-wrapper img.pinimg:hover{
   opacity:1;
}


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