Blogger, Tutoriales

Crear un menú de botones con una sola imagen

Publicado por Claudia en diciembre 18, 2008

Usualmente, los menús son creados con varias imágenes, lo que hace algo más complicada la codificación y la carga de un sitio. Pero Kailoon de Loon Design nos enseña a crear estéticos menús de botones utilizando sólo una imagen, que pueden ser fácilmente añadidos a un blog.

Para un menú de botones, podemos usar una de las siguientes imágenes que creó Kailoon, o crear las propias que puedan ser cortadas en dos partes equivalentes.




La estrategia es la siguiente:

Se trata simplemente de añadir < span/ > en el link. Así, una parte del botón va a estar dada por el span, y otra por el link.

Demo originalDemo en Blogger.

El código

CSS: Pegar antes de ]]>< /b:skin >

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(https://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(https://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

HTML: Pegar después de header-wrapper.

<ul class='menu'>
<li><a class='current' href='#' title='home'><span></span>home</a></li>
<li><a href='#' title='products'><span/>products</a></li>
<li><a href='#' title='blog'><span/>blog</a></li>
<li><a href='#' title='contact'><span/>contact</a></li>
</ul>

Cambiar los títulos de cada sección, y el nombre que queremos que tenga cada botón, y reemplazar # por el link de la sección correspondiente.

Alternativa

También podemos hacer una leve modificación en el código CSS, para utilizar botones de dos colores (Ver demo):

ul.menu {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}
 
ul.menu li {
	float: left;
}
 
ul.menu li a {
	float: left;
	text-decoration: none;
	color: #527C27;
	padding: 4px 15px 0 0;
	margin-right: 7px;
        background: url(https://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top right;
	font: 900 14px 'Arial', Helvetica, sans-serif;
}
 
 
ul.menu li a span {
	float: left;
	padding-right: 15px;
	display: block;
        background: url(https://2.bp.blogspot.com/_XxWhaC4o7dE/SUm3XNh6vBI/AAAAAAAAALI/LV9-HrDLEFU/s1600/green.png)no-repeat top left;
	margin-top: -4px;
	height: 24px;
}
 
 
ul.menu li a:hover, ul.menu li a.current {
 	color: #0d5f83;
	background: url(https://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top right;
}
 
ul.menu li a:hover span, ul.menu li a.current span {
	background: url(https://3.bp.blogspot.com/_XxWhaC4o7dE/SUmyHOi3JXI/AAAAAAAAALA/IrZrkoFRbzI/s1600/menu.png) no-repeat top left;
}

Todas las imágenes están almacenadas en Blogger. Adapté el tutorial a Blogger para probarlo yo misma y darle una mejor utilidad. Sin embargo, el menú puede ser añadido a cualquier plataforma que permita la edición de HTML.
El packete original con imágenes y el archivo *.psd del menú pueden ser descargados desde el blog de Kailoon (ver link arriba).

Tags:
Blogger

Adiós al error bX de Blogger

Publicado por Claudia en octubre 1, 2008

Quienes usamos Blogger, tenemos que lidiar contra el molesto error del “código raro” de Blogger, que siempre empieza con bX, como por ejemplo, bX-fgmhye. Es realmente odioso, porque aparece al cambiar de plantilla, hacer cambios en la edición de html o los elementos, justo cuando uno menos se lo espera.

Hace más de un año, cuando empecé a usar Blogger, me preguntaba qué estaría haciendo mal, tanto así, que decidí mandar un mail a soporte de Blogger. ¡Y me respondieron! Pero justo en ese momento ya se había solucionado el error por arte de magia, así que la respuesta que obtuve no fue de gran ayuda. De hecho, aquí la tengo:

Mi solicitud de ayuda:

Subject: Error code

Item type: Blog gone

I can’t see my blog. I try to login, but I see this error code:
bX-fgmhye. I was using Adsense when I detected the problem. Please,
help me.

La respuesta:

Hi there,

Thanks for writing in. I checked your blog and the problem seems to be
resolved already. Please let us know if you continue to have any trouble
with it, though.

Sincerely,
Karl
The Blogger Team

El error de Blogger es tan, tan común, que sale más fácil tratar de resolverlo por uno mismo antes que contactarse con soporte. La espera puede ser tediosa, más cuando hay que contactarse en inglés. Aunque suele resolverse solo, y se va así como llega, si no queremos esperar que a nuestro querido blog se le pasen las mañanas, es mejor intentar por otras vías.

Solución 1:

Cambiar de navegador (visto en Blog and web) . Si usas Firefox, cambia a Explorer o Chrome mientras dura el error. Según mi experiencia, casi siempre funciona.

Solución 2:

Se me ocurrió borrar los artilugios que están de sobra (los que dice que están a punto de eliminarse) y que de todas maneras se eliminarían al cambiar de plantilla. Se puede hacer desde la edición de elementos o la de HTML (en el primer caso, hay que resfrescar la página luego). Muchas veces sí funciona, aun cuando no sea la causa principal del problema.

Solución 3:

Eliminar cookies manualmente o con un software como CCleaner. Pasa que el error se produce al cambiar de una cuenta Google a otra (visto en GosuBlogger). Yo he optado por hacerlo manualmente, para no complicarme más la vida, y lo hago así:

1. Con Firefox:

  • Herramientas /Opciones /Privacidad /Mostrar cookies /Eliminar todas las cookies
  • o bien Herramientas /Limpiar Datos Privados /Cookies

2. Con Explorer (lo odio, pero lo pongo para quienes lo usan):

  • Herramientas /Opciones de internet /General /Historial de Exploración /Eliminar

Voilá! Como decía un profesor mío, fácil y bonito.