Marcadores Sociales para compartir en Blogger

El uso de marcadores sociales en un blog permite a los usuarios compartir tus contenidos en distintos servicios web, es muy útil para aumentar visitas, conseguir seguidores y ampliar tu influencia en la web.

Existen distintas versiones, pero ninguna me llamó mucho la atención, por lo que decidí crear mi propia versión y en esta oportunidad la comparto con ustedes.

Vista previa de los marcadores sociales:

¿Cómo instalar estos marcadores en Blogger?

Primero, vamos a ''Diseño/Edición HTML'' y marcamos ''Expandir plantillas de artilugios''.

Buscamos el siguiente código:

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

Debajo de este código pegaremos el siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<span style='float: right; '>

 <b>Compartir: </b>

<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'><img src='https://lh3.googleusercontent.com/-ZMNstTQBIDA/TYLOGEj41uI/AAAAAAAAAdM/n_4rUoHcKJo/s1600/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' title='Compartir en Facebook'><img src='https://lh4.googleusercontent.com/-CUtQ6kBQkTg/TYLOEdjw_AI/AAAAAAAAAdA/pHni6wywITA/s1600/facebook.png' width='20'/></a>

<a class='bitacoras' expr:href='&quot; http://bitacoras.com/anotaciones/&quot; + data:post.url' rel='nofollow' target='_blank' title='Votar en bitácoras'><img src='https://lh3.googleusercontent.com/-Z9X-AI4uGNQ/TYLOBBjsfeI/AAAAAAAAAc0/aaEwZKR8SQI/s1600/bitacoras-icon-32x32.png' width='20'/></a>

<a class='correo' expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Enviar por correo electrónico'><img src='https://lh4.googleusercontent.com/-Jb5gGPDOOX8/TYLODuJDYyI/AAAAAAAAAc8/Xr2fRGg5dg4/s1600/email-icon32x32.png' width='20'/></a>

<a class='digg' expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This'><img src='https://lh4.googleusercontent.com/-ovYjTuczvP8/TYLOBtxn9uI/AAAAAAAAAc4/ujelP_eOGkw/s1600/digg.png' width='20'/></a>

<a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Technorati'><img src='https://lh4.googleusercontent.com/-kifpteRdxIk/TYLOEx5-UJI/AAAAAAAAAdE/oWKd5B0WAvo/s1600/ico-technorati.png' width='20'/></a>

<a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><img src='https://lh4.googleusercontent.com/--2hhGo7v2RI/TYLOAjXHAHI/AAAAAAAAAcw/ZI_j2-1_46c/s1600/aquaticus_reddit.png' width='20'/></a>

<a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'><img src='https://lh5.googleusercontent.com/-61QRpCrOQvo/TYLOFTJJclI/AAAAAAAAAdI/CrXhPYboPp4/s1600/stumbleupon.png' width='20'/></a>

</span> 

 </b:if>

Guardamos los cambios y listo:

Consideraciones:

Si deseas cambiar la alineación a la izquierda, cambias float: right por float: left. 

Cambiar Compartir: por el mensaje que irá antes de los iconos. 

Si deseas que los botones aparezcan en la página principal, elimina los siguientes códigos:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

 </b:if>


Si te Gusto, Compártelo con tus Amigos! y deja un comentario! GRACIAS!!!