Alberto

prev next

Grid Detail

lunes, 21 de enero de 2013

SHIRT AZUL

EUR15.00

Camiseta de manga corta, color azul, para uso deportivo,muy transpirable.

Add to Cart More Info

lunes, 28 de noviembre de 2011

Ya que seguimos con el tema de ahorrar espacio en el blog veamos cómo podemos mostrar las etiquetas en forma de menú desplegable, esto será para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.

Cuando usamos el gadget de etiquetas éstas se muestran en forma de lista ordenada:

Sólo necesitas entrar en Diseño | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este código:

<ul>
<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'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

Elimínalo y en su lugar pega esto:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categoría</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Con eso será suficiente. Puedes cambiar el texto Selecciona una categoría donde se indica. Si quieres que no se muestren el número de entradas que tiene cada etiqueta elimina lo que está en color azul.

También puedes darle un poco de color para que se vea más o menos de esta forma:

MIS LOOKS

Si lo quieres así sigue el mismo procedimiento pero adicionalmente deberás pegar antes de
]]></b:skin> este código:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */

}

Ahí puedes cambiar los colores donde se indica.
No está de más decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el código y no lo encuentra.

Add to Cart More Info

jueves, 24 de noviembre de 2011

ICONOS

Los botones de Subir y Bajar facilitan el acceso al contenido de la página, sobre todo cuando en la página principal hay muchas entradas o cuando una entrada tiene demasiados comentarios.
Vamos a ver dos formas de poner los botones de Ir Arriba e Ir Abajo, una es la forma "simple" y la otra tendrá un efecto deslizante.

Forma simple

Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:

<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>

<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>

Cambia la URL de la imagen donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.

Efecto deslizante

Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Ahora antes de </body> pega lo siguiente:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>

De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.

ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea: