Blog cerrado. Gracias a todos los que alguna vez han visitado este blog. Un saludo, Juanma
 

6

Marcadores Sociales Fijos



Los marcadores sociales sirven para compartir y distribuir las entradas. Los visitantes que consideren importantes tus contenidos podrán enviarlos a los principales marcadores: Bitácoras, Technorati, Digg, Menéame, Twitter...

Con este truco podrás implementar unos marcadores sociales que quedarán fijos en la esquina de tu blog, de manera que cualquier visitante los pueda ver y enviar tus entradas de forma rápida.
Puedes ver como quedan en esta misma entrada en la esquina derecha del blog.

En primer lugar, abre la sección Diseño > Edición de HTML.



Expandimos la plantilla de artilugios y buscamos (Ctrl+F):
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>


Y justo debajo pegamos el siguiente código:


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



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

<div id='Msociales'>

<a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url' target='_blank' title='Votar Anotación en Bitacoras.com'><img height='48px' src='http://lh5.ggpht.com/_yljdfbN-GVY/Sw6uEsoImkI/AAAAAAAAApg/07uKQxU2y54/Bitacoras_Black_In_Grunge2.png'/></a>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Technorati'><img height='48px' src='http://lh4.ggpht.com/_yljdfbN-GVY/Sw6mVOyxYHI/AAAAAAAAApQ/nBt3ik7oAXM/technorati-logo2-webtreats.png'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Digg'><img height='48px' src='http://lh3.ggpht.com/_yljdfbN-GVY/Sw6lsvVWjOI/AAAAAAAAAo4/Hb4X5E5AMxU/digg-logo-webtreats.png'/></a>

<a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Menéame'><img height='48px' src='http://lh6.ggpht.com/_yljdfbN-GVY/Sw6ls5O8gpI/AAAAAAAAApA/QX1mhdSLr4M/meneame-webtreats.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Reddit'><img height='48px' src='http://lh4.ggpht.com/_yljdfbN-GVY/Sw6mU6rSKrI/AAAAAAAAApI/4myYmkPFncA/reddit-logo-webtreats.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a Del.icio.us'><img height='48px' src='http://lh3.ggpht.com/_yljdfbN-GVY/Sw6lsZLfQ3I/AAAAAAAAAo0/ebBrWQ9nbX4/delicious-webtreats.png'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; +data:post.url' target='_blank' title='Agregar a StumbleUpon'><img height='48px' src='http://lh5.ggpht.com/_yljdfbN-GVY/Sw6mVOfSA0I/AAAAAAAAApM/LHQuTi6MTtY/stumbleupon-webtreats.png'/></a>

<a expr:href='&quot;http://twitter.com/home/?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Twittealo'><img height='48px' src='http://lh4.ggpht.com/_yljdfbN-GVY/Sw6mVB6lJwI/AAAAAAAAApU/am_kAKeRUU4/twitter-bird2-webtreats.png'/></a>

<a expr:href='&quot;http://facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Agregar a Facebook'><img height='48px' src='http://lh6.ggpht.com/_yljdfbN-GVY/Sw6lsnF5MFI/AAAAAAAAAo8/XKsAP4yfiNU/facebook-logo-webtreats.png'/></a>

<a href='http://feeds.feedburner.com/juanma' target='_blank' title='Suscríbete al Feed RSS'><img height='48px' src='http://lh3.ggpht.com/_yljdfbN-GVY/Sw6mU0clgfI/AAAAAAAAApE/kMv-71NmSfg/rss-basic-webtreats.png'/></a>

</div>

</b:if>

</div>

Antes de ]]></b:skin> añadimos unas líneas de CSS que harán que los marcadores queden fijos.


/*-- Marcadores Sociales Fijos --*/

#Msociales {
position: fixed;
bottom: 70px;
right: 10px; /*-- Posición de los marcadores en el blog --*/
width: 50px; /*-- Ancho --*/
height: 640px; /*-- Alto --*/
padding: 0px 0px 0px 0px; /*-- Márgenes --*/
}
 Los iconos incluidos en el código podéis encontrarlos en Webtreats ect. en esta entrada. Las imágenes están alojadas en Picasa, os recomiendo que las subáis a vuestro propio alojamiento.

Saludos.

6 comentarios:

C3C1 dijo...

Bastante interesante, aunque no me ha quedado demasiado claro su función, aún así me he animado y he seguido tus pasos, pero no encuentro esas líneas ni con ctrl+f ni buscando manualmente aún habiendo expandido las plantillas de artilugios, ¿a qué puede deberse?

Un saludo ;)

Juanma™ dijo...

C3C1 sólo con buscar la primera línea te sale. Si buscas todo entero es normal que no te salga. :)
Saludos!

El Angel de cari dijo...

Hola juanma!
pasamos a dejarte un saludo y ya que estaba aquí te enlace en el blog.
Besos

Juanma™ dijo...

Hola,Cari Y Yoli. Gracias por el enlace. :)
Un gran abrazo desde España.

La Trucoteca dijo...

Hola Juanma!
Pasábamos para desearte una felizzzzz navidad, especialmente a ti, porque, seguramente has sido el mejor amigo bloggero que hemos tenido durante todo este año ;)
Muchos saludos de parte de Germán y Javier

¡Felices fiestas!

Juanma™ dijo...

¡Germán y Javier!. Felices fiestas para vosotros también. Que me enojo con lo de "el mejor amigo bloggero", jaja. Igualmente.

¡Un gran abrazo desde el sur!