Como poner el fondo de las entradas transparentes

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Fondo de las entradas transparente, Opacidad en los posts de tu blog

Con unas pocas líneas de código podemos hacer que el fondo de nuestras entradas sea parcialmente translúcido de manera que pueda transparentarse la imagen de fondo que tenemos en el blog.

El grado de opacidad puede editarse por lo que cada valor ofrecerá una visión distinta del fondo en los posts.

Accede a este blog de pruebas para comprobar el resultado.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y justo encima añade este bloque de CSS:

.post {
color:#000000;
padding:4px 18px;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;
}

Edita el valor 8 resaltado en color verde por una cifra superior o inferior para añadir menos o más opacidad -respectivamente- a las entradas. Ten en cuenta que no debes incluir un valor que sobrepase el 9 o que sea inferior al 1.

Para añadir una imagen o un color de fondo al post, utiliza el atributo background bajo .post { tal y como se muestra a continuación:

.post {
background:url("URL DE LA IMAGEN") no-repeat scroll 0 0 transparent;

Reemplaza URL DE LA IMAGEN por la dirección de la imagen.

Utiliza esta otra línea en caso de querer el fondo en color:

background:#cccccc;

#cccccc es el código del color escogido. Edítalo a tu gusto accediendo a la tabla de colores.

Guarda la plantilla y comprueba el resultado en varios navegadores para asegurarte que la opacidad se aprecia bien.

Read More

Cómo poner los bordes redondeados en el títulos en el sidebar

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Bordes redondeados en los títulos de la sidebar con imágenes

Poner los títulos de la sidebar o barra lateral con una imagen de bordes redondeados es algo muy sencillo. Los bordes redondeados provocan un efecto muy agradable y parece que a muchos bloggers les encanta.

En esta imagen puedes ver el resultado (ten en cuenta que podrás cambiar el color de la imagen):

Diseño>Edición de HTML>sin expandir artilugios

1) Busca este código de CSS:

.sidebar h2{

2) Justo debajo agrega estas dos líneas:

padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;

En caso de no encontrar la línea .sidebar h2{ con su respectivo bloque, agrégalo antes de la etiqueta ]]></b:skin> de la siguiente forma:

.sidebar h2{
padding: 5px;
background: transparent url(URL DE TU IMAGEN) no-repeat center;
border: none;
}

3) Ahora solo te falta sustituir URL DE TU IMAGEN por la dirección de tu imagen con bordes redondeados ^[+].

Aquí te dejo tres imágenes por si deseas llevarte alguna (no olvides alojarla en tu propio servidor, como puede ser tinypic. No es bueno hacer hotlinking):






4) Finalmente, guarda la plantilla:




Puedes crear más imágenes con bordes redondeados haciendo uso de la web RoundPic, en la cual podrás alojar cualquier imagen y redondearla (escogiendo la altura y anchura).

Read More

Incluir sección "Acerca del autor" al pie de las entradas

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Incluir sección 'Acerca del autor' en el pie de tus entradas

La plataforma Wordpress ofrece una pequeña ventaja: la posibilidad de añadir al pie de cada artículo una pequeña biografía acerca del autor que lo escribe e incluso una imagen de éste. Son muchos los lectores que me han preguntado si podríamos incluir este artilugio en un blog de blogger y por suerte, la respuesta es afirmativa.

No solo podrás incluir una breve descripción de ti sino que dispondrás de un espacio para mostrar una foto o avatar e incluso enlaces a otras páginas.

Diseño>Edición de HTML>expandimos artilugios

1) Busca este bloque de código en tu plantilla y elimínalo:

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'>
<data:post.author/>
</span>
</b:if>
</span>

2) Localiza la línea <data:post.body/> y justo debajo añade esto:

<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>

<style>
#Sobreauttrblcn {font-family:Arial,helvetica,sans-serif;background:#F4F4F4;border:1px solid #CCCCCC;color:#424242;font-size:12px;letter-spacing:0;margin:20px 0;padding:6px;text-transform:none;}
#blAAut {border-bottom:3px solid #DDDDDD;width:80%;}
#Sobreauttrblcn strong {padding-left:6px;color:#333333;font-weight:bold;font-size:13px;}
#Sobreauttrblcn img {background:#FFFFFF;border:1px solid #CCCCCC;float:right;
height:70px;margin:4px 4px 8px 6px;width:70px;}
</style>

3) Tan solo debes escribir tu biografía e incluir tu foto / avatar reemplazando URL IMAGEN con la dirección de ésta. No necesitas escribir tu nombre ya que aparecerá de forma automática. Si lo deseas puedes editar la frase en el código que aparecerá como título "AUTOR DEL ARTÍCULO:".

El recuadro con tu biografía podrá visualizarse al pie de todas las entradas en cualquier apartado del blog. Para mostrarlo únicamente en las páginas de entradas individuales, añade las líneas resaltadas en negrita al principio y al final del primer bloque -respectivamente-:

<b:if cond='data:blog.pageType == "item"'>
<div id='Sobreauttrblcn'>
<img border='0' src='URL IMAGEN'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'>AUTOR DEL ARTÍCULO:</span> <strong><data:post.author/></strong></div>
<p>BREVE BIOGRAFIA DEL AUTOR</p>
</div>
</b:if>

Guarda la plantilla para terminar.

Para blogs con más de un autor

Si en el blog escribe más de un blogger y deseas aplicar este truco para ofrecer un recuadro de información personal a cada administrador haz lo siguiente.



Sigue los mismos pasos citados anteriormente pero en lugar de incluir el primer bloque de código en el paso 2, haz uso de bloques como estos:

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

</div>

Cada vez que desees añadir un nuevo autor, agrega lo siguiente antes del cierre </div>:

<div id='Sobreauttrblcn'><b:if cond='data:post.author == "NOMBRE AUTOR"'>
<img border='0' src='<span style="color: rgb(204, 102, 0);">URL IMAGEN</span>'/><div id='blAAut'><span style='font-style:italic; font-size:10px;'><span style="color: rgb(51, 102, 102);">AUTOR DEL ARTÍCULO:</span></span> <strong><data:post.author/></strong></div>
<p><span style="color: rgb(0, 153, 0);">BREVE BIOGRAFIA DEL AUTOR</span></p></b:if>

Sustituye NOMBRE AUTOR por el nombre del autor tal y como aparece en su perfil de blogger (utilizando espacios, tildes o carácteres especiales si los posee).

Guarda la plantilla y listo.

Notas:

- Editar el aspecto del recuadro es muy sencillo. Deja un comentario en caso de necesitar ayuda.

- La biografía de cada autor que se muestra en las imágenes de ejemplo son ficticias.

Read More