Plantilla Rounders 4 con sidebars a ambos lados

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

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:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentphoto' style='float:right;'/>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<div style='clear:both;'/>
</b:loop>
</dl>

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:

<script src='http://jscripts.ning.com/get.php?
xn_auth=no&id=830605' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos
('commentphoto','comment-author', 1);});
//]]>
</script>


Listo, ahora ya podremos ver nuestras imágenes asociadas a nuestra cuenta Blogger a la derecha de los comentarios.

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"

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:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'> <!-- if the page is NOT an itempage, display the link -->
<b:if cond='data:post.allowComments'> <!-- if the post allows comment to be made, display the link -->
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

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"'> <!-- if the page is NOT an itempage, display the link -->
<b:if cond='data:post.allowComments'> <!-- if the post allows comment to be made, display the link -->
<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

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)

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;'/> <!-- clear for photos floats -->
</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;'/> <!-- clear for photos floats -->
</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..."

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

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í.