Post de blogger por mail.

Como cada vez hay más plantillas prefabricadas disponibles para Blogger, también es cada vez más frecuente descubrir que nos falta alguna pequeña utilidad de las que incorporan las plantillas "oficiales".

Por ejemplo, Ridany echó de menos en su plantilla nueva, el sobrecito al final de las entradas, que sirve para el envío de un enlace por correo.

Es cierto que últimamente lo más habitual es enviar este tipo de cosas a Twitter, Facebook y otras redes sociales, pero todavía hay gente que simplemente quiere enviar a un amigo el link por correo, así que tras una comprobación previa, vamos a ver si tenemos el código necesario y si no, lo reponemos.

La comprobación se hace desde Diseño > Elementos de página > Entradas del blog >Editar. Una vez en la ventana emergente Configurar entradas del blog, tenemos que ver que la opción Mostrar enlaces para el envío de entradas, está seleccionada. Si no es así lo hacemos.


Si con eso ya vemos nuestro sobre en las entradas, hemos terminado, pero si no es así, entonces tendremos que comprobar también si tenemos este código:

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

Esto es lo que monta el icono del sobre, que incluye un enlace al formulario de Blogger que facilita el envío. Si con Plantillas de artilugios expandidas no lo encontrais, es bien seguro que tendreis que añadirlo manualmente.

¿Y dónde colocar esto? Pues su lugar natural es dentro de post-footer (pie de la entrada) o en cualquiera de sus post-footer-line post-footer-line-X, aunque nada impide ponerlo al principio de la entrada, bien en el post-header o incluso en el título (post-title). Lo importante es que esté dentro del cuerpo de la entrada, por lo cual, si teneis el código pero tras marcar la opción que se explica al principio, sigue sin funcionar, entonces lo que habrá que hacer será reubicarlo.


Y ya que estamos con esto, si quereis personalizarlo un poco, sólo teneis que sustituir la dirección del gif que es
http://www.blogger.com/img/icon18_email.gif
por vuestra propia imagen.

Enmarcar post y gadget en la barra lateral.

Enmarcar cada post por separado

[1] Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código:

.post { 

[2] Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:

border:1px solid #000;

El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.
Ve tipos de bordes en blogger.
[3] Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:

padding-left: 10px;

El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:

border-bottom:0px dotted $bordercolor;

[4] Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:

background: #ddd;


Enmarcar los widgets en la sidebar

[1] Buscamos ahora esta parte del código:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

[2] Tendremos que separar antes de nada el código de los widget de entradas y de la sidebar, de tal manera que esa parte nos quede así:

.sidebar .widget{

}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

[3] Añadimos justo debajo de .sidebar .widget{ las mismas líneas de código que añadimos en las entradas, más una nueva que controlará la separación entre cada widget:

.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}

[4] Igual que antes, para los post, si queremos darle color al fondo de cada widget, hemos de añadir una nueva línea al código anterior (siempre antes de la llave de cierre }:

background: #ddd;

Nota: En ambos ejemplos el color de fondo es gris (#ddd;) pero podemos cambiarlo por el que nos guste.

Actualización
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código en cada sección, es decir, en .post { y en .sidebar .widget{, teniendo en cuenta que se verá correctamente en Firefox, ya que en IExplorer las esquinas se verán cuadradas:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;