Zona de Pruebas

Panel de administración

2009-04-07T10:21:00.003+01:00

Un truco muy sencillo para poder acceder rápidamente al panel de control de Blogger. Se trata pues de crear un nuevo menú desde el que el administrador de la página tiene un acceso rápido a la creación de nuevas entradas, las opciones del blog, la plantilla.. etc
No tenemos más que ir a la pestaña de Diseño de nuestro blog y crear un nuevo widget de enlaces en los cuales añadiremos los vínculos a las opciones de adminstración. Un ejemplo sería este:

Panel de Control: http://www.blogger.com/home
Opciones : http://www.blogger.com/blog-options-basic.g?blogID=####
Plantilla : http://www.blogger.com/rearrange?blogID=####
Nueva entrada : http://www.blogger.com/post-create.g?blogID=####

Dónde #### es nuestro BLOG ID. Si no sabes cual es tu BLOG ID, una manera sencilla de obtenerlo es ir a nuestra pestaña de diseño y fijarnos en la URL de nuestro navegador, veremos una dirección en la que al final podremos ver nuestro ID

Visto en Beatiful Beta

Aorta Widget

2008-06-27T18:35:00.006+02:00

Saludos de nuevo, ya hacía mucho tiempo que no me dejaba caer por aquí y la verdad es que aunque quería retomar un poco mi afición a esto de aprender un poquito sobre Blogger, entre unas cosas y otras no he podido. Así que hoy me cuelo 5 minutos y os comento un widget muy interesante que he visto últimamente. El widget nos lo brinda una vez más Hans de Beatiful Beta. Aorta es un artilugio con el que mostrar tus entradas de Blogger... pero no se queda ahí la cosa, ya que a estas alturas eso está ya más que sabido. La ventaja es que en este Widget ,es que es capaz de mostrar las actualizaciones de nuestro Blog, enlaces a nuestros vídeos de Youtube, álbumes de Picassa e incluso a las imagenes de Flickr. No requiere conocimientos previos para instalarlo ya que basta con ir a la página de instalción y rellenar el formulario. Una vez hecho, automáticamente se instala en nuestra plantilla (previo permiso, claro) y posteriormente desde nuestra página de diseño del Blog ubicarlo donde más nos convenga.

Formulario para instalar el widget.. ya veis que es muy sencillo

Nota: Antes de nada deberéis instalar en vuestra plantilla un script para permitir la instalación de widgets desde Beatiful Beta. Si es vuestro primer widget de esta página mirad primero esto.

Otras posibilidades de publicidad

2008-06-20T16:25:00.005+02:00

Hace tiempo que no escribimos en el blog pero creo que esto puede ser interesante para mucha gente,se trata de un sitio donde te ofrecen publicidad para la página y que no es adsense de google que casi todos conocemos.
A mi me gusta algo más que la opción de google porque te deja escoger la publicidad que quieres poner,eso siempre que cumplas unos requisitos mínimos (muuuuyyy mínimos).
Lo malo es que no pagan solo por click (excepto algun caso aislado) sino que cobras por registro o solicitud de más información o por compra de productos.
Se puede poner publicidad de los dos así que por probar ....
Para más informacion pinchar en el banner (no gano nada por click del banner tranquis ;)

[PsycHo] : Genera tu plantilla

2008-01-11T01:45:00.000+01:00

Eso exactamente conseguiremos en esta estupenda página. Con tan sólo seleccionar las opciones podremos crear una plantilla desde cero con un estilo muy particular. Absolutamente todo es configurable a gusto de cada uno, desde el número de columnas, situación, anchos, colores y fuentes, bordes... etc e incluso permite desde el propio editor configurar varios de los widgets integrados en la plantilla. Aunque sólo sea por curiosidad es algo que no debes dejar de probar, y para aquellos que quieran una plantilla a medida sin tener que hacer farragosas inmersiones en el editor HTML de Blogger es casi de visita obligada.

Click para ir al editor

Mapa de visitas: Maps.Amung.us

2008-01-11T01:30:00.001+01:00

Otro interesante y sencillo mapa de visitas al estilo de ClusterMaps o FeedJit, aunque en esta ocasión refleja únicamente el tráfico en tiempo real y no el acumulado. Como en aquellas ocasiones, la razón de comentar este y no los muchísimos otros que hay es debido a la sencillez de uso y la no necesidad de registrarnos en ninguna página. éste además se puede configurar en varios estilos a escoger para integrarlos lo mejor posible en la plantilla. Lo único que debemos hacer es seguir el enlace, seleccionar el estilo que queremos y copiar el código que nos proporcionan. Una vez hecho lo pondremos en nuestra plantilla en el lugar que más nos guste usando para ello "añadir elemento" como HTML/Javascript

Plantilla para Fotoblog

2008-01-10T00:39:00.000+01:00

Una plantilla ideada para aquellos bloggers que sobretodo quieran compartir fotos. La columna de posts es especialmente ancha para poder mostrar tus imágenes con un tamaño más que considerable y el resto del diseño de la página tiene un aspecto muy pulcro y cuidado. La he econtrado en el blog de Blog and Web, un blog en el que por cierto podréis encontrar multitud de información útil para construir vuestro blog.

Click en imagen para Demo y/o Descarga

Plantilla Goldfish

2008-01-06T07:22:00.000+01:00

Aire fresco en las plantillas de Blogger... entre las muchas alternativas que hay a las plantillas habituales esta me ha gustado especialmente. Es la primera plantilla creada desde cero por BlogU, otro blog de ayuda que suelo frecuentar.

Picha en la imagen para una demo de la plantilla

Entre las características de la plantilla cabe destacar:

Dos barras laterales
Nube de etiquetas
Bloques de citas personalizados
Favicon integrado

Para descargar la plantilla pásate por aquí.

¿Por qué usas Blogger?

2008-01-06T00:50:00.000+01:00

Esta era la pregunta de la anterior encuesta publicada en el Blog y ya, después de tanto tiempo, ya iba siendo hora de mostrar los resultados.

Las posibles respuestas eran:

Es el primero que conocí
Sencillez
Los múltiples hacks y widget
No conocer otras plataformas
Por recomendación de un tercero

Los resultados:

Es evidente que la mayoría de los Bloggers coincidimos en que es muy sencillo de usar, pero también ayuda el hecho de que muchos entramos en él por no conocer antes otros servicios similares que ahora, aunque ya conocemos, nos suele dar un poco de "miedo" empezar de cero.

Otras encuestas

Añadir "Blog reactions" a nuestros posts

2008-01-04T23:56:00.000+01:00

Con este pequeño truco vamos a añadir en cada una de nuestras entradas un vínculo que hace referencia a la repercusión en otros blogs de nuestros artículos. Muchos ya lo habréis visto en infinidad de páginas, pero para otros tal vez sea nuevo. Si tenemos un blog y queremos saber qué importancia o a qué otros bloggers les interesa nuestras entradas qué mejor manera que ver la repercusión que tiene cada una de nuestras aportaciones en la red de redes de los Blogs; Technorati.
Pues bien, con este sencillo código lo conseguiréis, eso si, tal vez los resultados no os gusten tanto... ;)

Lo primero es ir a la plantilla HTML y expandir los widgets.
Ahora buscamos la siguiente línea de código.

<p class="post-footer-line post-footer-line-3">

A continuación añadimos este script:


<script src="http://embed.technorati.com/linkcount" type="text/javascript"%gt;</script><a href="http://www.blogger.com/%22http://technorati.com/search/%22%20+%20data:post.url" rel="linkcount">View blog reactions</a>

Ojo con las aperturas y cierres de <p y </p>

Buenas de nuevo

2008-01-04T23:45:00.000+01:00

Hola de nuevo a todos.... la verdad es que ya casi ni me acuerdo de la última vez que entré en el blog y ya os felicito las fiestas y el año nuevo con retraso. La verdad es que no he dedicado mucho tiempo a una de mis aficiones, como es Blogger y reconozco que he tenido este blog muy desatendido. He visto la página con cierta asiduidad, pero algunos comentarios han quedado sin respuesta y la falta de novedades en Blogger y un poco de dejadez por mi parte han sido los culpables. Voy a intentar dedicarle de nuevo algo de mi tiempo a esto y a ver si yo mismo me acuerdo de qué era eso de Blogger.... ;)

50 Plantillas para Blogger

2007-09-14T13:25:00.001+02:00

Podrían ser miles, ya que si algo abunda en Blogger son plantillas, pero si que es cierto que el 90% de ellas son versiones ligeramente diferentes de las disponibles al crear el blog desde cero, las típicas Minima, Rounders ... etc. En esta ocasión se tratan de una recopilación de 50 plantillas realmente innovadoras, llamativas y totalmente diferentes a las clásicas. Desde luego yo pienso probar alguna de estas en algún que otro Blog que tengo por ahí. Animaos, porque seguro que más de uno encontráis varias que os gustes para vuestra propia página.

Unos ejemplos:

Para acceder a todas ellas pasaros por esta página.

Post aleatorio

2007-09-13T13:23:00.000+02:00

Si alguna vez has visto o te has interesado por el sistema de blogs de Wordpress habrás visto que es un widget bastante habitual en las páginas que usan este sistema el "Salta". Es un link en el cual cada vez que pulsamos nos llevará a una entrada aleatoria del blog, haciendo la navegación bastante entretenida y siempre distinta. Desde luego para este blog, la posibilidad de visualizar entradas de manera aleatoria quizá no sea de mucho interés, ya que los que llegan hasta aquí buscan algo en concreto, un código o una ayuda y desde luego es mejor navegar a través de las categorías... etc para encontrar lo que buscamos. Sin embargo hay muchos blogs que tratan temas muy diversos, humor, videos, o lo que sea en los que este widget puede cobrar interés, ya que el propio autor se puede sorprender al encontrar entradas que ya ni recordaba...

Todo esto que os cuento es porque ahora podemos usar este mismo sistema en Blogger gracias a Phydeaux3 (uno de los más famosos blogs de ayuda que pululan por la red). Par no entrar en complicaciones, su instalación pude hacerse de manera manual copiando el script en la plantilla y luego situando el vínculo donde queramos, o bien, lo más recomendable, hacerlo de manera automática y luego cambiando aquellas cosas que queramos modificar.

No tenéis más que ir a la página de instalación y darle a un botón para instalrlo en nuestra plantilla. Automáticamente nos llevará a la vista de diseño de blogger y lo movemos a la columna o zona que más nos convenga. Guardamos los cambios y ya está instalado.

Si nos vamos a nuestro Blog veremos que tenemos el Widget situado en donde decidimos antes y si tenemos la sesión de Blogger iniciada podemos editar el código clickeando en el botón de "Quick Edit" que veeremos en cada uno de los widgets de nuestra página.

El código que veremos será:


<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'VINCULO'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

La zona en rojo será el texto que escojamos para el vínculo (Salta, navega, pulsa para post aleatorio... etc) o bien podemos optar por una imagen con su texto. Para ello tendremos que usar las etiquetas IMG. Por ejemplo, tenemos la imagen de una flecha y queremos mostrarla en el vínculo seguido de la palabra "salta", bien, pues esto será lo que pongamos en la zona en rojo:

<img src="URL DE LA IMAGEN"/> Salta

Con esto ya debería ser suficiente para tenerlo listo.
Podéis ver que en la segunda columna lateral de este blog me he animado a usar este truco, probad, probad.

Códigos en los posts

2007-09-11T13:07:00.000+02:00

En uno de los comentarios me preguntan qué método uso para poder mostrar "widgets" dentro de un post. La verdad es que no tiene ninguna ciencia ya que lo único que hay que hacer es meter el código que nos dan en muchas aplicaciones de terceros. Se sigue el mismo método que al colocar un vídeo de Youtube dentro del post. No hay más que colocar el código que nos dan y listo. La pregunta venía por si tendríamos que usar alguna etiqueta especial para que Blogger lea el código y lo interprete como tal. Pues no, no hace falta hacer nada, de hecho el problema surge cuando queremos mostrar el texto de un código sin que Blogger lo interprete, pero eso ya es otra historia.

Existen infinidad de códigos proporcionados por terceros para mostrar en nuestros posts, sidebars o donde queramos. Por citar algunos ejemplos que uso a menudo (ya que hay infinidad de ellos), podríamos hablar de:

Reporoducir vídeo: Youtube, Googlevideos ... etc
Visualizar imágenes: Flickr, Slide ... etc
Feeds: Feedostyle, Feeddigest, FeedBurner ... etc

Y un larguísimo etc, que abarcan desde juegos en flash hasta chats y demás utilidades.

Por ejemplo, el feed de zona de pruebas de FeedBurner embebido con SpringWidgets

Get this widget!

El mismo feed, esta vez con FeedDigest:

FeedJit

2007-09-10T20:05:00.000+02:00

Una utilidad que a los amantes de las estadísticas y el tráfico de la página a buen seguro que les gustará. En un principio,cuando lo vi en Gem@blog, aunque la idea me pareció atractiva no le hice mucho caso ya que no era demasiado personalizable y a mi no me gusta encontrarme la plantilla llena de widgets de diferentes tamaños y colores llamativos. Soy más de la idea de mantener un tono o al menos procurar que la apariencia de una página sea más o menos uniforme. Ahora el widget es plenamente configurable en tamaños y colores con lo que es más fácil el hacer que encaje mejor en cualquier tipo de plantilla.

Entre las utilidades encontraremos un localizador en tiempo real de las visitas que nos llegan y de donde llegan. Un ejemplo:

Además también podremos ver las visitas recientes según su ubicación geográfica:

Todo ello de la manera más sencilla y sin tener que registrarnos en ningún sitio, simplemente pasar por la página de Feedjit y configurad vuestros propios widgets.

¿Qué os parece el sistema de encuestas?

2007-08-18T18:46:00.001+02:00

En la encuesta anterior preguntábamos precisamente que opinión os merecía el sistema en si. La respuesta fue bastante positiva y estos son los resultados.

Otras encuestas

Encuestas

2007-08-18T18:35:00.000+02:00

Ya que en los últimos días hemos estado probando un poco el sistema de encuestas que recientemente incorpora Blogger vamos a aprovecharlo un poco más para hacer de vez en cuando alguna encuesta y preguntaros vuestra opinión sobre alguna cuestión relacionada con el contenido de Zona de Pruebas.
Las encuestas las encontraréis (salvo futuras modificaciones de plantilla) en la zona superior de la segunda columna lateral.

Encuestas:

Mejora para el truco de Leer más

2007-08-18T11:51:00.000+02:00

Una manera muy vistosa de redecorar el truco de leer más que ya vimos en este otro post. Con estos pasos conseguiremos un efecto fade in y fade out estupendo en el texto oculto. El truco es obra de Hackosphere (una vez más) y me parece realmente vistoso.
Para instalar el truco en nuestra página tendremos que hacer un par de incursiones en la plantilla. La apariencia final depende del color de fondo que tengamos en nuestros posts, así que para evitar el tener que andar entrando en el editor de HTML para ir cambiando los códigos de colores hasta encontrar el que más nos guste yo opto por crear una variable de color para poder cambiarla cómodamente desde "Colores y Fuentes" sin tener que bucear en la plantilla o liarnos con los códigos de colores.

Así pues buscamos en la plantilla, casi al principio, la zona en la que se definen las variables y añadimos esta:

<variable name="peekbgcolor" description="color fade" type="color" default="#fff" value="#f2984c">

Después buscamos la etiqueta de cierre </head> y justo encima ponemos este script:


<script src='http://anniyalogam.com/scriptaculous/src/prototype.js' type='text/javascript'/>
<script src='http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects' type='text/javascript'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = peekbgcolor$;
</script>


Tan sólo nos queda un paso más y es localizar esta línea en nuestra plantilla y borrarla:

<style>#fullpost {display:none;}</style>

Ahora el truco ya está instalado en la plantilla. Para usarlo no tendremos más que usar en los posts donde queramos que aparezca la siguiente estructura:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>

Prueba a mostrar el texto

Tras la etiqueta fullpost colocamos todo el texto oculto que queramos mostrar sólo al pulsar sobre "sigue leyendo", "leer más" o lo que hayamos escogido. El efecto que se consigue con esta mejora es bastante vistoso.

Plantilla Zona de Pruebas Rounders con columnas a ambos lados

2007-07-16T01:17:00.000+02:00

Como veo que es una demanda relativamente popular y que no os animais a transformar vosotros mismos la plantilla ;) , os dejo esta ya lista para usar.

Características:
- Columnas a ambos lados de los posts
- Dropcaps preinstalado en plantilla y modificable desde "colores y fuentes"
- Bloques de citas preinstalado y modificable desde "colores y fuentes"
- Emoticonos
- Posts expandibles (pekaboo)

[Descarga]

Problemas con los Posts expandibles?

2007-07-15T08:27:00.000+02:00

Tal vez hayas instalado los Posts Expandibles en tu blog siguiendo las instrucciones de este Blog, o tal vez desde otro pero igualmente experimentes (o vayas a experimentar) problemas en su funcionamiento. Esto es debido a que muchos trucos que usamos los Bloggers tienen la misma procedencia con lo que es posible que usemos el mismo script... lo que quiero decir es que si no estás seguro vale la pena que le eches un vistazo. La cuestión es que el sistema que usamos en esta página y otras muchas es gracias a un Script de Hackosphere. Lo que ha ocurrido es que la página en la que se haya hospedado dicho script se ha visto desbordada de tal manera que no funciona correctamente. Para solucionarlo deberemos eliminar la linea de código que instalamos en su momento e instalar el script completo en nuestra plantilla justo encima del cierre </HEAD>. Una vez hecho, los problemas desaparecerán.

Gracias a Hackosphere por compartir su script, su espacio y su tiempo.

El script completo lo teneis aquí

Actualizacion: Parece ser que la página con el script ya no está disponible... aquí os lo dejo:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>

Encuestas en Blogger

2007-07-15T03:03:00.001+02:00

Hacía ya bastante tiempo que no me pasaba por la página de diseño de Blogger... entre otras cosas ando bastante liado y de hecho este blog necesita rápidamente actualizar sus contenidos, pero el caso es que hoy, echándole un cable a un amigo en su página, me he encontrado que los chicos de Blogger han incluido un nuevo elemento de fácil instalación en nuestros blogs: Las encuestas. Hasta ahora existían muchos métodos para poder incluir encuestas en la página, pero muchas de ellas necesitaban de terceros para funcionar, con el engorro que ello supone. Con motivo de esto he probado el sistema, que a mi me parece bastante sencillo, pero eficaz y he creado una pequeña encuesta sobre las encuestas ;) para probar. Para todos aquellos que no suelen entrar en las páginas de diseño del blog, avisarles de que desde ya tienen esta posibilidad y es francamente fácil de usar.

Para los más intrépidos o aquellos que suelan tener encuestas en sus páginas pueden meterse de lleno en la personalización buscando el widget de encuestas en su plantilla. Esto es lo que nos vamos a encontrar:

<b:widget id='Poll1' locked='false' title='TITULO ENCUESTA' type='Poll'>
<b:includable id='main'>
<div class='widget-content' id='widget-content'>
<h2><data:title/></h2>
<iframe allowtransparency='true' expr:height='data:iframeheight' expr:name='"poll-widget" + data:pollid' expr:src='data:iframeurl' frameborder='0' style='border:none; width:100%;'/>
<b:include name='quickedit'/>
</div>

Plantilla Rounders 4 con sidebars a ambos lados

2007-06-13T05:24:00.001+02:00

Hace ya tiempo, en alguno de los comentarios de este blog se me preguntaba como se podía pasar de una plantilla Rounders 4 (como la plantilla primigenia de este blog) a una en la que tuvieramos columnas laterales a ambos lados. La verdad es que anduve un poco liado, pero estos días he vuelto a retomar el blog y me he acordado de esa cuestión.

La solución para transformar la plantilla pasa por una serie de incursiones en el editor HTML con la que los errores son bastante habituales así que es conveniente hacer una copia de nuestra plantilla por si las moscas... ;)

Los pasos que cito a continuación son teniendo en cuenta que el punto de partida sea una ROUNDERS 4 sin modificaciones en las sidebars, es decir, una ROUNDERS nativa o al menos lo más posible en la estructura.

Lo primero que vamos a hacer es cambiar ciertos parámetros de la anchura total del blog. Buscamos en nuestra plantilla este código:

#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: $bodyFont;
}

Cambiamos el valor 740 por 995

Justo a continuación encontraremos este otro fragmento:

#main-wrap1 {
width:485px;
float:left;
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

En la linea resaltada añadimos 15px de manera que nos quedará así:

margin:15px 0 0 15px;

Seguimos bajando por la plantilla y un poco más abajo encontraremos esto:

#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Justo detrás añadiremos esto:

#newsidebar-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrap1 {
background:$mainBgColor url
("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#newsidebar-wrap2 {
background:url
("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
padding: 10px 0 8px;
}

Al haber variado los tamaños y teniendo en cuenta que esta plantilla tiene los bordes redondeados tendremos que sustituir las imágenes para los bordes del header y del footer.

Buscamos la primera sección :

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:0 15px 8px;
}

Las líneas en rojo son las nuevas imágenes que tendremos que poner en lugar de las de la plantilla original.

Hacemos exactamente lo mismo con la siguiente sección:

#footer-wrap2 {
background:$titleBgColor url
("http://www.blogpulp.com/imagehost/images/1008314701.gif") no-repeat left top;
padding:8px 0 0;
color:$titleTextColor;
}
#footer {
background:url
("http://www.blogpulp.com/imagehost/images/196653871.gif") no-repeat left bottom;
padding:8px 15px 8px;
}

Bueno, ya queda poco... ;)
Buscamos esta sección y añadimos la linea en rojo:

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #newsidebar-wrap,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

Unas líneas más abajo encontraremos el ancho del #outer wrapper que hay que sustituir por 995 pixels, así que nos quedará de esta manera:

body#layout #outer-wrapper {
width: 995px;
}

Ya sólo nos queda un paso por dar. Buscamos esta sección:

<div id='main-wrap1'><div id='main-wrap2'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div></div>

<div id='sidebar-wrap'>

y justo encima ponemos todo esto:

<div id='newsidebar-wrap'>

<div id='newsidebar-wrap1'><div id='newsidebar-wrap2'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div></div>

Con esto ya debería de estar todo perfectamente. Ahora tan sólo nos queda guardar y una vez comprobado que no hay errores, ir a la plantilla de diseño y colocar los widgets, códigos... etc que deseemos para adecuar nuestro blog al nuevo estilo.

Si tenéis alguna duda o algo no va bien (exceptuando erratas que puedan haber surgido) podeis revisar paso a paso el proceso en Tips for New Blogger.

Tu foto o avatar en los comentarios

2007-06-11T01:48:00.000+02:00

Gracias a este truco que nos brinda PurpleMoggy´s Blog podremos visualizar nuestras fotos o avatares de Blogger junto a los comentarios que dejemos en las entradas.
Para lograrlo tendremos que efectuar un par de pasos en la plantilla, pero nada demasiado complejo.

Una vez hecha una copia de seguridad de nuestra plantilla, nos moveremos por el editor HTML con los widgets expandidos y buscamos la sección de comentarios de nuestro blog:

Las líneas resaltadas en Rojo son las que tendremos que añadir a nuestra plantilla exactamente en las posiciones en las que veis arriba. Después de asegurarnos haber añadido correctamente este par de líneas, subiremos por nuestra plantilla hasta la etiqueta de cierre </HEAD> y justo encima añadimos estas líneas:

Actualizacion: Al cambiar ciertas partes del código para poder mostrarlo en un post he cometido algún error. Las lineas que hay que cambiar son estas, pero nolas he borrado arriba para no cometer el mismo error y de paso dejarlas en sus posiciones para que sirvan de referencia para encontrarlas en la plantillas.

Primera linea a cambiar:
<div class='commentphoto' style='float:right;'/>

Última linea a cambiar:
<div style='clear:both;'/>

Corregir "0 comentarios" y "1 comentarios"

2007-06-10T05:25:00.001+02:00

Tal y como viene la plantilla de blogger, en aquellas entradas en las que no hay todavía ningún comentario podemos leer "0 comentarios", que hay que reconocer que no queda demasiado bien, aunque es bastante peor cuando sólo hay un comentario y leemos "1 comentarios". Con este truquillo sacado del Wiki de BeatifulBeta vamos a subsanar ese pequeño fallo.

Para ello tendremos que meternos de lleno en la plantilla, expandir los widgets y buscar este código:

En este fragmento de código tenemos los condicionales que le dicen a Blogger que palabra añadir tras el valor numérico de los comentarios. Si quereis comprender este truco y hacerlo paso a paso podéis visitarlo en el propio Wiki donde está explicado, pero si lo que queréis es hacerlo todo de un tirón y evitar así problemas con los cierres de las etiquetas, ya que es fácil confundirse, mi consejo es que borréis toda esa sección y la sustituyáis por esta otra:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:post.allowComments'> 
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'> No hay comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>1 comentario
<b:else/><data:post.numComments/> comentarios
</b:if>
</b:if>
</a>
</b:if>
</b:if>
</span>

Las zonas coloreadas son las que podemos cambiar para añadir el texto que deseemos. La primera es cuando no hay comentarios. La segunda cuando hay un comentario y la última para todas las demás posibilidades, es decir, de 2 comentarios en adelante.

Postreach

2007-06-09T23:55:00.000+02:00

Un nuevo servicio orientado al mundo de los blogs. En este caso se trata de una utilidad que permitirá incluir un nuevo sistema de comentarios al estilo de los marcadores sociales ya que además de permitir a los más vaguetes dejar su opinión en un post con un solo click, desde la página de Postreach podremos ver los posts de diferentes blogs dependiendo de los clickeos acumulados en cada uno... vamos, al más puro estilo Digg, Fresqui, Meneame... etc.
Además de este novedoso sistema de comentar los posts, que podéis ver instalado en este mismo blog, nos permitirá tambien intercambiar posts con otros blogs registrados, esto quiere decir que en nuestro blog aparecerá una reseña de una entrada de otro blog (que en principio debería ser de la misma temática que el nuestro... pero ya veremos si con el tiempo esto se hacer realidad) y a cambio nuestras entradas saldrán en otros blogs. Un buen sistema para publicitarnos y darnos a conocer en otras páginas que en teoría, tienen temáticas similares.

Para instalar el sistema de comentarios simplemente tenemos que ir a su página y rellenar un sencillo formulario en el que incluimos nuestra URL, idioma y temática. Una vez hecho esto se autoinstalará en nuestra plantilla. Si luego queremos eliminarlo no tendremos más que ir a la edición HTLM de nuestro blog y buscar este código (sin expandir widgets):

<b:widget id='HTML13' locked='false' title='Comenta con un Click' type='HTML'/>

Este es el correspondiente a mi plantilla, pero depende del nombre que le pongais al widget en vuestro caso.

Para instalar el sistema de intercambio de Posts (Guestpost) deberemos rellenar una serie de campos en la página de Postreach similares a los que pusimos en el de los comentarios. Una vez hecho esto, deberemos añadir el código que nos proporcionan en la plantilla, pero esta vez hay que acordarse de expandir los widgets.

Truco de "Leer más..." (II parte)

2007-06-09T04:41:00.000+02:00

Inconformista que es uno y haciendo honor al título del blog, el truco anterior no ha superado la Prueba y aunque el resultado no es malo y no en todos los blogs da problemas, me he puesto a buscar alternativas, que haberlas hailas y vamos a probar otro sistema.

Este otro sistema requiere un poquito más de trabajo a nivel plantilla y puede que alguno de los pasos sean necesarios en unos blogs si y otro no. Lo primero que hay que hacer es añadir un script justo encima del cierre </HEAD>

Añadimos este código:

<script type='text/javascript' src=
'http://www.anniyalogam.com/widgets/hackosphere.js' />

Si como yo, eres un habitual de los trucos de HACKOSPHERE es casi seguro que ya tengas esta línea incluída así que no será necesario añadirla.

El siguiente paso nos lleva a la zona de plantilla referida a los posts. Para encontrarla deberemos expandir la plantilla de artilugios y buscar este código:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Lo seleccionamos por completo y lo borramos, sustituyendolo por este otro:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Sigue leyendo</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Ocultar texto</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

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

Una vez hecho esto el sistema ya está incluido y lo único que tendremos que hacer para utilizarlo es usar esta estructura en los posts:

TEXTO SUMARIO
<span id="fullpost">
TEXTO OCULTO
</span>

Truco de "Leer más..."

2007-06-09T03:30:00.001+02:00

En muchas páginas vemos como muchos de sus posts tienen contenido expandible mediante un vínculo "leer más", "sigue leyendo" .. etc. Este truco es fácilmente incluible en cualquier blog y además, por su sencillez de uso es recomendable instalar para usar al menos en las entradas más largas que al final afean un poco la apariencia del blog, por lo que siempre es últil el contar con la posibilidad de poder mostrar un sumario o el post completo con un simple click.

Para incluir este truco en nuestra plantilla lo primero que hay que hacer es irnos al editor HTML y explandir la plantilla de artiluigios. A continuación buscamos este código:

<div class=’post-body’>

Y justo debajo añadimos este otro:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

justo debajo debería aparecer esta línea:

<data:post.body/>

y a continuación introducimos lo siguiente:

<a expr:href='data:post.url'>Leer más...</a>
</b:if>

Hecho esto podemos guardar nuestra plantilla y ya estamos listos para usar el sistema de sumario/post completo en cualquier entrada. Para ello deberemos seguir la siguiente estructura en un post:

SUMARIO (texto que siempre se muestra)

<span class="fullpost">

TEXTO OCULTO (resto del post, que sólo se mostrará al pulsar en "leer más...")

</span>

Este truco lo he visto en Blogmundi

Actualizo: ~~De momento voy a mantener este sistema~~, aunque he visto y no es cosa sólo mía que a pesar de que no uso este truco en todos mis posts, el vínculo de leer más aparece al final de cada una de mis entradas. En aquellas que no hay texto oculto lo único que hace es dirigirnos al permalink de esa entrada con lo cual una manera un poco cutre de solucionar este fallo, de momento es sustituir el texto "leer más..." del código que hemos visto por algo así como "ver post completo/ ver comentarios"... ;), un poco chafardero?... pues si...

Plantillas Neo abiertas al público

2007-06-09T02:37:00.000+02:00

Finalmente los chicos de Hackosphere han decidido compartir de manera gratuita su sistema de plantillas NEO. Si aún estás construyendo tu blog o bien no tienes reparos en hacerle un buen tuneo no pierdas la oportunidad de poseer una de las plantillas más exclusivas y vistosas disponibles para Blogger. Para ver una previsualización de tu blog bajo este sistema no tienes más que introducir la URL de tu página en la siguiente dirección. Si finalmente decides pasarte a este sistema, descárgate la plantilla desde aquí.

Calendario de Posts

2007-04-20T10:37:00.000+02:00

Si veis el calendario que hay en la primera columna lateral de esta misma página podreis ver más o menos de lo que se trata. Este truco consigue sustituir el sistema de "archivos" de blogger por un calendario interactivo en el que podremos revisar nuestras entradas en función de la fecha. El truco requiere un par de incursiones por la plantilla, pero se pueden hacer en un mismo paso. Lo único que hay que hacer, como siempre, es hacer previamente una copia de nuestra plantilla para evitar problemas y después nos ponemos manos a la obra.

Localizamos en nuestra plantilla el cierre </head> y nos ponemos a trabajar justo encima. El truco consta de dos códigos que para ahorrar tiempo pondremos en un solo paso:

<script src='http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js' type='text/javascript'/>
<link href='http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>
//<![CDATA[
/*
Created by: PurpleMoggy
http://purplemoggy.blogspot.com
*/

var _yourBlogUrl = "http://karalletest.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this

_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);

var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

YAHOO.namespace("example.calendar");

function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};

var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();

document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

checkPostsForMonth(month, year);
};

function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function checkPostsCallback(json) {

if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;

if (day.substr(0,1) == "0") {
day = day.substr(1);
}

document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

}
YAHOO.example.calendar.cal1.render();
}

document.getElementById("cal1loadimg").style.display = "none";

};

function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}

var myCustomRenderer = function(workingDate, cell) {

var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}

cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;

}

var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];

var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];

if (day.toString().length == 1) {
day = "0" + day;
}

if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day +
"T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day +
"T23%3A59%3A59" + _yourBlogTimeZone;
}

};

var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}

var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());

var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());

var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}

YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};

YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>

Las zonas en rojo se corresponden con la dirección de la página donde lo instalemos y con la zona horaria en la que publicamos los posts.

Después, una vez guardada la plantilla vamos a la página de diseño y añadimos un elemento como HTLM al que podemos titular como mejor nos convenga. El Widget en cuestión es este:

<div id="cal1wrapper">

<div id="cal1select">

<select id="cal1monthselect" name="cal1monthselect">
<option value="0"/>Enero
<option value="1"/>Febrero
<option value="2"/>Marzo
<option value="3"/>Abril
<option value="4"/>Mayo
<option value="5"/>Junio
<option value="6"/>Julio
<option value="7"/>Agosto
<option value="8"/>Septiembre
<option value="9"/>Octubre
<option value="10"/>Novimbre
<option value="11"/>Diciembre
</select>
<select id="cal1yearselect" name="cal1yearselect">
<option value="1995"/>1995
<option value="1996"/>1996
<option value="1997"/>1997
<option value="1998"/>1998
<option value="1999"/>1999
<option value="2000"/>2000
<option value="2001"/>2001
<option value="2002"/>2002
<option value="2003"/>2003
<option value="2004"/>2004
<option value="2005"/>2005
<option value="2006"/>2006
<option value="2007"/>2007
<option value="2008"/>2008
<option value="2009"/>2009
<option value="2010"/>2010
<option value="2011"/>2011
<option value="2012"/>2012
<option value="2013"/>2013
<option value="2014"/>2014
<option value="2015"/>2015
<option value="2016"/>2016
<option value="2017"/>2017
<option value="2018"/>2018
<option value="2019"/>2019
</select>
<input id="cal1dateselect" value="-->" type="button"/>

</div>

<div id="cal1Container"><img style="vertical-align:middle;
" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Loading...</div>
<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img style="vertical-align:middle;" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Cargando...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>
Un vez ubicado en donde más nos guste y guardados los cambios ya estará listo. Tenemos un estupendo sistema de archivos incluído en el calendario en el que con tan solo pasar el ratón por el día seleccionado veremos los posts que se hicieron en esa fecha.

Este truco es obra y milagro de PurpleMoggy, al que desde aquí le doy las gracias. ;)
Si teneis algún problema en la instalación ya sea porque algo no se entiende o por algún posible error al mostrar el código en el post (a veces, al transformar los <> para que se puedan mostrar se puede cometer algún error...), pasaros por la página original del truco para verlos mejor.

Tabla de Contenidos

2007-04-12T23:51:00.000+02:00

Ya habíamos visto como poner los contenidos de nuestro blog según las categorías de cada uno de nuestros posts. Ahora vamos a ver algo parecido, pero que a mi me ha encantado y es que podremos ver TODOS nuestros posts listados por fecha y categorías en un perfecto orden alfabético y todo expandible y retraíble en nuestra página principal. Este truco me ha parecido de los mejores que he visto últimamente y como tantos otros se lo debemos a Beatiful Beta, que ultimamente está realmente activo y como es de ley, en Zona de Pruebas lo hemos puesto a eso... a prueba. El resultado es excepcional así que os comento cómo y qué hacer para ponerlo en vuestro blog. Si quereis saber un poco más de que se trata antes de poneros manos a la obra no teneis más que probar la "Tabla de Contenidos" de mi segunda barra lateral.
Tenemos que realizar unos cuantos pasos previos:
Lo primero, como siempre, es hacer una copia de seguridad de nuestra plantilla por lo que pueda pasar. El truco comienza en la plantilla de HTML si aún no hemos habilitado la zona superior de los posts para introducir elementos, así que si es el caso, primero hay que modificar la plantilla para permitirlo y lo podeis ver paso a paso en este otro post. Ahora nos vamos a la página de Diseño de nuestro Blog y justo encima del área de Posts añadimos este código como HTML y sin poner ningún título:

Guardamos los cambios y nos vamos a la columna lateral en donde queramos poner el truco en cuestión. Me refiero simplemente al vínculo que hará que se muestre u oculte el listado de posts, ya que la tabla se mostrará siempre en el área principal del blog, justo encima del post que tengamos al principio. Añadimos como HTML este código:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://TUBLOG.blogspot.com/feeds/posts/default?
alt=json-in-script&max-results=999&callback=loadtoc"></script>

Cambiar TUBLOG por el nombre del Blog donde lo estemos instalando.

El último paso es pegar los "estilos" que tendrá la tabla de contenidos. Es totalemente editable a gusto de cada uno, pero como ejemplo pondré el que estoy usando yo ahora mismo, que es igual que el de la fuente original excepto el color y el ancho, para ajustarlos mejor a mi diseño.

Los estilos se pueden poner en la zona <b:skin> de nuestra plantilla, pero yo he tenido problemas así que la solución más sencilla y que además facilita mucho la localización del código es introducirlo como un elemento HTML justo encima del código del script que hemos puesto en el paso anterior. El código para los estilos es el siguiente:

A partir de ahora podremos mostrar u ocultar nuestra tabla de contenidos (últimos 100 posts, aunque ya existe la manera de mostrar todos, pero ya se explicará si fuera necesario...). La tabla mostrará 3 columnas. En la primera veremos los títulos de los posts ordenados alfabéticamente y vinculados a su página correspondiente, de manera que podremos ir a cualquier artículo de la lista con un simple click. En la segunda columna veremos la fecha en la que fue editado por última vez ese post y en la tercera veremos las categorias bajo las cuales fue publicado con el añadido de que si pulsamos en las categorías listadas podremos hacer un filtro de la tabla para que sólo muestre los artículos de esa categoría en concreto. Por si fuera poco, permite ordenar el listado en función del título o de la fecha con tan sólo pulsar en el título de la columna que queramos y además, si hacemos filtrados por categoría y queremos ver todas nuevamente, no tendremos más que pinchar en el título de la columna de las categorías. No me digais que no es un truco realemente impresionante. :D

Snap Multi lenguaje

2007-04-06T12:33:00.000+02:00

Habíamos visto hace unas semanas como instalar Snap en nuestra página. Pues bien, partir de ahora ya cuenta con soporte para varios idiomas con lo que si queremos actualizarlo deberemos volver a su página y repetir los pasos de instalación nuevamente.

Contenidos por categorías

2007-04-04T19:41:00.000+02:00

Es otra manera interesante de presentar las categorías, pero con un par de ventajas. Una es que nos muestra las entradas de cada categoría por separado y la otra es que podemos hacer que muestre sólo alguna de las categorías. El truco está explicado en alguno de los comentarios del blog, en otro apartado, pero como es de ley vamos a dedicarle un post. El código completo lo podeis copiar de la página del creador original del truco. Su instalación es sencilla. No teneis más que ir a la edición de HTML de vuestra plantilla y EXPANDIR la plantilla de WIDGETS. Una vez allí, buscamos una zona cualquiera del blog para colocarlo (nunca en el MAIN, ya que no nos deja poner widgets en el área dedicada a posts), ya que luego desde la plantilla de DISEÑO lo podremos mover sin problemas. Una vez seguros de que estamos en la zona de la plantilla adecuada, buscamos el cierre de un WIDGET identificado por <b/widget> y pegamos a continuación el código que copiamos de la página original del truco. Después tenemos que cambiar una serie de parámetros en el widget, que son:

var homeUrl2 = "tublog.blogspot.com";
var labels = ["categoria","categoria2","categoria3"];

Como veís no hay más que añadir la URL de tu página y añadir entre comillas el nombre de la categoría que quereis que se muestren. Aquí está el problema, el widget no identifica más que tres palabras para cada categoría y también tiene problemas con los acentos y las "ñ" con lo que habrá que tener cuidado como nombramos nuestras categorías si queremos usar este truco.

Otra cosa a tener en cuenta es que no a todo el mundo le interesa que se muestren los títulos de cada categoría encima de los vínculos a las entradas, cosa que le ocurría a uno de nuestros habituales, Batto de Ramen Para Dos. Si ese es vuestro caso no teneis más que buscar una línea de código en el widget y borrarla. La línea en cuestión es esta:

h.appendChild(txt);

Menú Desplegable para Enlaces

2007-03-28T11:38:00.000+02:00

Una vez que tenemos muchos enlaces o bien queremos varios grupos distintos de enlaces podemos encontrarnos con que nos ocupan demasiado espacio en el lugar donde los pongamos. Una manera sencilla pero eficaz es crear un menú desplegable para los mismos. Para los que no sabemos mucho del tema, siempre nos quedará el recurso externo así que en esta página tenéis una sencilla aplicación con la que crear un menú muy cumplidor. De todos modos, en breve dejaré por aquí otra manera de hacer lo mismo, pero mucho más vistosa, aunque también requiere más trabajo.

Un ejemplo:

Un nuevo wiki

2007-03-28T11:30:00.000+02:00

Beatiful Beta Wiki abre finalmente sus puertas. De momento pocas novedades hay, pero es una página de obligatoria visita para los que os guste estar a la última de trucos para Blogger. Como siempre, si veo algo interesante... bueno, interesante es todo, pero algo realmente que me guste mucho, pondré aquí las explicaciones como siempre, de manera facilita para los que nos sabemos tanto. Mientras tanto podéis ir echandole un vistazo a esta nueva página dedicada al destripamiento de Blogger.

Feevy

2007-03-12T10:50:00.001+01:00

Un servicio externo con el que poner listas de enlaces, vínculos y últimas actualizaciones de tus blogs favoritos. No hay más que registrarse en su página principal, cosa que no lleva ni 2 minutos y proporcionarles las URL de los blogs que queremos seguir. Se nos proporciona una línea de código que podremos colocar en la zona del blog que más nos guste.

He quitado el ejemplo porque ralentizaba mucho la carga de la página... tal vez tengan problemillas estos días...

Feeds y categorías

2007-03-10T00:57:00.000+01:00

Un estupedo Widget con el que mostrar las categorías de nuestro blog y al mismo tiempo ofrecer sindicación para cada una de ellas por separado. La instalación puede hacerse de diferentes maneras, pero aquí os dejo la manera más "compacta" y sencilla que no requiere scripts ni modificaciones complejas en el modo de edición HTLM de nuestra plantilla. Simplemente hay que introducir este código justo después de un widget (tras el <:b/widget>)

<b:widget id='Label50' locked='false' title='Feeds' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

La línea en rojo se corresponde con la dirección de la imagen que aparecerá justo delante del nombre de cada categoría. Evidentemente se puede cambiar por la que creais que se ajusta mejor a vuestro diseño.

Hay que tener en cuenta que es casi seguro que en tu plantilla ya exista un widget cuya id=´label´así que en mi caso lo he llamado label50, pero se puede cambiar la numeración para evitar que coincida con alguno de vuestra plantilla. Después de haberlo instalado no tendremos más que ir al diseño de nuestro blog y colocarlo en donde más nos guste. Para verlo funcionando no hay más que echar un vistazo en la columna lateral derecha de este mismo blog.

Gracias a PurpleMoggy´s Blog

Hacer un Mapa de Imagen

2007-03-03T14:04:00.000+01:00

Lo que vamos a intentar hacer es crear una imagen en la que dependiendo en que zona pinchemos con el ratón nos lleve a diferentes sitios. Vamos, que lo que vamos a hacer es una imágen con varias zonas con diferentes vínculos. Una vez que tenemos una imagen y la hemos subido a alguna página tenemos que definir las áreas en las que la vamos a dividir. Los parámetros que definen un mapa de imagen son los siguientes:

<MAP>....</MAP> Entre estos tags meteremos todo el código del Mapa de Imagen y deberemos definir el area que vamos a definir como activable. Se pueden usar diferentes áreas, pero aquí vamos a ir a lo sencillo, que es el rectángulo. Para ello debemos poner <AREA shape=rect coords="x,y,x2,y2" donde X,Y son las coordenadas de la esquina superior izquierda y X2,Y2 las coordenadas de la esquina inferior derecha del rectángulo que definimos.

Tal vez se vea mejor con un ejemplo:

El código usado para este ejemplo ha sido este:

<img src="http://img119.imageshack.us/img119/4982/sinttulo1gw5.jpg" usemap="#ejemplo" height="50" width="300" border=0/>
<map name="ejemplo">
<area shape="rect" coords="0,0,94,50" href="http://www.google.es">
<area shape="rect" coords="96,0,200,50" href="http://www.yahoo.es">
<area shape="rect" coords="202,0,298,49" href="http://www.altavista.com"></map>

Si quereis saber más sobre Mapa de Imágenes o ver como hacer diferentes áreas (círculos, polígonos) pasaros por esta página: Webestilo

Botones para las categorías ??

2007-03-02T06:44:00.000+01:00

¿Será esto tal obviedad que por eso no lo había visto comentar nunca?. ¿es que no se pueden usar directamente las URL de las categorías para mostrarlas?. Vamos a probar... la URL de una categoría en el nuevo Blogger viene siendo de esta guisa:

http://TUBLOG.blogspot.com/search/label/CATEGORIA

Ahora, para el ejemplo cogeremos una imagen cualquiera para probar

La dirección en este caso es /index.htlm

Ahora es /categorias

Si pulsas en el botón verás que te lleva a la categoría correspondiente.

Lo único que tenemos que hacer es crear un hipervínculo para cada imagen con la dirección de la categoría que queramos. Luego la podemos poner en la parte del Blog que más nos guste... que es tedioso... pues si, pero simple a más no poder.

En este caso he usado Blogger para subir las imágenes, de ahí el borde, que se podría quitar, pero para el ejemplo bien valen. Desde luego se pueden hospedar en cualquier sitio.

Lo que es evidente, es que este método es lento, aburrido y demasiado de andar por casa, pero si creas una imagen (Mapa de Imagen, que veremos como se hacen) en la que haya diferentes vínculos según la zona donde pinches con el ratón, puedes hacer una imagen para la cabecera con un logo o icono para cada categoría que tengas. Eso si, esto sería mejor hacerlo una vez que tu blog tenga ya las categorías bien definidas ya que para añadir cada una de ellas necesitas una imagen o un botón nuevo para poder linkearla a la dirección de la categoría.

Para acabar, dejo aquí unas cuantas páginas con Generadores de Botones para facilitar el proceso:
- Webtaller
- Starchat1
- Buttonator

Protege una imagen

2007-03-02T03:48:00.000+01:00

Este código sirve para que quede deshabilitado el botón derecho del ratón sobre una imagen en concreto que pongamos en el blog. Puede resultar útil si el blog que estamos creando sirve para dar a concer diseños, fotos o cualquier imagen que no queramos distribuir sin permiso, aunque también es cierto que siempre queda el recurso de "Imprimir página" y pegarla luego al photshop... pero al menos esto sirve para incordiar... ;)

Si tenemos una imagen hospedada en blogger o cualquier otra página, por ejemplo:

http://www.technewsdaily.net/uploaded_images/google-girl-780952.jpg

tenemos que añadirle el siguiente código:

<p align="center"><img oncontextmenu="alert('Mía... sólo mía.... ');return false" oncopy="alert('Mía... sólo mía.....');return false" src="http://www.technewsdaily.net/uploaded_images/google-girl-780952.jpg" /></p><p style="text-align: left;"></p>

Prueba si no...

Que conste que yo comprendería el no querer compartirla.... :P

Este truco se lo he birlado a Gem@Blog

Por cierto... hay que ver lo bien que funciona Google para según que cosas, porque indexar una página mira que le lleva tiempo, pero ha sido poner esta fóto y ya sale en mi NavBar: "Notificar a Blogger contenido de dudosa reputación"... anda que si llego a poner una foto sin camiseta... no se yo que iban a hacer :D

Mapa de Visitas

2007-03-02T02:16:00.000+01:00

Existen numerosas utilidades que hacen lo mismo, algunas de ellas más completas con geolocalización, identificación de IP, visitantes en línea... etc. Seguramente veremos más de estas utilidades, pero la que vengo a comentar ahora es ClusterMaps, porque para mi gusto es de las más elegantes, poco chillonas y ocupa poco espacio en tu blog.

Lo único que hay que hacer es registrarse en la página principal y esperar por un password que te enviarán al mail que les hayas proporcionado. Una vez que se tiene acceso, te proporcionarán un código para que lo insertes en la zona del blog que más te guste. A partir de ese momento, todas tus visitas se mostrarán en el mapa mediante círculos que representan desde donde y qué cantidad de usuarios se conectan. Además, pulsando sobre el mapa os llevará a su página donde veréis el mapa con más detalle y un contador de visitas. Te sorprenderás de la cantidad de gente de países distintos llegan a tú página.. aunque hay que reconocerlo, muchas de las vistias de EE.UU. pertenecen a Blogger cada vez que actualizas algo en tu plantilla... :P

Zona de Pruebas :: Rounders Template

2007-03-02T01:44:00.000+01:00

Disponible para descarga una nueva plantilla para uso y disfrute general

--------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
3 Column update by: Hoctro
Re Updated by: Zona de Pruebas
----------------------------- */

Características principales:

- Tres Columnas laterales (dos estilos)
- Categorías tipo "etiquetas" en la cabecera
- Categorías Multi Estilo
- Snap integrado
- Emoticonos
- Posts expandibles - Código de autoinstalación de Widgets
- Posibilidad de introducir código en la cabecera, las columnas laterales, el pie de la página y las zonas superior e inferior de los posts
- Dropcaps: Primera letra del post de mayor tamaño
- Bloques de citas: Personalizable desde el panel de Blogger
- Iconos de navegación
- Barra de navegación de Blogger oculta
- Comentarios con color: Personalizables desde el panel de Blogger

Vista previa

[DESCARGA]

Añadir META

2007-03-01T22:49:00.000+01:00

El META son una serie de etiquetas que deberemos tener en el blog para que los buscadores puedan encontrar e indexar nuestra página con facilidad. Tarde o temprano cualquier página es indexada por los buscadores más potentes, pero añdiendo los META informaremos a los robots de los cambios para así indexar nuestra página más rápidamente posible, además, será más probable el que nuestra página aparezca en el buscador si introducimos en los META las palabras claves que describan mejor a nuestro blog.

El código debe ser insertado entre <Head> y </Head> y es de este estilo:

En el primer campo en rojo introduciremos una breve descripción de nuestro blog, de que trata... etc. En el segundo campo introduciremos las palabras clave (Keywords) que caracterizan nuestros contenidos para que los buscadores relacionen esas palabras con nuestra página. Estas palabras deben ir separadas por comas. Copiamos el código entre las etiquetas Head y listo.

Mostrar categorías como "Etiquetas"

2007-03-01T00:34:00.000+01:00

Recientemente he cambiado la plantilla de la página y he añadido un par de cosillas nuevas que aún no había pasado a comentar. La más llamativa, que ahora recuerdo haber puesto, son las categorías que veis bajo el título del blog, que como veis, son funcionales.

No es un truco especialmente complejo, pero si es fácil hacerse un lío y además necesita que se haya retocado la plantilla con un par de trucos previos. Lo primero es adecuar nuestra plantilla para que se puedan añadir widgests en la cabecera (ver enlace para saber como).

El siguiente paso es definir el estilo de las pestañas que vamos a añadir al blog. Podemos copiar sólo la parte de la pestaña que queramos, pero yo recomiendo copiar todo el código por si en algún momento queremos cambiar el diseño:

/*- Menu Tabs A --------------------------- */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.anniyalogam.com/labeltabs/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.anniyalogam.com/labeltabs/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Una vez tengamos el código, lo pegamos en nuestra plantilla justo encima de la etiqueta de cierre /b:skin que a su vez está encima del cierre de /HEAD (que este seguro que está más localizado a estas alturas ;) )

El último paso es el añadir el wisget en si a nuestra plantilla así que pegamos el código siguiente justo tras el cierre de cualquier widget (hay que trabajar con la plantilla con widgets expandidos)

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

Y ya está listo, sólo hay que cambiar la letra en rojo por aquella que queramos para cambiar el estilo... siempre y cuando hayamos copiado todos los estilos a nuestra plantilla.

Problemas que puedan surgir:

Obviando los evidentes de errores al copiar o pegar el código en zonas erróneas de la plantilla, un problema habitual es que estemos intentando duplicar el widget label (porque ya existe en la plantilla un widget de etiquetas). Esto se puede solucionar renombrando el widget. (widget id=´"label2"... "label3"...etc).

Otra opción es, si no se van a tener varios sistemas de categorías a la vez, es eliminar las ya existentes antes de empezar.

Original de Hoctro

Plantilla Zona de Pruebas

2007-02-28T01:17:00.000+01:00

Me he animado a formar una plantilla con la mayoría de los trucos que hemos ido viendo aquí, excepto aquellos que requieren personalizar para cada blog (ya que muchos de ellos basan sus códigos en la URL de tu blog o alguna característica concreta de tu plantilla).

Las características que integra la plantilla son las siguientes:

- Dos columnas laterales
- Categorías con diferentes Estilos
- Posts expandibles
- Código de autoinstalación de Widgets
- Posibilidad de introducir código en la cabecera, las columnas laterales, el pie de la página y la zona superior a los posts
- Snap integrado
- Emoticonos :

) o :-)  
:( o :-( 
:P o :-P 
:D o :-D 
:$ o :-$ 
;) o ;-)

- Dropcaps: Primera letra del post de mayor tamaño
- Bloques de citas: Personalizable desde el panel de Blogger (colores y fuentes)
- Iconos de navegación
- Barra de navegación de Blogger oculta
- Comentarios con color: Personalizables desde el panel de Blogger (colores y fuentes)

pincha en la imagen para una vista previa de la plantilla

[Descarga la plantilla]

Muestra tus categorías en diferentes estilos

2007-02-27T06:17:00.000+01:00

Existen multitud de códigos, widgets, scripts... etc que permiten mostrar las categorías de tu Blog con distintas apariencias. Algunas permiten mostrarlas como un menú, otras permiten colgar una nube de etiquetas en el blog en las que cada una de las categorías tiene un tamaño de letra diferente en función de los posts que se alojan en ellas. Además, tampoco está nada mal el sistema que nos trae Blogger por defecto, en el que vemos cada categoría con el número de posts relacionados. Pero mucho mejor que todo esto, es contar con todos esos estilos a la vez. Eso es lo que vamos a aprender en este post y como es habitual en este blog, no va a ser demasiado complicado :P ... si no, yo tampoco la habría logrado.

Antes de empezar tenemos que asegurarnos de que no haya un sistema de categorías previamente instalado, así que iremos a la plantilla de diseño y borraremos el sistema actual de categorías. Una vez hecho esto, nos iremos a la plantilla y buscaremos la etiqueta de cierre de uno de los widgets de nuestra barra lateral </b:widget> (yo no me preocuparía de buscar un lugar idóneo de momento, ya que luego podremos moverlo facilmente desde la Plantilla de Diseño). Justo a continuación pegaremos este código:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<h2>Multi-style Labels</h2><br/>
<a href='javascript:void' title='Switch to List' onclick='javascript:linkStyle();'>
<img src='http://www.anniyalogam.com/widgets/list.jpg'/></a>
<a href='javascript:void' title='Switch to Menu' onclick='javascript:menuStyle();'>
<img src='http://www.anniyalogam.com/widgets/menu.jpg'/></a>
<a href='javascript:void' title='Switch to Zoom' onclick='javascript:zoomStyle();'>
<img src='http://www.anniyalogam.com/widgets/zoom.jpg'/></a>
<b><a href='http://hackosphere.blogspot.com/2006/09/multi-style-labels-widget-for-blogger.html'>?</a></b><br/><br/>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 100 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span><br/><br/>";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function menuStyle() {
var display = "<select onchange='location = this.options[this.selectedIndex].value;'><option>Select a label</option>";
<b:loop values='data:labels' var='label'>
display = display + "<option expr:value='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</option>";
</b:loop>
display = display + "</select>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

function linkStyle() {
var display = "<ul>";
<b:loop values='data:labels' var='label'>
display = display + "<li><a expr:href='data:label.url + "?max-results=100"'><data:label.name/></a> (<data:label.count/>)</li>";
</b:loop>
display = display + "</ul>";

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

// set default to zoom style
zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Guardamos la plantilla y nos vamos a la plantilla de diseño para ubicarlo en el lugar que más nos guste.

Así de sencillo resulta ;) Ya tenemos instalado el nuevo sistema de categorías y ya sólo nos quedará personalizarlo un poco. Veréis que desde la plantilla de diseño no nos deja cambiar el título del Widget y por defecto, está en inglés. Para cambiar esto y un par de cosas más tendremos que hacerlo directamente sobre el código que hemos pegado.

Para cambiar de Multi-Style Labels a lo que queramos.. por ejemplo: Categorías, tenéis que buscar esta línea, justo al comienzo del widget:

<h2>Multi-style Labels</h2><br/>

También podemos aprovechar para cambiar los textos de los botones para cambiar de estilo así que busca en el código las siguientes frases y las cambias por las que quieras:
"switch to menu", "switch to list", "switch to zoom" y "select a label"

Como tantas otras cosas... se lo debemos todo a Hackosphere

Posts Expandibles (peekaboo)

2007-02-27T03:32:00.000+01:00

Sin duda uno de los hacks para blogger más apetecibles. Con él conseguiremos ver de una manera muy limpia todos los posts de una categoría sin tener que leer el post completo. Gracias a este sistema veremos sólo los títulos de cada entrada, pero veremos [+/-] al lado de cada uno de los títulos. Si queremos leer alguno no tenemos más que pinchar ahí y veremos como se expande el post y con un nuevo click, como se retrae. Para poder usar este truco en nuestro blog tendremos que añadir unas cuantas lineas de código en diferentes partes de nuestra plantilla.

Lo primero que vamos a hacer es una copia de la plantilla para evitar problemas ya que no es difícil equivocarse al pegar los códigos y luego se puede hacer casi imposible localizar el error. Una vez hecha la copia, buscamos la etiqueta de cierre HEAD, que a estas alturas ya debe estar bastante recargada la pobre... :D Justo debajo del cierre pondremos el siguiente script:

Después tendremos que buscar una cadena en nuestra plantilla. Tendreis que ir con cuidado para no cometer errores ya que hay que meter código en medio del código ya existente y un salto de línea puede echar al traste con todo el truco. Copiad las zonas en rojo y las copias exactamete igual que en el ejemplo. Después guarda los cambios y reza para que no hayas hecho nada mal.. ;), seguro que no.

Gracias a Hackosphere por el truco y a Gem@ por la simplificación

IMPORTANTE: Este truco requiere una actualización. Si es la primera vez que lo vas a utilizar o bien estás teniendo problemas de funcionamiento, por favor, échale un vistazo a este otro post.

Últimos artículos por categoría

2007-02-26T03:12:00.000+01:00

Una buena alternativa al código de Últimos Artículos con un par de diferencias clave que harán que uséis uno u otro sistema. En este nuevo código no podremos ver las primeras líneas del post como hasta ahora, pero a cambio nos permite mostrar por orden cronológico los posts que deseemos organizados en función de las categorías que hemos creado. Para introducir este nuevo código deberemos tener bastante cuidado ya que hay que introducirlo exactamente entre dos etiquetas "b:widget" de nuestra plantilla y es fácil equivocarse. No hay que preocuparse entre que Widgets meterlo ya que después podremos moverlo de un sitio a otro desde la página de diseño de nuestro panel de Blogger sin tener que andar copiando y pegando códigos. El código completo lo podeis copiar directamente desde aquí, pero una vez introducido en nuestra plantilla tenemos que cambiar un par de cosas para ponerlo a nuestro gusto:

Buscamos en el código esta sección:

ar homeUrl3 = "hoctro.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

Las partes coloreadas son las que deberemos cambiar por nuestra página, el número de posts por categoría que vamos a mostrar y el número de categorías que se mostrarán.

Además, este script sólo mostrará los posts de todas las categorías en la página principal, pero si seleccionamos una categoría en concreto, o bien visitamos un artículo concreto, mostrará sólo los artículos etiquetados en esa categoría/s.

He optado por no ponerlo en esta página por una sencilla razón, y es que , como ocurre con muchos scripts, tiene problemas con los acentos con lo que las categorías se muestrarn con errores tipográficos. Si quereis verlo en funcionamiento podeis pasaros por Manda Carallo.

Este truco es obra, una vez más, de Hoctro

Pon color en los comentarios

2007-02-26T01:00:00.000+01:00

Este código pretende darle un poco de vidilla a la plantilla de comentarios de tal manera que se pueda poner un poco de color en ellos. El código original es de Vivek Sanghi, pero podéis encontrar el código y una buena explicación en Gem@BLOG. Lo único que deberemos hacer en este caso es localizar en nuestra plantilla la seccion de Comentarios:

/* Comments ----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0; padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
margin:0; padding:0px 0px 0px 20px;
}
.comment-body-author p {
font-size:100%; margin:0 0 .2em 0;
color:#000000; text-decoration:bold;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Y sustituirlo por este otro:
/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted #99bb99;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#CCFFCC; /*comment header background color (comment author name)*/ url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px; font-weight:bold;
}
.comment-body {
background:#99FFFF; /*Reader comment background color*/
margin:0;
padding:7px 7px 7px 7px; /*Modified padding values*/
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author
{
background:#cccccc; /*The author comments background color.*/
margin:0;
padding:7px 7px 7px 10px; /*Modified padding values*/
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2; /*The author comments text color.*/
text-decoration:bold;
}
.comment-footer {
background:#CCFFCC; /*Comment footer background color (comment permalink)*/ margin:0 0 .5em;
padding:0 0 .75em 20px; color:#996;
}
.comment-footer a:link {
color:#996; }
.deleted-comment {
font-style:italic; color:gray;
}

El código está copiado exactamente igual de tal manera que las áreas en negrita se corresponden con los colores para la cabecera del comentario, el cuerpo y el pie. Estos valores se pueden cambiar por los que deseemos para darle una apariencia única a nuestros comentarios. A modo de aportación, añadiré que yo encuentro muy farragoso el hecho de tener que localizar el código de color, copiarlo y pegarlo cada vez que queramos cambiar los colores, ya que no siempre nos van a convencer las combinaciones resultantes o tal vez las queramos cambiar a menudo... ;) Así pues, podemos optar por esta otra alternativa, que no es otra cosa que definir cada color como una variable para que blogger nos la permita cambiar desde la pestaña "fuentes y colores".

Localizamos la seccion Variable Definitions que encontraremos en la zona superior de nuestra plantilla y añadimos tres nuevas variables, una para el encabezado, otra para el cuerpo y otra para el pie:

/* Variable definitions
====================
<Variable name="coment1color" description="color de cabecera del comentario"
type="color" default="#fff" value="#00FF80">
<Variable name="coment2color" description="color de cuerpo del comentario"
type="color" default="#fff" value="#99C9FF">
<Variable name="coment3color" description="color de pie del comentario"
type="color" default="#fff" value="#cc0000">

Ahora sustituímos los códigos de los colores en negrita del código por
$coment1color, $coment2color y $coment3color

De esta manera, si vamos a "Fuentes y Colores" en el diseño, podremos cambiar los parámetros de cada color siempre que queramos.

Actualización: ;) como podréis ver, me he comido unas cuantas varibles de color... es lo que tiene hacerlo sobre la marcha... :) en fin, en realidad son 5 variables a definir si es que queremos tener todo bajo control así que deberemos crear una línea para cada una de la misma manera que hicimos antes.

Emoticonos en el Blog

2007-02-25T01:37:00.000+01:00

Una manera sencilla de darle un poco de vida a tus posts es la inclusión de emoticos, o smilies... Existen diferentes maneras de hacerlo, todas ellas más o menos complicadas, pero sin duda, esta que os voy a comentar es a prueba de tontos... sin ofender... que yo también busco siempre cosas sencillas. Este truco nos lo ofrece The Last Word, uno de los mejores Blogs de Hacks que podeis encontrar.

Lo único que debéis hacer es copiar el código que os ofrecen en la página y pegarlo justo encima del cierre de la etiqueta HEAD del blog como ya hemos hecho más veces.

A partir de este momento, el script se encargará de buscar en vuestros posts los caracteres que sustituirá por los emoticonos.

Estos son las combinaciones que reconoce el script:

) o :-) 
:( o :-( 
:P o :-P 
:D o :-D 
:$ o :-$ 
;) o ;-)

Ponle imágenes a tus vínculos

2007-02-24T06:05:00.000+01:00

Un servicio con el que podremos hacer que los vínculos y enlaces de nuestro blog se vean en una pequeña ventana al pasar el ratón sobre ellos. No es un truco o widget propiamente dicho, sino un servicio externo que podemos poner en nuestro blog de manera muy sencilla. El servicio se llama Snap y es algo bastante popular en la blogosfera. Cuenta con bastantes detractores, pero al igual que es fácil ponerlo, es fácil quitarlo con lo que no cuesta nada probarlo. Lo único que tendremos que hacer es pasarnos por la página de Snap en la que mediante unos pasos nos proporcionarán un código que deberemos poner en nuestra plantilla. Desde la propia página nos ofrecen un sencillo manual de instalación, pero resumiendolo todo a un sólo paso, se trata de pegar el código justo encima del cierre de la etiqueta HEAD de nuestra plantilla.

<head>
.
.
.
.
.
Insertar Código
</head>

Modificar el ancho de la plantilla, tercera columna

2007-02-21T12:58:00.000+01:00

La modificación del ancho de la plantilla puede traer a veces consecuencias irreparables y que a la larga nos puedan dar problemas, así que aunque siempre es recomendable el guardar la plantilla antes de empezar a cambiarla, en este caso aconsejo que guardéis la copia durante bastante tiempo ya que los problemas derivados de modificar los anchos y tamaños de las zonas de la plantilla pueden no ser visibles a corto plazo (textos que ya no encajan, imágenes que quedan cortadas.. etc). De todos modos, la mayoría de las veces no da problemas ni a corto ni a largo plazo y sin embargo nos da muchas ventajas, como el poder incluir una tercera columna en el Blog ya que muchas veces, al añadir widgets, imágenes y scripts... la columna lateral queda un poco recargada y resulta poco cómoda. Los pasos que os voy a contar son los que he hecho yo ~~sobre esta plantilla~~, pero no pueden diferir demasiado en la mayoría de las plantillas que ofrece blogger.

Vamos a tener que bucear un poco por la plantilla y aprender para que vale cada una de las áreas del blog y familiarizarnos con ellas.

Las plantillas tienen varias áreas diferentes con sus medidas predeterminadas para que encajen y sean visibles. Estas áreas son:

- Outer Wrapper: Podemos decir que es la página en si, ya que todos los elementos tienen que caber dentro de ella así que el ancho de este área tiene que ser suficiente para que quepan el resto de secciones del blog. En esta plantilla el ancho en pixels era de 660 px

- Header Wrapper: La cabecera. En este caso también es de 660 px

- Main Wrapper: Es el contenido del Blog en si, la columna central donde irán los posts. Aquí tenía un ancho de 410 px ( a veces insuficiente para poder introducir vídeos, imágenes... etc)

- Sidebar Wrapper: La Columna lateral, que era de 220 px

Estos son los elementos que habrá que modificar pero siempre teniendo en cuenta que la suma de Columnas laterales + Contenido sea menor al Outer Wrapper. (Ojo con los paddings, ya que también suman)

Empecemos... si vais a la modificación de HTLM de vuestra plantilla, vereis que casi al principio hay un área donde están definidos todos estos parámetros. Más o menos así:

Aquí es donde se definen los elementos de la página con lo que para modificar los anchos no tenéis más que cambiar el valor de pixels en width. La mayoría hacemos esto para añadir una tercera columna con lo que vamos a ello. Primero tenemos que definirla. Lo más cómodo es copiar el código de la que ya hay y pegarlo justo debajo, pero hay que cambiarle el nombre así que por ejemplo la llamaremos :

#sidebar2-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Ahora ya tenemos definida la segunda columna lateral.. luego entraremos en los tamaños. El segundo paso es ir a otra zona de nuestra plantilla (en este caso es mejor trabajar sin expandir los widgets, para no liarnos)

Vamos a buscar un código parecido a este:

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.
.
Aquí dentro estarán los WIDGETS que ya hay en esta columna
.
.
</b:section>
</div>

Copiamos todo el código y nos cargamos lo que hay entre las partes en negrita (son los widgets que hay en esa columna y no podemos duplicarlos)

Ahora lo renombramos para que se identifique con la segunda barra lateral y nos quedará este código:

<div id="sidebar2-wrapper">
<b:section class="sidebar2" id="sidebar2" preferred="yes">
</b:section>
</div>

Ahora viene otra cuestión importante. Depende de donde coloquemos este código, la columna lateral 2 se ubicará en diferentes zonas del blog así que si lo que queréis es tener una columna lateral a cada lado de los posts debereis pegar este código ANTES del código para los posts (sería el que empieza como (div id="main", o "content"... etc). Si quereis las dos barras una junto a la otra podéis pegar el código a continuación del código de la Sidebar que ya teníamos... espero que se entienda...

Por último y casi lo más importante, hay que definir los anchos de cada área para que no se superpongan unos sobre otros. En mi caso, los anchos han sido los siguientes: (evidentemente a día de hoy... pero quien sabe mañana.. ;) )

Header-Wrapper: Lo he dejado como estaba, pero seguramente lo cambiaré más aelante para que el título no quede tan pequeño... pero esto es a gustos.

Outer Wrapper: Lo he llevado hasta 860 px

Main - Wrapper: Lo he aumentado un poco, hasta 450 px

Sidebar-Wrapper: La he estrechado de 220 px a 150 px

Sidebar2-Wrapper: Idéntica a la anterior, pero le he añadido 30px de padding para que haya un poco de separación entre ella y el contenido del blog... es decir, esto:

#sidebar2-wrapper {
width: 150px;
float: left;
padding: 30px;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Las líneas en rojo son las que he añadido a mayores.

Esta explicación es válida para plantillas de base Minima, pero el método es similar para todas ellas, aunque las hay que es más complejo.

Beatiful Beta Auto Widget Install

2007-02-21T12:25:00.000+01:00

Esta herramienta, además de ser muy pero que muy fácil de instalar en nuestra plantilla nos la dejará lista para poder luego meterle mano con los muchos widgets que Beatiful Beta oftrece, entre los que recomiendo el de "Últimos Comentarios" y "Buscador" que pondré aquí más adelante.

Lo único que deberemos hacer es introducir una línea de código enre los HEADS de la plantilla.

La cosa debería quedar algo así:

<head>
.
.
.
.
.
<script src='http://home.planet.nl/~hansoosting/downloads/beautifulbeta.js' type='text/javascript'/>
.
.
.
</head>

Guardad vuestra plantilla y ya la teneis lista para acceder a los widgets de Beatiful Beta, que repito, algunos son realmente interesantes, como por ejemplo el Buscador, los Últimos Comentarios y los Posts Recientes. Todos estos Widgets los podéis encontrar aquí, y una vez introducida la lína de código no tendréis más que pulsar en el botón y esperar a que acabe el proceso. Para evitar errores, es recomendable que tengáis iniciada la sesión en Blogger. Después, como siempre, podréis cambiar y retocar el código a vuestro gusto.

Ocultar barra de Navegación

2007-02-04T01:47:00.000+01:00

Un sencillísimo truco para que la bara de navegación de Blogger (NavBar) sólo sea visible cuando pasemos el cursor por encima. Esto le dará a tu blog un aspecto mucho más limpio.

Ve a la edición HTLM de tu plantilla y busca la siguiente cadena:

/* Use this with templates/template-twocol.html */

Justo debajo añade estas dos líneas:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Guarda tu nueva plantilla y listo, a partir de ahora tu NavBar sólo aparecerá cuando la necesites.

No en todas las plantillas vais a encontrar la línea que nos sirve de referencia, pero no hay problema, otro sitio válido para colocar el código y que es de fácil localización es justo encima de Variable Definitions

Gracias a Bloggin Secret por este truco

Crear bloques de citas

2007-02-03T20:53:00.000+01:00

En muchos blogs habreis visto que los bloques entrecomillados tienen una apariencia única y destacan completamente con respecto al resto del texto. Para poder hacer algo así en nuestro blog tenemos que hacer una serie de cambios en la plantilla, muy similar al truco de las "dropcaps" .
Necesitamos definir el bloque con lo que añadiremos este código en la zona CSS de la plantilla.

.pullquote {
width: 15%;
background-color:$pullquoteBgColor;
background-image: url(http://home.planet.nl/~hansoosting/images/quotes_grey.gif);
background-repeat: no-repeat;
color:$pullquoteTextColor;
float: right;
border:1px solid $borderColor;
font-weight:bold;
line-height:120%;
padding:40px 10px 10px 10px;
margin-top:10px;
margin-left:10px;
}

Para modificar a gusto de cada uno el estilo, deberemos definir los colores de cada uno de los parámetros en nuestra plantilla (pullquoteBgColor, borderColor y pullquoteTextColor). Todas las variables se definen en nuestra plantilla. Para encontrarlo hay que buscar este encabezado de texto:

/* Variable definitions
====================

A partir de ahí, copiamos la estructura de una variable y ponemos por ejemplo:

(Variable name="pullquoteBgColor" description="Color de fondo para cita"
type="color" default="#fff" value="#ffffff")

donde añadimos el color que queremos usar. Haremos lo mismo para cada una de las variables o bien, la manera más vaga y directa es sustituir esas variables en el código por otras ya usadas en la plantilla. También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

Ahora, cuando estemos escribiendo una entrada y queramos entrecomillar un bloque, en lugar de usar (blockquote)(/blockquote) usaremos :
(span class="pullquote") texto (/span)

Ejemplo:

También podemos usar una imagen distinta para las "comillas", como siempre, deberemos subir nuestro diseño a una página externa para poder luego usarla.

al mismo tiempo, se pueden definir diferentes parámetros para cambiar la apariencia del bloque. En este ejemplo se ha ensanchado el bloque y lo he alineado a la izquierda. Para controlar esos cambios no tenéis más que cambiar el código donde pone "width" y "float" (en este caso 50% y left)

Una cosa más, en la que ya no caía y creo que vale la pena comentar:
El hecho de definir cada una de las variables al estilo blogger, es que una vez terminado, podremos cambiar la apariencia del color de fondo, texto... etc con tan sólo ir a la página de Diseño en la opción "colores y fuentes".

Una vez más, este truco se lo debemos a BeatifulBeta.

Iconos de Navegación

2007-02-03T13:24:00.000+01:00

Podemos sustituir los links que nos da blogger por unos iconos de navegación para ir a la página principal, ver siguientes posts o ir a anteriores. Para ello tendremos que hacer una serie de cambios en la plantilla.

Para poder trabajar en ella tendremos que marcar la casilla de "expnadir widgets" y buscamos este código en ella:

<b:includable id='nextprev'>

y reemplazamos todo el código que hay entre

<b:includable id='nextprev'>

....

</b:includable>

por este otro:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif'/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

A partir de ahora los links de blogger quedarán sustituídos por estos iconos:

Además, si queremos que tambien sean mostrados en la parte superior de los posts, no tendremos más que buscar un código y añadir una línea. (añadir la línea en rojo)

<b:includable id='main' var='top'>
<div id='blog-posts'>
<b:include name='nextprev'/>

Ya está listo, a partir de ahora tendréis unos iconos tanto en la parte inferior del blog como en la parte superior para la navegación entre "home", "olderposts" y "newerposts".
Por supuesto puede ser personalizado al gusto de cada uno si sustituímos las URL de las imágenes que hay incluidas en el código por unas imágenes hechas a nuestra medida.

Gracias a Hoctro por este hack

Cambiar la imagen de fondo

2007-02-03T02:16:00.000+01:00

Esto no es que pueda considerarse un truco muy complejo, pero a más de uno le puede venir bien para personalizar el blog.

Vamos a la plantilla y buscamos el siguiente código:

body {
background:$bgcolor;

Y lo sustituimos por este otro

body {
background:$bgcolor url("URL DE LA IMAGEN QUE QUIERAS DE FONDO");

sencillo, eh?
;)

Imágenes aleatorias en la cabecera

2007-02-01T23:58:00.000+01:00

En relidad este pequeño truco vale tanto para imágenes como texto, pero normalmente es el tema de poder situar una cabecera aleatoria para el blog para lo que más se suele usar este tipo de scripts. Este truco consta de dos partes. Un primer script que colocaremos por ejemplo en la cabecera y justo debajo la segunda parte del código.

Evidentemente tendremos que tener al menos un par de imágenes preparadas que tendremos que subir a la red. La primera vez que usé este truco usé a blogger como host de las imágenes subiéndolas en un post y luego copiando el código, pero no se por qué, ahora con la nueva versión de bloger eso no funciona así que las podremos subir a imageshack o cualquier otro servicio de hospedaje de imágenes.

Lo primero que vamos a hacer es borrar la cabecera actual del blog para lo cual buscaremos en la plantilla un código más o menos como este:

<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>

Eliminamos esa línea con lo que ya no se mostrará el título del blog en la cabecera. Ahora es el momento de ir a la página de diseño e introducir en la cabecera este elemento como HTML/JavaScript:

<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

Guardamos los cambios y añadimos la segunda parte del código de la misma manera, pero asegurándonos de que quede justo debajo del anterior.

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);

if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>



Sustituímos las zonas coloreadas de rojo por la direccón de la imagen que hemos subido y voilá. Ya tenemos una cabecera con imagen aleatoria en el blog.

Si queremos añadir más imágenes tenemos que ir añadiendo líneas de código para cada una de ellas y poner el número total de ellas en el valor randRange(1,nºtotal de imágenes)

Añadir widgets en cualquier parte

2007-02-01T11:31:00.000+01:00

Blogger viene ahora con un intuitivo sistema para añadir elementos en la plantilla sin tener que bucear entre líneas de aburrido e incomprensible código. Sin embargo a veces nos apetece poner scripts, imágenes o lo que queramos en zonas que Blogger no permite. Estas zonas suelen ser la cabecera del blog y la columna de los posts.
Para poder poner códigos, imágenes, scripts de títulos y citas aleatorias y más cosas que más adelante veremos, lo primero es decirle a blogger que nos lo permita. Para ello vamos a la plantilla y hacemos una copia de la misma por si luego tenemos problemas.
Primero veamos como añadir código en la cabecera (Header). Buscamos en la plantilla una línea de código como esta:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Y la sustituimos por esta otra:

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

De esta manera ahora podremos añadir hasta 5 widgets en la cabecera y además nos lo mostrará desde la pantalla de diseño.

Ahora hacemos lo mismo en la zona de Posts (Main). Buscamos la siguiente cadena:

<b:section class='main' id='main' showaddelement='no'>

y la sustituímos por esta otra:

<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>

Ahora tenemos habilitados hasta 5 widgets para ubicar justo encima de los posts (sólo del primero mostrado, no uno encima de cada post).

Cuenta Atrás

2007-02-01T11:08:00.000+01:00

Un pequeño script para situar en la plantilla una cuenta atrás para lo que queramos. En este caso son los días que faltan para una boda, pero se puede cambiar para lo que sea. El código es el siguiente:

<script languaje="javascript">

//cambiar el texto

var before="nuestra boda"

var current="Hoy es nuestra boda!"

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec" )

function countdown(yr,m,d){

var today=new Date()

var todayy=today.getYear()

if (todayy < 1000)

todayy+=1900

var todaym=today.getMonth()

var todayd=today.getDate()

var todaystring=montharray[todaym]+" "+todayd+", "+todayy

var futurestring=montharray[m-1]+" "+d+", "+yr

var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1)

if (difference==0)

document.write(current)

else if (difference>0)

document.write("Faltan "+difference+" días para "+before)

}

//cambiar la fecha

countdown(2007,6,16)

</script>

Los parámetros a cambiar son la fecha y el texto que queramos. Para ello ponemos la fecha deseada en donde pone countdown (año, mes, día) y los textos en "var before" y "var current"

Para meterlo en la plantilla no tenemos más que ir a diseño y añadir un elemento HTML/javascript en la zona de la plantilla que queramos

Probando Dropcaps

2007-02-01T10:49:00.000+01:00

Inauguramos este blog de pruebas con un pequeño hack que ya tenía ganas de probar, pero que sólo es útil si empiezas de cero un blog ya que si no tendrías que editar todas las entradas para poder verlos. Se trata de un código para que la primera letra del post se vea enorme. El código original lo he sacado de Beatiful Beta, un lugar muy recomendable para sacar jugo a blogger.

El truco viene a ser el siguiente:

Definimos una nueva clase denominada .dropcaps en las definiciones CSS de la plantilla.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

En mi caso he cambiado $headerBgColor por $titlecolor ya que la primera variable no está definida en mi plantilla.

el ultimo paso es usar esta línea en todas las entradas del blog:

(span class="dropcaps")D(/spanclass)
Sustituye los paréntesis por ><>

Este ejemplo sería para la letra D. Si lo que queremos escribir en el post por ejemplo sería: Bienvenidos a esta página, la letra que habría que resaltar sería la "B" con lo que el código en modo HTLM sería algo así: (una vez más, recordad lo de los paréntesis...)

(span class="dropcaps")B(/span)ienvenidos a esta página

Gracias a Beatiful Beta por este hack