A algunos, por motivos de estética, les gusta tener los títulos de las entradas del blog completamente centradas, en vez de alineadas a la izquierda como establece Blogger por defecto. Para centrar los títulos de las entradas hay que hacer lo siguiente, muy sencillo además:

Bajo este código...
.post-title
{
...pegamos este otro text-align: center; y listo.

Cortesía de Miss Lavanda
Blogguer, por defecto, pone la fecha de las entradas alineada a la izquierda y antes de cada post. Si queremos tenerla justo debajo del título y además centrada, con este tutorial podremos conseguirlo.

  • Proceso: todo directamente en la plantilla HTML.
  • Pasos:

Primeramente, buscaremos y borraremos este código de su ubicación (haremos un copy&paste en un bloc de notas):

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Luego, buscamos esta línea </h3> y justo debajo copiaremos el código borrado del paso anterior (y pegado a un bloc de notas), pero con los caracteres añadidos de <center> y > < /center> para que la fecha aparezca centrada. El código resultante sería así:

<b:if cond='data:post.dateHeader'>
<center><h2 class='date-header'><span><data:post.dateHeader/></span></h2></center> 

</b:if>
Cuando llega la Navidad se hace imprescincible decorar los blogs con motivos navideños. Este Papá Noel trepando por una cuerda dará la bienvenida a los lectores de cualquier blog. Su instalación es sencilla y el resultado, muy ameno.

Para poner el Papá Noel colgante basta con copiar este código en un gadget java:

<div style="text-align: center;">
<a href="http://lablogteca.blogspot.com/2014/12/papa-noel-colgante.html" _fcksavedurl="" style="left: 0px; position: fixed; top: 0px;"><img src="https://lh5.googleusercontent.com/-O5q3o0u1_wM/VIh_NQX7s0I/AAAAAAAAM6o/-1_ObiVrCRg/s393/papanoel-navidad.gif" _fcksavedurl="" alt="" /></a></div>

El Papá Noel aparecerá colgando de la parte superior izquierda. Si queremos que esté a la derecha, basta con cambiar left (está en negrita en el código) por right. ¡Y listo!

A diferencia de este truco en el que se podía enmarcar el post-footer, con este otro podemos poner una imagen de fondo. 

  • Proceso:

Buscar este bloque (puede diferir según el blog y a veces aparecer sólo la 1ª línea)...

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}


...y cambiarlo por este otro:

.post-footer {
margin-bottom:15px;
margin-left:0px;
font-size: 87%;
background-image: url(IMAGEN DE FONDO);
background-position: top center;
background-repeat: repeat;
}

Tan solo queda poner la imagen de fondo que más nos guste. El resultado sería algo así (la imagen, aunque muy clara, está dentro del cuadro rojo):



Con este sencillísimo truco pondremos una línea horizontal justo debajo del título de las entradas.

  • Ubicación: plantilla.

Buscar la línea .post-header { y colocar este código debajo: 

border-bottom: 1px inset #707070; padding:2px;

1x es el grosor de la línea;
#707070 es el color de la línea;
inset es el tipo de línea. Otras pueden ser las que figuran en la siguiente imagen:

Y et voilá!
Foto cortesía de Business2Community
La optimización en buscadores o SEO (Search Engine Optimization) es un aspecto clave y básico que no debemos pasar por alto a la hora de publicar una web ya que mejora su visibilidad en los resultados orgánicos de los diferentes buscadores. Cona las etiquetas meta description podemos dar un pequeño paso.

La etiqueta meta description nos ayuda a indicar cúal es el contenido de nuestra página para que así los buscadores de internet puedan recoger esta información y clasificar la página en una temática en función del contenido. Los meta tags también pueden ser específicos para palabras claves, etc. o pueden predefinir una actuación a la página.
Para colocar estas etiquetas hay que hacerlo entre los caracteres <head></head>.

Meta tag “Keywords”
Indica al buscador las palabras claves de nuestra página. Los keywords deben ir separados por comas y sin espacios entre ellos. 

<meta name="Keywords" content="tutorial,html" /> 

Meta tag “Description”
Destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos a través de frases cortas y separadas entre ellas por puntos.

<meta name="Description" content="Tutorial html. Meta tags" /> 

Meta tag “Language”
Indica al buscador el idioma en el que está escrita la página. Para el español correspondería “es”, en inglés sería “en”, en francés “fr", en italiano “it" …etc.

<meta http-equiv="Content-Language" content="es"/> 

Meta tag “Distribution”
Marca la distribución que queremos que se haga de la web. Si queremos que se distribuya por todo el mundo en “content” indicaremos “global” (lo más recomendable).

<meta name="distribution" content="global"/> 

Meta tag “Robots”
Puede que no queramos que nuestra página sea indexada por los robots de los buscadores Web. En ese caso debemos indicárselo con el meta “Robots”.

<meta name="Robots" content="all"/>

Meta tag "Author"
Para dejar claro quién publica en el blog.

<meta content='Nombre Usuario' name='author'/>

El Pullquote es un elemento de texto, normalmente una cita o extracto de un artículo, que se coloca de mayor tamaño de letra, y sirve para destacar un tema clave o bien conducir a los lectores a un aspecto clave. Se usa mucho en periodismo.

Un ejemplo lo tenemos en esta imagen en la que el efecto pullquote queda encerrado en una hoja de árbol y, además, entre dos columnas de texto:

Foto cortesía  de InDesignSecrets


Y así quedaría en un texto a una sola columna:

Foto cortesía de Drupal


Para conseguir ponerlo en nuestro blog es muy fácil. Hay dos vías posibles.

>> OPCIÓN 1 (+ elegante y editable a gusto personal)

  • Proceso: plantilla y editor de la entrada.

Primero hay que establecer los atributos de estilo y para ello hay que copiar el siguiente código antes de ]]></b:skin>

.pullquote {
width: 150px;
float: right;
padding:20px 10px 10px 30px;
margin:10px auto auto 10px;
background-color:transparent;
background-image: url(http://img47.imageshack.us/img47/457/comillasil6.gif);
background-repeat: no-repeat;
background-position: 2px 15px;
color:#990000;
border:0px solid #cccccc;
text-align:left;
font-weight:normal;
font-size:24px;
font-style:none;
font-family:impact;
line-height:24px;
}
.pullquote:first-letter {
color:#300C06;
display:block;
font-size:50px;
font-family:arial;
font-weight:bold;
}

Los parámetros (fuente, tamaño, color...) son completamente editables a gusto personal.

Luego, solo nos queda redactar el artículo en una entrada. El texto que se quiera poner en pullquote hay que encerrarlo entre las etiquetas SPAN con la clase pullquote. Así:

<span class="pullquote">TextoTextoTextoTextoTexto</span>

>> OPCIÓN 2 (+ sencilla, sin muchos rodeos)

Copiar este código directamente en el editor de la entrada:

<div style="float:right;height:6em;width:150px;margin-top:10px;margin-bottom:10px;margin-left:10px;line-height:18px;text-align: right;">

<span >text text text text text text text text text text...</span>

</div><p style="text-align: justify;">

Según nos dice wikipedia: Pullquote es una cita o extracto de un artículo que se coloca en un mayor tamaño de letra en la misma página, que sirve para destacar y conducir a los lectores en un artículo y o bien para destacar un tema clave. El efecto es similar a los cuadraditos en prensa escrita, que destacan parte de un artículo.</p>

<div style="clear:both;"></div>

Lo que está en verde y en negrita es el texto del pullquote. Lo marcado en rosa es el texto del artículo, escrito normalmente, sobre el que queremos que aparezca incrustado el pullquote.

En ambos casos, el efecto queda muy estético y por supuesto da estilo a las entradas.

Con este truquito podemos ponerle una imagen de fondo a los títulos de las entradas.

Ubicación: plantilla.

Buscar estas líneas

h3.post-title { 
.post-title { 
.post h3 {

o en su defecto esta otra h3.post-title, h4 { y copiar debajo este código:

background:url(URL DE LA IMAGEN)

Solo nos queda añadir el enlace de la imagen. 

Captura de pantalla de El Cajón de los Girasoles

Con este truquito, será muy fácil ponerle marco al footer de las entradas del blog.

Buscar esta línea .post-footer {

y pegar debajo de ella la siguiente:

border:solid 1px #000000;
padding:5px;

Todo es editable a gusto personal.

Solid es el borde. 
1px es el grosor del borde.
#000000 es el color (negro).


Con este truquito, será muy fácil ponerle marco al footer de las entradas del blog.

Buscar esta línea .post-footer {

y pegar debajo de ella la siguiente:

border:solid 1px #000000;
padding:5px;

Todo es editable a gusto personal.

Solid es el borde. 
1px es el grosor del borde.
#000000 es el color (negro).


Foto cortesía de Las Provincias
Un truquito para dar alegría a los titulares de los gadgets y, sobre todo, dejar en claro dónde acaba uno y empieza otro. Así, el orden impera en el diseño conjunto del blog.

Puede o bien, ponerse un color de fondo, o una imagen como background. Para el primer caso...

Pegar encima de ]]></b:skin>






.sidebar h2{
background: #cccccc;
border: 1px solid #666666;
padding:5px;
}

Y para poner una imagen de fondo...

.sidebar h2{
background: url(url de la imagen elegida)no-repeat top center;
border: 1px solid #666666;
padding:5px;
}

- Para cambiar el color de fondo cambiar el codigo cccccc por el que se desee.
- Para cambiar el color del borde cambiar el código 666666 por el que se desee.
- Para cambiar el grosor modificar border: 1px (a mayor tamaño + gruesa la linea).
- Para alterar el tamaño del fondo cambiar padding:5px;

El resultado final quedaría así:

Los títulos enmarcados y con imagen de fondo son "No te pierdas nada" y "Bloggroll para leer".

 
Foto cortesía de Las Provincias
Un truquito para dar alegría a los titulares de los gadgets y, sobre todo, dejar en claro dónde acaba uno y empieza otro. Así, el orden impera en el diseño conjunto del blog.

Puede o bien, ponerse un color de fondo, o una imagen como background. Para el primer caso...

Pegar encima de ]]></b:skin>

.sidebar h2{
background: #cccccc;
border: 1px solid #666666;
padding:5px;
}

Y para poner una imagen de fondo...

.sidebar h2{
background: url(url de la imagen elegida)no-repeat top center;
border: 1px solid #666666;
padding:5px;
}

- Para cambiar el color de fondo cambiar el codigo cccccc por el que se desee.
- Para cambiar el color del borde cambiar el código 666666 por el que se desee.
- Para cambiar el grosor modificar border: 1px (a mayor tamaño + gruesa la linea).
- Para alterar el tamaño del fondo cambiar padding:5px;

El resultado final quedaría así:

Los títulos enmarcados y con imagen de fondo son "No te pierdas nada" y "Bloggroll para leer".

 
Un truco fácil y de resultado bien estético: tener la fecha del blog enmarcada, con posibilidad de poner color y tipo de letra a gusto personal.

Buscar /*Posts y debajo de h2.date-header { pegar lo siguiente:

text-align: center;

background-color: #99C9FF;

border:solid 2px;

border-color:#6666ff;

padding:5px;


La fecha queda centrada. El borde, el color de fondo... pueden modificarse.

Quedaría más o menos así:


Un truco fácil y de resultado bien estético: tener la fecha del blog enmarcada, con posibilidad de poner color y tipo de letra a gusto personal.

Buscar /*Posts y debajo de h2.date-header { pegar lo siguiente:

text-align: center;

background-color: #99C9FF;

border:solid 2px;

border-color:#6666ff;

padding:5px;


La fecha queda centrada. El borde, el color de fondo... pueden modificarse.

Quedaría más o menos así:


Este sencillísimo truco permitirá que pongamos nuestra dirección de email en una imagen (que no es igual a una imagen generada de la dirección de correo). Al posar el cursor del mouse sobre la imagen, esta nos llevará al servidor de correo para mandar un email a la dirección marcada. Esto se consigue con el parámetro "mailto" (en rojo).

Sencillo y lo mejor de todo, evitará que los spamers nos "cuelen" el mail.

El código es este: 

<a href="mailto:URL CORREO"><img src="LINK DE LA IMAGEN"></a>

Este sencillísimo truco permitirá que pongamos nuestra dirección de email en una imagen (que no es igual a una imagen generada de la dirección de correo). Al posar el cursor del mouse sobre la imagen, esta nos llevará al servidor de correo para mandar un email a la dirección marcada. Esto se consigue con el parámetro "mailto" (en rojo).

Sencillo y lo mejor de todo, evitará que los spamers nos "cuelen" el mail.

El código es este: 

<a href="mailto:URL CORREO"><img src="LINK DE LA IMAGEN"></a>

Este truco tan solo los mantiene ocultos, no los elimina. 

Antes de ]]></b:skin> hay que pegar este código:

#Attribution1{
visibility:hidden;
display:none;}

Para que vuelvan a aparecer los créditos basta con borrar de la plantilla el mencionado código.
Este truco tan solo los mantiene ocultos, no los elimina. 

Antes de ]]></b:skin> hay que pegar este código:

#Attribution1{
visibility:hidden;
display:none;}

Para que vuelvan a aparecer los créditos basta con borrar de la plantilla el mencionado código.