En Blogger y en cualquier web, pero vamos a ver cómo incluir uno de estos menús desplegables en este sistema de bitácoras. El menú es justamente como el que tenemos arriba en este blog. Hay cientos de script por la red. Tan sólo tienes que buscar en Google "drop down menu" y aparecerán cientos de sitios ofreciéndote su menú desplegable. Unos de pago, otros gratuitos, unos accesibles, otros no tanto, de todo.
Concretamente el que tenemos en este blog es el "Chrome CSS Drop Down Menu". Escogimos este por ser bastante bonito, accesible y fácil de modificar. Si ya te has bajado el chromemenu.zip, descomprímelo en un directorio cualquiera de tu PC y empecemos a retocarlo.
El fichero demo.htm nos servirá para ver cómo quedará el menú antes de ponerlo en nuestro blog. Lo abrimos con nuestro editor de código preferido (bloc de notas, dreamweaver, homesite, etc) y echamos un vistazo. Veremos varias etiquetas div, la primera es donde indicamos el primer nivel, es decir, las secciones que aparecerán nada más cargar el menú, sin que el usuario haga nada. Actuamente vemos Home, Resources, News y Search. Podemos cambiarlas por nuestras secciones principales, teniendo en cuenta que la primera, 'Home', no es una sección, es un link que va a la página principal de nuestra web y por lo tanto no se desplegará.
A continuación del div que contiene las secciones principales, vemos 3 divs más, uno por cada sección principal. Eso significa que si en el primer div de estos cuatro ponemos los textos que queramos, éstos aparecerán al pasar el ratón por encima de la primera sección que habremos definido en el primer div, la primera sección que hayamos definido aparte de 'Home'.
Por si no queda del todo claro, vamos a hacer un ejemplo. Supongamos que queremos hacer un menú con las siguientes secciones:
- Inicio
- Manga
-- Shojo
-- Shonen
-- Yaoi
- Anime
-- Japonés
-- Japonés (Subs en Inglés)
-- Japonés (Subs en Castellano)
-- Inglés (Subs en Castellano)
-- Castellano
- Música
-- OST Animes
-- JPop
Inicio, Comics, Anime, Música los pondríamos en en el primer div, ya que son las secciones principales. El resto de subsecciones habría que distribuirlas en los tres divs siguientes. Puedes ver el código del ejemplo completo aquí.
Una vez tienes la estructura de menú que quieres puedes intentar cambiar el archivo de tema. Por el principio del código verás algo como:
"chrometheme/chromestyle.css"
Puedes cambiarlo por "chrometheme/chromestyle2.css", "chrometheme/chromestyle3.css" o "chrometheme/chromestyle4.css" y dejar el que más te guste.
Ahora llega la hora de poner el código en tu página. Necesitarás algún lugar donde subir las imágenes y el css, es decir, necesitas un lugar donde poder subir las carpetas "chrometheme" y "chromejs". Cualquier hosting gratuito como iespana o mi@ te pueden servir.
Una vez subidos los archivos tienes que incluir el código en tu blog tal como se indica aquí.
Eso es todo.
¡Cualquier problema podéis indicarlo en los comentarios!
viernes, 21 de diciembre de 2007
Menú desplegable en Blogger
sábado, 17 de noviembre de 2007
Mas elementos widgets en tus Blogs
Hace días que la pestaña para añadir widgets en la sidebar ha desaparecido, esperaba aque "apareciera" por si sola pero al parecer ser que se ha tomado unas vacaciones, y he decidido investigar la forma de añadir un nuevo widget
Ya puesta y metida en el tema decidí añadir más widgets por si en un futuro decido añadir algo nuevo a la plantilla, así que los añadí en los lugares que por defecto deberían venir en la plantilla, es decir en
header, sidebar, main, footer.
Para hacerlo hay que situarse en Panel/Diseño/Edicción HTML y "Expandir plantillas de artilugios"
Para añadir un nuevo "widget en la sidebar" buscaremos lo siguiente:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Y lo sustituimos por:
<b:section class='sidebar' id='sidebar' maxwidgets='10' showaddelement='yes'>
*maxwidgets indica el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe y podremos añadir todos los widgets que deseemos, por el contrario si tenemos en nuestra sidebar 3 o 4 widgets y queremos aumentar el número deberemos poner un número mayor al que ya tenemos.
*showaddelement puede ser "yes" o "no", donde "yes" es la opción predeterminada pero si encontramos "no" es obvio que por eso no aparece en nuestra sidebar la opción de añadir elementos de página.
Ahora vamos a añadir un nuevo "widget en el header" buscaremos:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Y lo sustituimos por:
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Le toca el turno a "main" buscaremos:
<b:section class='main' id='main' showaddelement='no'>
Lo sustituimos por:
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>
Y por último vamos a añadir la opción de nuevos "widgets en footer" para ello buscaremos:
<b:section class='footer' id='footer'/>
En su lugar añadiremos:
<b:section class='footer' id='footer' maxwidgets='2' showaddelement='yes'>
Recordad que la cantidad de maxwidgets es la que yo he añadido como referencia, pero en realidad cada uno debe añadir la que vea oportuna de acuerdo con los widgets que tenga o piensa añadir en su blog.
viernes, 16 de noviembre de 2007
Menú despegable personalizado gracias a gema blog
Este menú despegable que traigo es muy vistoso para el blog, tiene una particularidad y es que podemos añadir nosotros mismos los botones de acuerdo a nuestros gustos o el color acorde con nuestro blog.
En El blog de Cesar he encontrado uno igual que a su vez lo hizo con Aire como referencia.
La imagen que ilustra esta entrada es solo para que veáis el diseño. En la sidebar encontraréis el menú, os invito a probar para que veáis el efecto al clicar en él.
Podemos aplicarlo en unos sencillos pasos:
Lo primero que haremos será situarnos en Plantilla/Edición HTML y justo después de <head> añadiremos lo siguiente:
Después nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos el código.
Os lo dejo tal y como lo tengo en mi sidebar omitiendo algunos enlaces para ahorraros el trabajo de eliminarlos.
Vamos a conocer un poco el código.
Color rojo: El texto que habremos añadido al botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)
Y eso es todo, si tienes dudas házmelo saber
lunes, 29 de octubre de 2007
Escucha tus posts con SONO WEBS
Instalación en Blogger
Instalación:
1. Entrar en el panel Blogger de vuestro Blog.
2. Pulsa en "Configuración"
6. Despues de la cadena: 7. Introducir el siguiente código: _____________________________________________________________________________________________ 8.Por ultimo pulsa en el botón de "Guardar Plantilla":
|
gRACIAS A SONO WEBS, VIA LOOGIC
CSS MENU MAKER (Generador de menús) para blogger
He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú despegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKER encontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.
Clicamos en Customize
Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit
Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en SubmitCSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.
Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como: background:transparent url("images/nombre-de-la-imagen.gif") .......
Gracias JmpaSrgc por el detalle, hacía tiempo que un generador no me hacia tanta ilusión.
Sacado de Gema Blogs
Menú horizontal despegable PARA BLOGGER
Antes de nada quiero aclarar que este menú no sustituye las categorías de Blogger, su finalidad es crear enlaces de forma dinámica a modo de despegable.
1º- Para añadirlo a nuestro blog debemos situarnos en Plantilla/Edicción de HTML y justo después de <head> añadir lo siguiente:
<link href='http://webjcp.googlepages.com/css.css' rel='stylesheet'/>
<!--[if IE]>
<link rel="stylesheet" href="http://webjcp.googlepages.com/hack.css" />
<script type="text/javascript">
window.mlrunShim = true;
</script>
<![endif]-->
<script src='http://webjcp.googlepages.com/js.js' type='text/javascript'>
</script>
2º- Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
La forma de modificarlo es muy sencilla:
Título o tema será el tema para la categoría de enlaces.
url: debemos pegar la url del lugar que deseamos enlazar.
En Link1, Link2, Link3, y Link4 irá el texto asignado al correspondiente enlace.
Este Menú es una gentileza de César que amablemente pone a disposición de todos.
Yo me he permitido variar un poco las explicaciones para adecuar los colores a nuestro gusto.
El primer código que añadimos a la plantilla contiene tres archivos, un archivo js. y dos CSS.
Uno de los archivos CSS es el que podemos configurar para cambiar el aspecto referente a color.
Lo hice de la siguiente forma:
1º- En el primer paso añadí justo antes de </head> el archivo js. que previamente subí a mi servidor.
<script src='http://forevergema.googlepages.com/menu.js.js' type='text/javascript'>
2º-Después el archivo que contiene la configuración para modificar el aspecto del menú lo abrí con el bloc de notas y copié su contenido para seguidamente pegarlo justo antes de ]]></b:skin>
El contenido es el siguiente:
http://forevergema.googlepages.com/
Es ahí donde podéis modificar los colores del menú donde dice /*colors for menu*/
3º-Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el mismo código que el primer paso:
<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>
</ul>
</div>
</center>
Añadimos los enlaces y listo.
Como podéis comprobar la única diferencia es que añadimos en nuestra plantilla un archivo que siendo alojado en un servidor ocuparía mucho menos espacio pero que podremos modificar cada vez que lo deseemos sin necesidad de abrir el archivo y volverlo a alojar.
Si una vez modificado no necesitamos modificarlo más también podemos subir el archivo a nuestro servidor y en el código de César que añadimos después de <head> sustituimos:
http://webjcp.googlepages.com/css.css por la url de vuestro archivo css.
mENU hORIZONTAL dESPLEGABLE
Menú horizontal blogger beta
Este menú horizontal es muy vistoso, lo he tomado prestado del blog de nuestro buen amigo César.
Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:
<style type='text/css'>
#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}
#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}
#chromemenu ul{
border: 5px double #660000;
width: 99%;
background-color: #000000; center
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #cccc66 ;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #660000;
}
#chromemenu ul li a:hover{
background-color: #660000; center
center repeat-x;
}
</style>
(en esta parte de código es donde podemos cambiar el color del menú)
Una vez guardados los cambios nos dirigimos a; Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:
<div id="chromemenu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>
(En esta parte es donde podemos añadir los enlaces y el texto que será visible)