Como añadir un sidebar en Blogger

Añadir una nueva sidebar al blog puede parecer en principio algo complicado, pero no lo es tanto como parece, ni mucho menos. Os recomiendo practicar antes en un blog de prueba, para evitar futuros disgustos...
No todas las plantillas son iguales, pero en general, funcionará este sistema, ya que se basa simplemente en copiar la sidebar existente y duplicarla.
He de aclarar, que esta prueba está hecha en una plantilla "Mínima" así que, en principio, servirá para todas las "Mínimas", aunque también he probado en la "Scribe" y, salvo unas pequeñas modificaciones que hube de hacer en padding y margin, el resultado fue óptimo.

[1] Vamos a Plantilla - html y buscamos esto en el CSS:

/* Outer-Wrapper --------------------------------- */
Justo debajo vemos #outer-wrapper {
Es aquí donde modificaremos el ancho, esto hará que el cuerpo del blog se ensanche a la medida deseada, en este ejemplo vamos a usar 900px, es decir, quedaría así:

#outer-wrapper {
width: 900px;

[2] Buscamos un poco más abajo la sidebar de nuestra plantilla:

#sidebar-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 */
}

Lo copiamos y, justo debajo pegamos el código que acabamos de copiar. Acabamos de duplicar la sidebar, ahora hemos de cambiarle el nombre y le ponemos, por ejemplo, newsidebar, además necesitamos que "flote" al otro lado, para que las entradas queden en el medio de las dos sidebar, para lograrlo le cambiamos el float, quedaría así:

#newsidebar-wrapper {
width: 220px;
float: 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 */
}

[3] Bajamos por la plantilla hasta encontrar esto:

<div id='main-wrapper'>

Justo sobre esa línea añadimos el código necesario para que nuestra sidebar se muestre en el blog:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>

Guardamos cambios.
De momento nuestra nueva sidebar está vacía, así que para verla en el blog, hemos de ir a el panel de diseño, y allí veremos que ya es posible añadir nuevos elementos a la sidebar, añadimos uno, guardamos cambios y vemos la nueva sidebar pero se apreciará también, que la distancia de las sidebar a las entradas no es la correcta...
Solucionaremos esto volviendo a la plantilla - html, y añadiendo en #main-wrapper {
un nuevo valor para el margen:
margin-left: 20px;

Nota:
Las plantillas más recientes han cambiado alguno de sus parámetros, así que tendremos en cuenta que float:left; podrá aparecer como float: $startSide; y float:right; se verá como float: $endSide;.


 Compartir Enlace

Sistemas de votación con estrellas en Blogger

Hace unos días me preguntaba €r@sMö si conocía alguna forma de colocar en su blog un sistema de votación en cada post mediante estrellas.
A continuación voy a enumerar algunos de los que pueden usarse con cierta facilidad en nuestro blog, pero aclarando, eso si, que solamente he probado el de Blogalaxia, los demás los he visto colocados en algún que otro blog, pero no se mucho más al respecto...
El lugar de colocación del código en la plantilla, es para todos más o menos igual, ya que queremos que se vean debajo de cada post, así que hemos de colocarlo en la misma zona donde están la fecha, el autor, las etiquetas, etc, de cada post:
<p class='post-footer-line post-footer-line-1'>

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

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

Si lo colocamos antes o después de la última línea, por ejemplo, el ranking de estrellas se verá al final del pie del post, después de todo lo demás que tengamos debajo de las entradas.

Blogalaxia. En este post anterior ya había explicado el ranking de estrellas de Blogalaxia.

Spotback . En esta web se pueden escoger distintos widget para mostrar el rankingdevotosen tu blog, desde el clásico mediante estrellitas para cada post, hasta uno con las imágenes de los que votan.
Hay que registrarse para luego poder acceder a las estadísticas de tus votaciones.

Qualitativo. Podéis encontrar una muy buena información sobre este sistema en Vagabundia.

Blogarate. Solo puedo decir de este sistema que el registro en su web es muy sencillo.

Star it. Por lo que he podido observar, es uno de los más utilizados.

Y por último, a destacar una gran idea de Zona cerebral donde nos explican como crear nuestro propio sistema de votación, mediante el uso de CSS.

Si conocéis alguno más, o queréis comentar algo sobre los que he puesto para añadir datos al post, podéis dejar un comentario.


Compartir Enlace

Eliminar/ocultar mensaje de etiquetas en Blogger

Me refiero a esta tabla que podéis ver en la imagen y que aparece cuando pinchamos sobre alguna de las etiquetas del blog, podemos eliminarla u ocultarla fácilmente.

• Yo, como podéis comprobar en mi blog, he optado por eliminarlo.

Os explico como, es muy sencillo:

Vamos a nuestra plantilla:
Edicion de HTML--Marcamos la casilla "Expandir las plantillas de artilugios"

Buscamos la siguiente línea de codigo:

<b:include data='top' name='status-message'/>

Eliminamos la línea completa.

Guardamos Cambios y ya no veremos más el mensaje.

• También podemos ocultarlo, que no eliminarlo, mediante CSS.

Colocamos este código en el CSS de nuestra plantilla, por ejemplo, justo antes de ]]></b:skin> :

.status-msg-wrap {
display:none;
}

Compartir Enlace

Cambiar o eliminar el "publicar un comentario en la entrada" de Blogger

Cuando accedemos a una de las entradas a través de las etiquetas, aparecen los comentarios hechos en esa entrada desplegados al pie del post.
A final de todos los comentarios vemos "publicar un comentario en la entrada", si queremos cambiar ese texto por otra cosa que nos guste más, o incluso eliminarlo, nos llevará un momento. Aunque el eliminarlo no me parece lógico, incluyo el dato porque así me lo han pedido algunas personas...

Vamos a plantilla - html y expandimos los artilugios, buscamos esta línea de código:

<p class='comment-footer'>

Un par de líneas más abajo, más o menos, veremos esta línea:

<data:postCommentMsg/>

La eliminamos y la frase desaparece, si queremos sustituirla por otro texto, algo como "Expresa tu opinión" por ejemplo, después de borrar la línea, ponemos en su lugar el texto que queremos mostrar directamente escrito en la plantilla.

Si lo que queremos es mostrar una imagen en su lugar, sustituimos esa línea por:

<img src="Url_de_tu_imagen"/>

Compartir Enlace

Imagen antes del título de las entradas de Blogger

Hay dos formas de colocar un icono o imagen pequeña antes del título de nuestras entradas, una desde el HTML de nuestra plantilla y la otra mediante CSS. Explicaré las dos, aunque personalmente recomiendo la segunda (mediante CSS):

[1-] En el HTML de nuestra plantilla expandimos elementos y buscamos esta parte del código:


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

Justo después de <a expr:href='data:post.url'> añadimos la dirección (url) de nuestra imagen, dentro de "img src", así:

<img src= "http://img296.imageshack.us/img296/6237/preview16x16xt5.png"/>

Esta es la url de mi antiguo icono, que podéis usar si queréis sin ningún problema. ;-)

[2-] Otra opción es usar CSS, buscamos esto en nuestra plantilla, en la parte del CSS, por supuesto:
.post h3 {

Y a continuación pegamos estas líneas de código:
background: url(http://img296.imageshack.us/img296/6237/preview16x16xt5.png) no-repeat 0;
padding-left: 20px;

El padding-left nos dice la distancia que habrá del icono al texto, tendremos que cambiar su valor, según sea el tamaño de nuestro icono.
Usando la vista previa podemos ir cambiando el valor en padding hasta dar con el más adecuado.

Compartir Enlace

Como poner artículos relacionados en Blogger

En Blogger podemos mostrar en el pie de la entrada que queramos un link a un artículo relacionado con dicha entrada, puede ser un link a un artículo de nuestro blog o un artículo de otra web.

1- Vamos a plantilla - opciones - formato y ponemos "si" en "mostrar campo de vinculo", volvemos a la plantilla - creación de entradas y vemos una nueva opción en nuestro editor de entradas:


2- Vamos a nuestra plantilla - html y expandemos los artilugios, buscamos esto y añadimos el trozo de código que está en color azul, he puesto "artículo relacionado" pero puede cambiarse por lo que cada uno quiera:

<p class='post-footer-line post-footer-line-2'>
<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>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>Artículo Relacionado</a>
</b:if>
</span>
</p>

3- A partir de ahora cuando escribamos una entrada nueva podemos incluir en la cajita de "Vinculo" la dirección del artículo que queramos relacionar con el que estamos escribiendo, así pinchando en "artículo relacionado" al pie de nuestra entrada iremos directamente al artículo que hemos incluido en la cajita de "vinculo".


El "artículo relacionado" solo se verá en las entradas en las que hayamos incluido el link.
Si queremos que no se muestre a continuación de las "etiquetas" para que no se confunda con ellas, incluiremos el código entre <p> y </p> de esta manera se verá debajo de las etiquetas como una nueva opción del footer del post.


 Compartir Enlace

Personalizar la fecha de las entradas de Blogger

He estado "jugando" en mi block de pruebas un rato y he modificado de forma simple la apariencia de la fecha de las entradas:

En el HTML de la plantilla, en la parte del CSS, está: h2.date-header {, esta parte es la fecha de las entradas, normalmente se ve así:

h2.date-header {
margin:1.5em 0 .5em;
}

Yo le he añadido algunos valores, hasta encontrar el efecto que quería, y me ha quedado así:

h2.date-header {
margin:1.5em 0 .5em;
width: 100px;
text-align:center;
text-transform:uppercase;
border: solid #000000 1px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #c0ffff
}

Os explico lo que he hecho:

width: 100px; esto hace que el tamaño del borde que añadiré luego tenga el tamaño que quiero, si no lo ponemos el borde se adaptará al tamaño de la entrada.

text-align:center; esto hace que el texto esté en el centro del borde.

text-transform:small; para que el texto se vea en mayúsculas, si cambiamos uppercase por small se verá en minúsculas.

border: solid #000000 1px; el color y grosor del borde, si aumentas 1px, se verá mas grueso y si cambias #000000 se verá del color que quieras.

-moz-border-radius: 15px;
-webkit-border-radius: 15px; esto hará que los bordes se vean redondeados.

background: #c0ffff esto es el color del fondo, podéis cambiarlo por el vuestro.

Y este ha sido el resultado:




Si lo que estáis buscando es ocultar la fecha de las entradas, olvidaros de lo anterior y simplemente añadis en h2.date-header {
margin:1.5em 0 .5em;
}
esta línea:

visibility:hidden;

Compartir Enlace