Redes sociales en el post-footer

Hace unos días me preguntaban la forma de añadir iconos a redes sociales en el post-footer algo que tenía en mente y desde hace unos momentos ya puede verse.

Si marcamos para expandir la plantilla el post-footer lo veríamos así:

<div class='post-footer-line post-footer-line-1'>

Contenido ....

</div>

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

Contenido ....

</div>

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

Contenido ....

</div>

Dentro de cada línea están añadidos algunos datos que por defecto vienen en la plantilla, otros los vamos añadiendo nosotros bien por utilidad o simplemente para decorarlo.

En algunas plantilla esas líneas del post footer están definidas como:

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

Contenido .......

</p>

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

Contenido .......

</p>

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

Contenido .......

</p>

Y en los estilos los veríamos más o menos así:

.post-footer {

margin: .75em 0;

color:$sidebarcolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

}

Es posible también encontrar una cuarta línea

<div class='post-footer-line post-footer-line-4'>

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

No hay límite y podemos añadir cualquier número de líneas si así lo estimamos oportuno.

Lo que conseguimos es añadir contenido y que ese contenido se muestre de forma ordenada ocupando lineas diferentes ya que en una sola línea faltaría espacio.

Digo todo esto porque dependiendo del espacio que vamos a necesitar y el lugar donde deseamos añadir los iconos será la línea que vamos a escoger.

Podemos añadir los iconos después de una de las líneas o a continuación de otro contenido que ya tenemos pero siempre intentando que lo que añadimos se encuentre después de la línea del post-footer y antes del cierre de la etiqueta </div> o </p>

Añadimos los iconos a redes sociales con una primera línea que será la que dará ubicación y que podemos modificar según sea necesario mirando en vista previa considerando que podemos cambiar la flotación de los iconos a la izquierda con float: left y le daremos espacio de separación con margin: -5px -3px 30px 0 sin olvidar que el primer valor es para arriba, el segundo la derecha, el tercero abajo y el cuatro la izquierda.

<div class='post-footer-line post-footer-line-4'>

<span style='float: right; margin: -5px -3px 30px 0;'>

<a class='feed' href='http://feeds2.feedburner.com/Tu-nombre' rel='nofollow' target='_blank'><img src='url-image-icono-rss.png' width='20'/></a>

<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank'><img src='url-imagen-icono-twitter.png' width='20'/></a>

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='url-imagen-icono-facebook.png' width='20'/></a>

</span>

Miramos en vista previa y si todo está bien guardamos los cambios.

Si deseamos que los iconos no se vean en la página principal pero si al mostrar la entrada completa lo haremos de la siguiente forma:

<div class='post-footer-line post-footer-line-4'>

<b:if cond='data:blog.pageType == "item"'>

<span style='float: right; margin: -5px -3px 30px 0;'>

Aquí añadimos el código de los iconos

</span>

</b:if>

</div>