Menu organizador {en una entrada/pagina}

Holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa! mis amorosos seguidores ~

Ya los extrañaba a montones, leer sus comentarios, escribir & responder sus dudas. La verdad creo que merecen una disculpa de mi parte, ya que luego del hiatus inesperado de hace un tiempo prometí volver a publicar mas seguido, pero ocurrieron hechos en el transcurso de mi presente, que calcule mal ciertas acciones mías & eso me quito muchos días que hoy tendría libre.

Y como todos esperaban {ok, solo aquellos que visitan(?}: hoy vengo con respuestas a dudas & respondí muchos mensajes que me llegaron desde el formulario, así que a revisar sus gmails(?
La idea de este tutorial, es de armar un menú que "organice" las entradas en categorías en nuestro blog, al estilo como el que utilizo en la entrada de "contenidos" en este blog: VER AQUÍ!

Tutoriales blogger TUTORIAL/RECURSO TUTORIAL/RECURSO TUTORIAL/RECURSO TUTORIAL/RECURSO TUTORIAL/RECURSO TUTORIAL/RECURSO

Tutoriales 4you MANUALIDADES/RECETAS MANUALIDADES/RECETAS MANUALIDADES/RECETAS MANUALIDADES/RECETAS MANUALIDADES/RECETAS MANUALIDADES/RECETAS

Ejemplo del menu! Pasa el cursor por cada link!

Comencemos!

Para empezar, debemos crear una entrada o pagina, donde colocaremos nuestro menú. Luego de esto, colocamos nuestra entrada/pagina en modo "HTML":

Una vez allí, utilizaremos el codigo para una "tabla" & asi poder separar en columnas las distintas listas {puedes ver como crear una tabla en ESTE TUTORIAL!}:

<table style="font-family: calibri; font-size: 13px;">
<tbody><tr>
<td valign="top" style="padding-right: 20px;">
<h3>TITULO</h3>
<ul id="menuGO">
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li> </ul><br>
</td>
<td valign="top">
<h3>TITULO</h3>
<ul id="menuGO">
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li>
</ul><br>
</td>
</tr></tbody>
</table>

• Expliquemos lo marcado en negrita: cada columna, tiene un comienzo & un cierre en su codigo. Lo marcado como "<td..." indica la etiqueta de comienzo & lo marcado como "</td>" es el cierre; todo lo que coloquemos dentro de esas lineas, se situara en la respectivas columnas.

Una vez tenemos nuestras dos columnas armadas {al colocar el codigo anterior}, editaremos cada lista que queramos colocar. Cada menú sera el siguiente codigo:

<h3>TITULO</h3>
<ul id="menuGO">
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li>
<li><a href="URL" target="_blank">TITULO LINK</a></li>
</ul><br>

De querer colocar otro menú, colocar el mismo codigo, ARRIBA de alguna de las etiquetas: </td>; ten en cuanta que la primera etiqueta </td> hace referencia a la primera columna & la segunda a la segunda columna, obviamente.

A colocar el codigo CSS

Una vez que colocamos la cantidad de listas que queramos & ya completamos los links & títulos de cada una, vamos a editar cada menú. Guardamos nuestra entrada/pagina luego de completarla & copiamos el siguiente codigo:

ul#menuGO li{margin: 0px!important;padding: 0px!important;}
ul#menuGO {list-style: none;margin-top: 0px!important;margin-bottom: 20px!important;padding: 0px; width: 250px; overflow: auto;}
ul#menuGO li a{
display: block;
width: 200px; /* ANCHO DE LINKS */
background: #fff; /* FONDO DE LINKS */
color: #aaa; /* COLOR DE LINKS */
border-left: 0px solid #eee; /* BORDE DE LINKS */
margin-bottom: 3px;
font: 9px verdana;
padding: 7px;
padding-left: 5px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
}
/* LINKS HOVERS */
ul#menuGO li a:hover{
background: #f17091; /* FONDO DE LINKS */
border-left: 15px solid #f9799a; /* BORDE DE LINKS */
color: #eee; /* COLOR DE LINKS */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
text-decoration: none;
letter-spacing: 0px;
}

Editar lo marcado a tu gusto.
Lo que se encuentra en negrita:

width: 250px;

corresponde al ancho que tendrán las columnas debido al ancho de cada menú.
Bien, ahora tenemos dos opciones:
❶ra opcion: Colocar lo que copiamos en nuestra plantilla ARRIBA de la linea:

]]></b:skin>

❷da opcion: Colocar lo copiado dentro de un gadget HTML/Javascrip, de la siguiente forma:
Añadimos un gadget nuevo, donde pegaremos lo siguiente:

<style>
AQUI EL CODIGO CSS
</style>

& luego de completar, lo guardamos y posicionamos el gadget en un sitio no visible de nuestro blog; recomendable en el "footer".

Cual es la diferencia de ambas opciones ¿?

El tema es que, si colocamos el codigo en nuestra plantilla, deberás acordarte a la hora de cambiar tu diseño, de volver a colocarlo. En cambio, si lo colocas en un gadget, quedara independientemente del codigo general de tu plantilla, así cuando decidas modificar tu diseño, el codigo quedara intacto, solo deberás editar los colores para combinar.

~