Chica Blogger

Paseando por el foro de BloggingTips, llegué a Trix Template Generator, generador online de templates para Blogger (blogspot).

La apariencia de Trix Template Generator es rudimentaria, y está alojado en un servidor gratuito. Pero como bien dicen por ahí, las apariencias engañan: basta con probarlo para darse cuenta de que es un generador muy completo, y no demasiado difícil de utilizar, incluso para quienes aprendemos por ensayo y error.

Ya conocía PsycHo, otro generador de plantillas muy simple (al cual actualmente se están incorporando mejoras), y no pensé que podía encontrar otro generador mejor. Aunque soy de quienes “codean” sin aplicaciones extra, me sorprende lo útil que puede llegar a ser Trix para que quienes no saben nada de CSS ni HTML puedan crear una linda plantilla.

Instrucciones generales para su uso:

• Seguir las pestañas en orden, partiendo por los ajustes generales (General Settings).

• Elegir una plantilla en blanco para partir con un diseño desde cero (Default 1 para plantillas de ancho flexible,  Default 2 para plantillas de ancho fijo), o Trix Designs para trabajar sobre una plantilla presideñada.

• Utilizar la pestaña Load/Save Settings para guardar los cambios de tanto en tanto (se guardan en tu computadora). Puedes elegir que éstos se guarden automáticamente.

• Ulilizar la pestaña Choose desired blocks para elegir los blocks que queremos que se muestren en la plantilla (Header, Sidebar, Footer, Crosscol). Con un solo click, también podemos remover la navbar de Blogger.

• Cuando termines, ve a la pestaña Get Code For Blog, y presiona el botón ShowCode. Copia y pega el código en la Edición de HTML de tu blog.

Para más información, revisa las Preguntas Frecuentes Respondidas de la aplicación (en inglés).

¿Problemas instalando la plantilla?

Encontré un pequeño error en la instalación, que es el siguiente:

El código ID del nuevo widget “Header2″ no es válido para este tipo: HTML

Ocurre que el header aparece como widget del tipo HTML. La solución consiste en cambiar type=’HTML’ por type=’header’. Si hay problemas con la ID, cambiar ‘id=Header2′ por ‘id=Header1′.

Para otros reportes de bugs, es conveniente postear en el blog de Trix.

Y apara finalizar, dejo un demo muy simple de una plantilla que construí usando Trix TG, cuando lo estaba probando. Es muy simple, pero con un poco de tiempo y dedicación se puede crear una plantilla mucho mejor. Los elementos están: la falta de conocimiento no debería ser una limitación para dejar fluir la creatividad.

Una de las cosas geniales de WordPress, es la posibilidad de mostrar thumbnails en los posts resumidos, en los themes estilo revista. Sin embargo, esa opción también está disponible para Blogger gracias a un script desarrollado por Vietwebguide, que corta todos los posts en el mismo número de caracteres, y además genera una imagen tipo thumbnail automáticamente para cada post que contenga al menos una imagen.Lo mejor, es que el script es fácil de añadir, y para utilizarlo no hay que hacer nada nuevo, salvo postear normalmente.

Existe una versión 3.0 del script (esta es la 2.0), pero  no pude acceder a ella por la limitación del idioma (no entiendo vietnamita). Pese a ello, la versión que probé funciona perfectamente en Firefox e Internet Explorer 8 (agradecería opiniones de quienes usen versiones más viejas de IE).

Instrucciones

1. Pegar antes de < /head >

<script type='text/javascript'>
 summary_noimg = 430;
 summary_img = 360;
 img_thumb_height = 125;
 img_thumb_width = 125;
</script>
<script type='text/javascript'>
//<![CDATA[
 
function removeHtmlTag(strx,chop){ 
	if(strx.indexOf("<")!=-1)
	{
		var s = strx.split("<"); 
		for(var i=0;i<s.length;i++){ 
			if(s[i].indexOf(">")!=-1){ 
				s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
			} 
		} 
		strx =  s.join(""); 
	}
	chop = (chop < strx.length-1) ? chop : strx.length-2; 
	while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
	strx = strx.substring(0,chop-1); 
	return strx+'...'; 
}
 
function createSummaryAndThumb(pID){
	var div = document.getElementById(pID);
	var imgtag = "";
	var img = div.getElementsByTagName("img");
	var summ = summary_noimg;
	if(img.length>=1) {	
		imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
		summ = summary_img;
	}
 
	var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
	div.innerHTML = summary;
}
 
//]]>
</script>

2. Buscar < data:post.body/ > (con los artilugios expandidos) y reemplazar por:

<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt; Leer más...</a></span>
</b:if></b:if></p>

3. Configuración del script (opcional):

summary_noimg = determina el número de caracteres a mostrar en caso de que el post no tenga imágenes .
summary_img = determina el número de caracteres a mostrar en caso de que el post tenga imágenes.
img_thumb_height = alto del thumbnail.
img_thumb_width = ancho del thumbnail.

Utilicé valores que me parecieron apropiados para una plantilla con un ancho de 480px en el main-wrapper (la columna de los posts), y considerando que generalmente los thumbnails son de 125×125 píxeles.

Demo del script
Descargar script (para realojar, recomendado).

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 original – Demo 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(http://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(http://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(http://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(http://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(http://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(http://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).

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.