Twitter Delicious Facebook Digg Stumbleupon Favorites More

Mostrando entradas con la etiqueta menús para mi blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta menús para mi blog. Mostrar todas las entradas

Menú horizontal deslizante con Scriptaculous para blogger

6/16/2011 05:25:00 p. m. No comments


Desde que cambié la plantilla del blog han sido muchos quienes me han preguntado cómo poner el menú horizontal deslizante que hice.
La verdad es que no requiere mucha ciencia, es un simple menú en el cual he usado una  tabla y el mismo efecto de Scriptaculous que usamos para expandir y contraer.

Lo primero que haremos será agregar Scriptaculous y Prototype, si ya lo tuvieras no hace falta añadirlo nuevamente. En esta ocasión lo pondremos arriba de la plantilla, esto es para que funcione en Internet Explorer 7, de lo contrario no se deslizará y marcará error.

Así que entra en Diseño | Edición de HTML y después de <head> pega esto:
<!-- Prototype y Scriptaculous -->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous -->

Luego antes de ]]></b:skin> pega los estilos:
/* Menú CdBlger
----------------------------------------------- */
#menu-cdblger{
background: #0B3861; /* Color de fondo */
width: 100%;
height: 24px;
font-weight:bold;
margin: 0px;
padding: 0px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu-cb {margin-top:0px;}

#menu-cb li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu-cb li a {
color:#FFF; /* Color del texto */
text-decoration: none;
}
#menu-cb li a:hover {
color:#CCC; /* Color del texto al pasar el cursor */
}
.menu-into {
background-color: #0B3861; /* Color de fondo del submenu*/
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
Y ahora busca esta línea:
<div id='content-wrapper'>
O si usas una plantilla del Diseñador de plantillas de Blogger entonces busca esta línea:
<div class='tabs-outer'>

Arriba de cualquiera de esas dos pega esto:
<div id='menu-cdblger'>
<ul id='menu-cb' style='position: relative; padding-top: 5px;'>
<li><a href='URL del blog'>Inicio</a></li>
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias1&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias1' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8880;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 3</a></td>
</tr>
</table></div></li>

<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>
<li><a href='URL del enlace'>Pestaña</a></li>

</ul></div><div style='clear: both;'/>

Por último agrega la URL de los iconos y enlaces donde se indica.
En color verde están señalados los estilos que se pueden cambiar.
Si usas una plantilla del Diseñador de plantillas quizá sea conveniente que elimines todo lo que haya dentro de:
/* Tabs
----------------------------------------------- */

Para agregar más pestañas en el área principal sólo añade otro código como este antes de la última línea:
<li><a href='URL del enlace'>Pestaña</a></li>
El submenú que contiene las demás pestañas es una tabla y obviamente también se le pueden agregar más enlaces.

Si quisieras agregar otro submenú sólo añade antes de la última línea un fragmento como este:
<li><a href='javascript:void(0)' onclick='Effect.toggle(&quot;categorias2&quot;,&quot;slide&quot;); return false'>Menú &amp;#9660;</a><div id='categorias2' style='display: none; position: absolute; _margin-left:-100px; *margin-left:-100px; _margin-top:15px; *margin-top:15px; z-index:8881;'>
<table border='0' cellspacing='15' class='menu-into'>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 1</a></td>
</tr>
<tr>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
<td><img src='URL del icono'/> <a href='URL del enlace'>Pestaña Fila 2</a></td>
</tr>

</table></div></li>
Si te fijas este último código es igual al primer submenú (aunque con menos pestañas) lo único que ha cambiado es el doble ID en color naranja. Si se agregara otro submenú más sólo hay que cambiar el ID en color naranja las 2 veces que se indica,  por otro nombre, por ejemplocategorias3
Aunque quizá no es el menú más sofisticado y espectacular, sí es un menú con mucho potencial debido al área del submenú que puede albergar bastantes pestañas de forma organizada, así que si tienes muchos enlaces por agregar esta es una buena opción.

Read more »

Menu desplegable para blogger y otras web con html

6/16/2011 05:22:00 p. m. No comments




Los menús desplegables tienen la ventaja de ocupar muy poco espacio y esto puede beneficiarle a muchos bloggers. Crear un menú desplegable es muy sencillo, sólo hay que abrir un elemento HTML/Javascript y ahí pegar esto:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="desplegable" name="menu" size="1">
<option selected/>Seleccionar...
<option value=""/>- - - - - - - - - -
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
<option value="URL de la página"/>Título del menú
</select>
Sólo hay que agregar las URL de las páginas del menú y el título de la opción.
El resultado será este:


Si quisieras añadirle color entonces entra a Diseño > Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
.desplegable {
background-color: #ccc;
color: #000;
}
En background-color puedes elegir el color de fondo del menú, y en color puedes escoger el color de las letras.
El resultado será este:



Read more »

¿CÓMO CREAR UN MENÚ SUPERIOR HORIZONTAL EN BLOG DE BLOGGER BLOGSPOT? (I)

6/16/2011 03:00:00 p. m. No comments


Si queremos un menú que esté en la cabecera o arriba del título de nuestro blog debemos seguir una serie de pasos.

Vamos a:

1) Diseño
2) Edición HTML
3) Buscamos (tecleamos Ctrl+F para buscar más rápido) ]]></b:skin>
4) Justo antes pegamos el siguiente código:

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyd7m8UTYKqxty44hcirMnCyuVGtxbO-dwUVGu0VBo-5iANlynHpXZdKPNmeuw7M7MT-33psRXb-a1GcqjaNNGN9MbdPtyOA2wNQ1Io06RA23g-JrxnU0N2l7sKYo5099-tOk6XPrPLmI/) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://img148.imageshack.us/img148/8764/tabbedlarge.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}
/* Fin del menú */

5) Buscamos ahora <div id='content-wrapper'>
6) Pegamos justo debajo el siguiente código:

<!-- Menú horizontal -->
<div id='menu'>
<ul>
<li><a href='URL del enlace'><span>Título 1</span></a></li>
<li><a href='URL del enlace'><span>Título 2</span></a></li>
<li><a href='URL del enlace'><span>Título 3</span></a></li>
<li><a href='URL del enlace'><span>Título 4</span></a></li>
</ul>
</div>


Sólo debes cambiar los datos que están en rojo por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de </ul>.



Gracias a ciudadblogger.

Read more »

Menú desplegable personalizado

5/28/2011 03:30:00 p. m. No comments



Detalles
Este menú desplegable 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 conAire 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:

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>


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.


<a href="javascript:void(0);" onclick="expandcollapse('Actualidad')">
<img border="0" src=" http://img183.imageshack.us/img183/6739/actualidadan5.gif"/>
</a><br/>

<ul id="Actualidad" class="texthidden">
<li><a href="http://www.20minutos.es/ " target="_blank"> 20 Minutos
</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Traductor')">
<img border="0"src="http://img186.imageshack.us/img186/4555/traductorhp5.gif"/>
</a><br/>

<ul id="Traductor" class="texthidden">
<li><a href="http://www.elmundo.es/traductor/" target="_blank"> El Mundo </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Enciclopedia')">
<img border="0" src="http://img186.imageshack.us/img186/9757/encicoplediabq3.gif"/>
</a><br/>

<ul id="Enciclopedia" class="texthidden">
<li><a href="http://es.wikipedia.org/wiki/Portada" target="_blank"> Wikipedia </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Conversor')">
<img border="0" src="http://img340.imageshack.us/img340/3786/conversorzi5.gif"/>
</a><br/>

<ul id="Conversor" class="texthidden">
<li><a href="http://chuano.net/chuano/util/convsimbolos.php" target="_blank"> Conversor HTML </a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('Ayuda blog')">
<img border="0" src="http://img208.imageshack.us/img208/940/buttonoq4.gif"/>
</a><br/>

<ul id="Ayuda blog" class="texthidden">
<li><a = _blank href="http://www.gemablog-.blogspot.com/">Gem@ BLOG </a></li></ul>

Vamos a conocer un poco el código.

Color rojo: El texto que habremos añadido al botón.
Color verde: Dirección Url de la imagen del botón.
Color naranja: Texto que aparece al desplegarse el botón.
Color azul: Dirección Url del enlace de la página enlazada.
(Lo que aparece en negro no lo modificaremos)
Es fácil crear unos botones, una página muy sencilla es http://www.buttonator.com/

Al igual que Cesar yo lo personalicé con una imagen chiquita que aparece en forma de flecha si os gusta podéis añadir una imagen añadiendo el código de imagen
<img src="aquí-la-url-de-tu-imagen"> justo antes del texto que aparece al desplegarse el botón (color naranja)

Read more »

Gran menú con imágenes de fondo

5/28/2010 03:04:00 p. m. No comments



detalles
Hace tiempo Pizcos blog en su sección de enlaces del mes mostraba un menú muy especial, es un menú elegante y yo diría que majestuoso.
Lo encontré de nuevo en Codrops donde explican su funcionamiento y proporcionan la descarga de archivos, se visualiza perfectamente en Google Chrome, Firefox, Opera, Safari, IE8, IE7 incluso en IE6. Trabaja con un Pugin de jQuery y el menú original y que vamos a añadir podemos verlo en CODROPS.
Descargamos el ZIP con las imágenes para añadirlas posteriormente a los estilos.
Nos situamos en plantilla edición de html justo después de ]]></b:skin> y los añadimos:

<style type='text/css'>
* {margin:0;padding:0;}
.menuWrapper{
border:1px solid #000;
text-shadow:0 1px 1px #000;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent; }

ul.menu{
padding: 0;
list-style:none;
width:797px; }
ul.menu > li{
float:left;
width:265px;
height:542px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li.last{
border:none; }

.bg1{
background-image: url(Url-imagen); }
.bg2{
background-image: url(Url-imagen); }
.bg3{
background-image: url(Url-imagen); }

ul.menu > li > a{
text-shadow:0 1px 1px #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
float:left;
font-size: 21px;
width:268px;
height: 48px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
font-family: 'Tangerine', century gothic, verdana;
text-decoration:none;
}

ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:130%;
height:110px;
padding-top:10px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li ul li{
text-shadow:0 1px 1px #000;
display:none; }
ul.menu > li ul.sub1{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub2{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub3{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub1 {margin-left:0;}
ul.menu > li ul.sub2 {margin-left:0;}
ul.menu > li ul.sub3 {margin-left:0;}
ul.menu > li ul li a{

color:#fff;
text-decoration:none;
line-height:20px;
margin-left:20px;
text-shadow:0 1px 1px #000;
font-size:15px; }

ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff; }

ul.menu > li ul.sub1 li{
display:block; }
</style>
Si decidimos sustituir las imágenes debemos tener en cuenta que miden 800x542 y las añadimos en "url-primera-fotografía" segunda y tercera.
Las otras imágenes que debemos añadir son las transparencias de color y en los estilos viene definidas con url-imagen-transparente-azul, verde y amarilla.
A continuación añadimos los scripts directamente a la plantilla para evitar los problemas ocasionados con alojamientos externos.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Si con anterioridad añadimos jquery.min.js no es necesario volver a añadirlo. A continuación añadimos también el contenido del siguiente archivo
Por último editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div class="menuwrapper bg1" id="menuwrapper">
<ul class="menu" id="menu">
<li class="bg1" style="background-position: 0pt 0pt;">
<a href="#" id="bg1">Título-1</a>


<ul class="sub1" style="background-position: 0pt 0pt;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li class="bg1" style="background-position: -266px 0px;">
<a href="#" id="bg2">Título-2</a>


<ul class="sub2" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li class="last bg1" style="background-position: -532px 0px;">
<a href="#" id="bg3">Título-3</a>


<ul class="sub3" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>
En el gadget es donde añadiremos a url de las páginas o sitios que vamos a enlazar,debemos sustituir la almohadilla # por la url de nuestro enlace.
En Título-1, Título-2 y Título-3 lo sustituimos por el texto de los títulos que deseamos añadir y que se mostrará en la barra inferior del menú.
Cada título lleva a continuación Submenu 1, Submenu 2, Submenu 3. Esos submenús son los enlaces que añadimos para que se muestren marcando sobre los títulos.

Click en la imagen para ver ejemplo personalizado

Read more »

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates