Menú fijo lateral

 Menú vertical que permanece fijo en un lado.

El título dice algo de este maravilloso truco que puedes aplicar a tu blog en unos simples pasos. Se trata de un menú vertical con iconos muy lindos, que permanece fijo en un lateral del blog, es decir, el menú nunca se moverá, aunque bajemos al final del blog, el menú sigue en el lado.

Si quieres añadirlo en tu blog, sigue los pasos:

Diseño>edición HMTL>expandimos artilugios
Buscamos la etiqueta ]]</b:skin> y antes de ella le añadimos este código:

/* Menu Flotante
---------------------------------------------
*/
#MenuIcon{
position:fixed;
text-align:left;
/* Modica estos valores de abajo para ajustar la posicion del menu */
margin-top:0px;
margin-left:-35px;
}
* html #MenuIcon{ /*IE only*/
position:absolute;
}
#MenuIcon a img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}
#MenuIcon a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}
* html #MenuIcon a img{
filter:alpha(Opacity=100);
}
#MenuIcon img{
margin-bottom: -3px;
}
* html .MenuIcon{
margin-bottom: -3px;
}

Lo normal es no tener que modificar ningún valor, pero si necesitas editarlos, puedes cambiar lo que quieras.

Guardamos cambios.

Diseño>añadir gadget (elemento de pagina)>html-javascript

Pegas el código:

<div id="MenuIcon">
<span>
<a style="border:0;" href="URL ENLACE" rel="external" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="URL ENLACE" rel="external" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="URL ENLACE" title="DESCRIPCION"><img src="URL IMAGEN ICONO" class="MenuIcon"/></a>
</span>
</div>

Ahora rellena los datos necesarios, como "URL ENLACE" (La dirección) "DESCRIPCIÓN" Lo que aparecerá al poner el ratón encima, "URL IMAGEN ICONO" La dirección de tu imagen o icono.


Visto en elescaparatederosa pero editado por Jaime Trujillo Escobedo

Read More

Como instalar un menú flotante en tu blog con buscador

Artículo publicado en el blog El Balcón de Jaime,  ver la entrada en su blog original.

 

Menú flotante horizontal con buscador incluido

Este menú es verdaderamente cómodo y su instalación no es muy complicada.

Se trata de una barra de navegación con un buscador incluido que permanece fija en la parte inferior del blog.




>DEMO

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:

/*-- Comienzo menu flotante --*/
#menuflotante {
float:left;
width: 1256px;
padding: 3px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJhDAs-f7q4Y0PfE_1urq6U1fEutYvcq3Vsi2vIWze38V730Ryx6VzWicjdQLKD4uLa3qsWHwCJedan5RvIqP3zuFW9a_wHPSyEFnZDF65YCQHN5y6mBmAezt6chsiusuSzXTvKAlHrU/s1600-r/0.jpg) repeat-x scroll left top;
position:fixed;bottom:0px;
height:23px;
}

#menuflotante li {
float:left;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAxoTpEkMI2KrCceKkJ0vY9gxPFkUmVda29aEKJZ0WoN516NY7rxS8LpH4E-O-XiwGdffsgYyBwnEZPNaLLARxznJ4cuX-j6IqwORZe0RyWQyFr3V0zzarIMZqBI6ys72fQi65jWI4KY/s1600-r/3.jpg) no-repeat right 8px;
padding:2px 20px 0;
}

#menuflotante ul {
margin:0;
padding:0;
line-height:normal;
list-style:none;
}

#menuflotante a:hover {
padding-top: 2px;
color: #009999;
}

#menuflotante a {
display:block;
float:left;
text-decoration:none;
font:12px Arial;
color:#FFFFFF;
}

#menuflotante .current_page_item {
margin:0;
color:#FFFFFF;
}

#search-box {
height: 17px;
width: 214px;
background:transparent;
color: #009999;
border: 2px groove #cccccc;
}

#search-btn{
background: transparent;
border: 1px groove #cccccc;
color: #ffffff;
}

#search-btn:hover{
background: #009999;
}

#search-btn:active{
background: #006b6b;
}

/*-- Fin menu flotante --*/

Ahora localiza la etiqueta <body> y justo encima pega estas líneas:

<!-- Comienzo menu flotante -->
<div id='menuflotante'>
<ul><li class='current'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
</ul>
<div class='buscadormenu'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' title='Escribe aquí tu consulta' type='text'/>
<input id='search-btn' type='submit' value='Buscar'/></form></div>
</div>
<!-- Fin menu flotante -->

Reemplaza en cada caso:

URL DE TU PAGINA por la dirección de tu web o blog y TITULO por el título de tu web o blog.

En caso de querer mostrar el menú flotante en la parte superior del blog y no en la inferior, cambia el atributo bottom por top en la línea position:fixed;bottom:0px; del primer bloque de código.

Haz vista previa para comprobar que todo va bien y guarda cambios para terminar.

*Si necesitas ayuda o quieres editar cualquier cosa del menú puedes consúltame a través de un comentario.

 

Read More

Cómo instalar un elegante menú vertical tipo acordeón

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Sin duda Mootools es una de las librerías más completas en efectos para páginas web aunque no es tan popular como otras librerías de efectos.

Este es un buen ejemplo de los atractivos efectos que se pueden conseguir con esta librería, se trata de un menú de imágenes tipo acordeón que se desliza suavemente cuando se pasa el cursor sobre él.

El menú es de ByScripts el cual ellos lo llaman Byslidemenu y ha sido Robinson quien me ha pedido que explique su instalación.

Hay dos versiones, el menú horizontal y el menú vertical.

Puedes ver funcionando el ejemplo en este blog de pruebas.

Antes de ponerlo considera que, Mootools no es compatible con la mayoría de las librerías de efectos, así que si usas jQuery, Prototype o Scriptaculous estoy casi seguro que no les funcionará.

Además que es un menú de imágenes, así que cada quién deberá crear sus imágenes con sus textos o lo que se le quiera agregar a la imagen.

Bien, habiendo aclarado lo anterior empecemos, primero hay que descargar este archivo, descomprimirlo y subirlo en algún alojamiento.

Ahora entra en Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script src='URL del archivo mootools-core.js' type='text/javascript'/>
< script src='URL del archivo byslidemenu.js' type='text/javascript'/>
< style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
< /style>

Cambia lo que está en color verde por las URLs de los archivos que subiste previamente a tu alojamiento.

Luego pega antes de </body> esto:

<script type='text/javascript'>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu(&#39;verticalmenu&#39;, {vertical: true});
});
< /script>

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega uno de estos códigos.
Si deseas usar el menú horizontal pega esto:

<ul class="bsm" id="byslidemenu">
< li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< /ul>

O si deseas el menú vertical pega este:

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">
< li></li></ul>

< ul class="bsm vertical" id="verticalmenu">
< li class="first"><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< li><a href="URL del enlace"><img src="URL de la imagen" /></a></li>
< /ul>

Ya sólo cambia lo que está en color rojo por las URLs de tus imágenes y por las URLs de los enlaces. Las imágenes yo las he hecho de 300px de ancho y 225px de alto, pueden ser de cualquier otra medida, pero esa de ejemplo creo que da mejores resultados visuales.

Como ves la instalación es muy sencilla, el mayor trabajo estará en diseñar las imágenes del menú, pero al final seguro tendrás un menú mejor personalizado y poco usual.

Read More

Las etiquetas en forma de menú

Artículo publicado en el Balcón de Jaime. Ver en su sitio original

El gadget de etiquetas en forma de menú

Casi todas las semanas me preguntan cómo incluir un enlace hacia un grupo de entradas en un menú de Blogger, de tal forma que el contenido se vea organizado.

Para conseguir esto, antes es necesario ordenar los posts con etiquetas. El enlace de éstas mostrará un listado con el contenido correspondiente.

¿Y qué mejor que hacer uso del propio gadget de etiquetas ofrecido por Blogger para fabricar un menú de navegación?

A continuación puedes ver una imagen del resultado tanto en vertical como en horizontal:

Diseño > Edición de HTML > sin expandir artilugios

Localiza esta línea en tu plantilla:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Ahora, justo debajo añade uno de estos dos códigos:

Para el menú vertical:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {text-indent: 0;background: #FDF7A5;border: 2px solid #F9DB7B;margin-bottom: 4px;padding: 6px 8px;list-style: none outside none;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Para el menú horizontal:

<b:widget id='Label74' locked='false' title='MENU Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if><div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div id='blcjEtiqjte'>
<ul>
<li style='border-color:#e3cf8c;background:#f4e6b8;'><a expr:href='data:blog.homepageUrl' style='color:#000000;font-weight:bold;'>Inicio</a></li>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</li>
</b:loop>
</ul></div><style>
#blcjEtiqjte ul li {background: #FDF7A5;border: 2px solid #F9DB7B;float: left;list-style: none outside none;margin-bottom: 4px;margin-right: 6px;padding: 6px 8px;text-indent: 0;}
#blcjEtiqjte a:link, #blcjEtiqjte a:visited {color: #817143;font-family: Arial,helvetica,sans-serif;text-decoration: none;}
#blcjEtiqjte [dir="ltr"] {color:#c8141a;}
</style>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Las líneas que destaco en color rojo pertenecen al color de fondo y al estilo del borde que presenta el menú.

background: #FDF7A5; Es el color de fondo. Haz uso de la tabla de colores para obtener el código de tu tonalidad favorita o utiliza una imagen de fondo personal, reemplazando la línea por esto:

background: url("URL IMAGEN") repeat scroll 0 0 transparent;

Inserta la dirección de la imagen en URL IMAGEN y listo.

border: 2px solid #F9DB7B; Es el aspecto del borde o marco. Modifica su grosor aumentando o disminuyendo la cifra 2. Para hacer uso de otro estilo, sustituye solid por los términos citados en este otro tutorial. Finalmente el color, #F9DB7B Con la tabla de colores podrás cambiarlo.

Guarda la plantilla y entra en Diseño > Elementos de la página para arrastrar el gadget de etiquetas hasta el lugar idóneo (bajo la cabecera para el horizontal o en la barra lateral para el vertical).

Notas:

- Para guardar los gadgets sin título revisa esta entrada.
- Accede a este artículo para eliminar el título del gadget pero conservarlo en el apartado de Diseño > Elementos de la página.
- Si tienes problemas para guardar los cambios, utiliza el buscador de tu navegador (presionando las teclas Ctrl y F) para dar con este término: Label74. Bastará con editarlo: Label75.

Read More

Menu Vertical Flotante

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Menú vertical flotante y desplegable para tu blog

Es probable que si tienes un blog y sueles añadirle complementos para personalizarlo a tu gusto te hayas preguntado alguna vez... ¿Dónde coloco esto?

En el caso de un menú, esta pregunta puede hacerse popular. Dado que la mayoría de los menús requieren un espacio bajo la cabecera o en la barra lateral para que sus enlaces sean mostrados con facilidad a los lectores, te encontrarás con un problema si en tu blog tienes cada elemento posicionado en el lugar idóneo y no deseas cambiarlo.

Llegado el caso de no saber como ofrecer a tus visitantes los enlaces que toda barra de navegación posee, te aconsejaría utilizar este maravilloso menú, creado a partir de una idea publicada con anterioridad.

Se compone por una simple franja que permanece fija en el lateral izquierdo del blog y que al hacer clic en ella, despliega un menú muy atractivo con tu lista de links.

Al pulsar la franja una vez haya sido desplegado el contenido, éste volverá a ocultarse. Puedes ver el menú en funcionamiento accediendo a este blog.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> en tu plantilla y debajo añade este script:

<script type='text/javascript'>
//<![CDATA[

var bldespll;
var bldespll2=-200;

function blcnbotndesplegg() {
if (bldespll==2) { bldespll=-2} else {bldespll=2};
document.getElementById("blmenuflntdesplegab")
.style.top=parseInt(document.getElementById("blmenubt").style.top)+30+"px";
document.getElementById("blmenuflntdesplegab").style.visibility="visible";
blnlacc() }

function blnlacc(){
bldespll2=bldespll2+4*bldespll;
if(bldespll2 <- 200) {bldespll2=-200};
if(bldespll2 > 0) {bldespll2=0};
document.getElementById("blmenuflntdesplegab").style.left=bldespll2+"px";
if (bldespll2 <=-200 || bldespll2 >=0) {window.clearTimeout() } else {window.setTimeout("blnlacc();",50);} }

//]]>
</script>
<style>#blcnenlace{font-family:Arial,helvetica,sans-serif; font-size:12px; border-bottom:1px solid #CCCCCC;} #blcnenlace a{text-decoration: none; color: #333333;}#blcnenlace:hover{border-bottom: 1px solid #9D9D9D;}</style>

Ahora, justo encima de la etiqueta <body> incluye este código:

<div id='blmenubt' style='display:scroll;position:fixed;top:100px;left:0px;'>
<a href='javascript:void(0)' onclick='blcnbotndesplegg();' title='Desplegar Menú'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif-7BKxvbRMT7fAQJbI7ASb7KB-HtxZGVqbZELdhMxfec4iIfjFJa73n4f9nRpmZ1Nq804It8DQELzdDKfIT3ZwkAb_XuQUig0XQ4TRAmpUqus5Z9W_V9TiFx5SzZcv4lbPOpVzEUtE6w/s320/blmostrarmenu.png'/></a>
</div>

Una vez hecho esto, debajo de <body> añade esto otro:

<div id='blmenuflntdesplegab' style='position:fixed; visibility:hidden; background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCCkXz7zG5NtUis_Ssp8cI_qIVBxqxpBnA-3R9Kb0dSgH9Iwb3PcBhBdMON7mxOqDhldIjFGUwEuB6ZWcQBH7gzwJ-QjLW5662zX5v2o2lplu49Vx91W5ZIWztG9MfHlzcq1sPf7SJK0/s400/BLMENUDSS.gif&quot;) no-repeat scroll 0 0 #eeeeee; z-index:1;'>
<table style='border:1px solid #9D9D9D; width:150px; text-align:center; padding:5px;'>
<tr><td id='blcnenlace' style='padding-top:28px;'><a href='DIRECCION'>TITULO</a></td></tr>

<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
<tr><td id='blcnenlace'><a href='DIRECCION'>TITULO</a></td></tr>
</table>
</div>

Reemplaza en cada línea DIRECCION con la dirección de la página web, blog o artículo del enlace y

Read More