Plantilla Rounders con widgets separados

Hace unos días me consultaban sobre la forma para conseguir que en la sidebar de la plantilla Rounders se muestre cada widget por separado. Para lograr esto se me ha ocurrido copiar el código de uno de los que vienen en la plantilla y copiarlo tantas veces como widget quisiera mostrar. Y este ha sido el resultado:



[1] Para hacerlo tenemos que ir a la parte HTML de nuestra plantilla y, sin expandir los artilugios, localizar la parte del código que corresponde a cada widget, copiarlo y volver a pegarlo justo debajo, las veces que queramos, cambiando cada vez el id=sidebartop, podemos ir poniendo "sidebartop1", "sidebartop2" y así sucesivamente.

[2] La parte que hemos de localizar y copiar es esta:

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile2' locked='false' title='Datos personales' type='Profile'/>
</b:section>
</div></div>

En el caso de este ejemplo, dentro del widget esta el perfil (en negrita en el ejemplo), en cada caso esta parte del código se verá distinto según lo que hayamos colocado en ese widget, así que lo hemos de tener en cuenta es el resto del código.

[3] De esta manera duplicaremos el widget que en la plantilla Rounders original se muestra de color verde, para duplicar el otro widget (el de color blanco), haremos exactamente igual con la unica diferencia de que el código a copiar sería este:

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div></div>

No olvidaremos cambiar cada vez la "id=sidebar" por "id=sidebar1", "id=sidebar2", etc.

Eliminar o sustituir el ▼ de los archivos en "jerarquía"

Cuando añadimos en un nuevo elemento de la página los "archivos", Blogger nos ofrece tres opciones: jerarquía, lista o menú desplegable.
Si escogemos la opción "jerarquía" nos saldrá un iconito como este ▼ antes del mes y año de archivos.
Podemos eliminar ese icono o sustituirlo por una imagen mas original, eso si, procuraremos que no sea una imagen grande, a poder ser, escogeremos una no mucho mayor que el icono de Blogger (▼).

1- En nuestra plantilla con los artilugios expandidos buscamos la parte del código que corresponde a nuestros archivos en "jerarquía" y que empieza con esta línea:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

Más abajo nos encontramos con esta línea de código:

<span class='zippy toggle-open'>&# 9660; </span>

Si queremos eliminar el icono (▼) borramos &# 9660;
Si queremos sustituirlo por el nuestro, colocamos en su lugar la url de nuestro icono:

<span class='zippy toggle-open'><img src="URL DE NUESTRO ICONO"/></span>

Si os fijais en los archivos en "jerarquía" los meses anteriores, no muestran las entradas expandidas, pero si tienen un icono parecido al anterior (►), para cambiarlo o eliminarlo hacemos lo mismo que antes, con la diferencia de que el código a modificar está unas líneas por debajo que el otro, la línea a modificar es esta:

<span class='zippy'>&# 9658; </span>

Plantilla tres columnas con "leer mas" incluido

Una fantástica plantilla creada por César para Blogger, aunque en su bloG podréis encontrar alguna más, esta es mi favorita.
Lleva incluido el "leer más" para las entradas con imagen incluida. Las dos sidebar están presentadas a la derecha. Para instalarla solo hemos de copiar el código y sustituirlo en nuestra plantilla. César también incluye en la entrada de presentación de la plantilla, el código necesario para "armar" los links.

Si tenéis alguna duda, estoy segura que César os atenderá amablemente.

Ver plantilla funcionando.

Tooltip en el titulo y los comentarios del blog (IE, Firefox)

Hace un par de días publicaba un post sobre como colocar un tooltip (cartelito emergente al pasar el puntero) en las etiquetas al pie de los posts. Guiándome por esas instrucciones he conseguido poner también el tooltip en el título de las entradas y en el "comentarios" del pie del post.
En el tooltip de los comentarios he puesto "deja aquí tu comentario" y en el título de mis entradas podéis leer " Pincha en el título, para ver la entrada y sus comentarios". Este último en el título del post creo que será muy útil, sobre todo para aquell@s visitantes que aún no sepan que el título de los posts en Blogger tiene también esa función.

Poner Tooltip en "comentarios"

Hemos de buscar en la plantilla con los elementos expandidos, esta parte del código:

<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'>


Colocamos esto, o lo que queráis mostrar vosotros: title='Deja aquí tu comentario' justo después de: expr:onclick='data:post.addCommentOnclick' dejando un espacio.

Poner Tooltip en el título de la entrada

Hemos de buscar en la plantilla con los elementos expandidos, esta parte del código:

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

Colocamos esto, o lo que queráis mostrar vosotros: title='Pincha en el título, para ver la entrada y sus comentarios' justo después de: <a expr:href='data:post.url' dejando un espacio.

Pop-up controlado (I)

Con un sencillo código crearemos un pop-up o ventana emergente, que nuestros visitantes podrán abrir pinchando en un link.
Podemos usarlo para mostrar una imagen, incluso una captura de otra web, cambiando la url por la de la imagen o del sitio web que queramos mostrar. Eso si, tendremos en cuenta que la ventana tendrá el tamaño que nosotros queramos, sin que nuestros visitantes tengan la posibilidad de agrandarla.

Para mostrar el efecto en nuestra sidebar, en la parte de diseño de nuestra plantilla elegimos un nuevo elemento HTML-Javascript y pegamos el código:

<a href="http://URL-DE-TU-IMAGEN O DE LA PAGINA WEB" target="_blank" onclick="window.open(this.href, this.target, 'width=313,height=450'); return false;">Abrir ventana</a>

Ejemplo:

Un perro precioso

Mi otro blog

Nota:
Donde pone width=300 y height=400 en el código, es donde modificaremos el alto/height y el ancho/width de nuestro pop up.

Link a tus post en tiempo real via technorati

Para saber quien está enlazando a cualquiera de tus post en tiempo real a través de Technorati.
Se mostrará en el pie de tus entradas y tus visitantes podrán ver quien enlaza tus post pinchando sobre el.


Tendrás que habilitar "páginas de entrada" en Opciones-Archivo, es decir, poner "si" en la casilla de habilitar páginas de entrada.

En la plantilla-HTML, expandimos artilugios y buscamos esta parte del código:


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


Borramos esa línea y colocamos esto:

<p class='post-footer-line post-footer-line-3'>
<script src='http://embed.technorati.com/linkcount' type='text/javascript'/>
<b:if cond='data:post.url'>
<a class='tr-linkcount' expr:href='"http://technorati.com/search/" + data:post.url'>
Ver Reacciones de Blogs</a>
</b:if>
</p>

Puedes sustituir donde dice "Ver reacciones de blogs" por lo que quieras que se lea, por ejemplo "link a este post", "me enlazan", etc.

NOTA

En algunos casos el script puede darnos error al hacer "vista previa", dependerá de alguna modificación anterior en la plantilla.
Para solucionar esto, lo mejor es que cada uno intente encontrar el lugar correcto para colocar el código, si como está en esta entrada da error, intentad probar igual pero en la línea <p class='post-footer-line post-footer-line-2'>.
En algún caso el error se produce por el cierre </p> del código, probad borrando eso.

Tooltip en las etiquetas al pie del post

Un tooltip o cartelito emergente que se mostrará al poner el puntero sobre las etiquetas en el pie de las entradas. Podéis verlo en funcionamiento en El Escaparate, mi cartelito dice: "Más entradas con esta etiqueta", pero vosotros podéis poner lo que queráis. El truco es de Beautiful Beta, o al menos, yo lo he sacado de allí.

Plantilla-HTML-expandir elementos, buscamos esta parte del código:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

Colocamos esto, o lo que queráis mostrar vosotros: title='Más entradas con esta etiqueta' justo después de: <a expr:href='data:label.url' dejando un espacio.