Share Social Widget de Gameyard

Éste es un nuevo widget para Blogger orientado a compartir tus post en las más conocidas redes sociales.

Como todos sabemos por experiencia el widget para intercambio social es una de las partes más importantes de cualquier blog. Pero como comentaba en el post anterior, estos adminículos suelen tener problemas para presentar los datos correctamente en Facebook. Aquí no existe ese problema y además se comparte con Twitter, Google +, Stumbleupon y Digg. 

La implementación la vi en Gameryard y todos los créditos son para ese sitio web.

Cómo instalar este widget?

•      Ve a tu escritorio Blogger .
•      Selecciona tu Blog.
•      Ahora ve a la plantilla y haz clic en Editar HTML.
•      Ahora comprueba Expandir plantillas de artilugios.
•      Encuentra  ]]> </ b: skin> (usando ctrl + f) y pega antes de ella el código CSS que te muestro  a   continuación:

.gameryard-social { background: url("http://2.bp.blogspot.com/-xdROzl1aaMo/T161qjmzpQI/AAAAAAAAAzk/neuJGaNiCmA/s1600/sh.png") no-repeat scroll 3px 1px #202020; border-color: #000000 #333333 #333333 #000000; border-radius: 6px 6px 6px 6px; border-style: solid; border-width: 1px; display: inline-block; line-height: 13px; list-style-position: outside; list-style-type: none; margin: 10px 0 0 0; padding-bottom: 12px; padding-left: 180px; padding-top: 10px; }

• Guarda la plantilla.
• Busca el código  </ head> y antes de él pega el siguiente código.

 <style type="text/css"></span><br /> /* Beautiful Social Bookmarking Widget By sagartrajan @ www.gameryard.org */     ul.gameryard-social { list-style:none; margin:15px auto;display:inline-block; }       ul.gameryard-social li { display:inline; float:left; background-repeat:no-repeat; }     ul.gameryard-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }       ul.gameryard-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}       ul.gameryard-social li.gameryard-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/gameryard-facebook.png"); }       ul.gameryard-social li.gameryard-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/gameryard-twitter.png"); }        ul.gameryard-social li.gameryard-googlebuzz { background-image:url("http://4.bp.blogspot.com/-MQbXelbww-0/USCV1h_clKI/AAAAAAAADcc/YJd17SDAA7Y/s1600/gameryard-googlebuzz+copy.png"); }       ul.gameryard-social li.gameryard-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/gameryard-stumbleupon.png"); }       ul.gameryard-social li.gameryard-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/gameryard-digg.png"); }       ul.gameryard-social li.gameryard-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/gameryard-delicious.png"); }       ul.gameryard-social li.gameryard-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/gameryard-linkedin.png"); }       ul.gameryard-social li.gameryard-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/gameryard-reddit.png"); }       ul.gameryard-social li.gameryard-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/gameryard-technorati.png"); }       #gameryard-cssanime:hover li { opacity:0.2; }       #gameryard-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }       #gameryard-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }       #gameryard-cssanime li:hover { opacity:1; }       #gameryard-cssanime li:hover a strong { opacity:1; top:-10px; }       /* Beautiful Social Bookmarking Widget By sagartrajan @ www.gameryard.org */     </style>

• Guarda nuevamente la plantilla
• Ahora busca <data:post.body/> (usando ctrl + f)y luego de él pega el siguiente código.

   <b:if cond='data:blog.pageType == "item"'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><ul class='gameryard-social' id='gameryard-cssanime'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-facebook'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><b>Facebook</b></a></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    </li> </span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-twitter'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><b>Twitter</b></a></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    </li> </span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-googlebuzz'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    <a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><b>Google +</b></a></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    </li> </span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-stumbleupon'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><b>StumbleUpon</b></a></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    </li> </span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-digg'></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">    <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><b>Digg</b></a></span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-delicious'><br /> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><b>Delicious</b></a><br /> </li> </span><br /> <span style="color: #444444; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> <li class='gameryard-linkedin'><br /> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><b>LinkedIn</b></a><br /> </li>

Guarda la plantilla y listo.

De ésta manera el widget aparecerá en el encabezamiento del post. Si quieres, como es mi caso, que aparezca en el footer o pie del post deberás pegar este último código luego de:



<div class='post-footer'> o <div class='post-footer-line post-footer-line-1> o <div class='post-footer-line post-footer-line-2> o < div class='post-footer-line post-footer-line-3>