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>