Tutorial para insertar botón "meneame" en blogger

Sé que es un cambio un poco extraño de temática del blog. No suelo hablar de mis inquietudes informáticas. Pero como anoche le dediqué un buen rato a esto y creo que puede haber bastante gente interesada en esto, os pongo cómo lo he hecho en cuatro sencillos pasos para que lo incluyáis en vuestro blog de blogger.

Para los que no se hayan fijado, he hecho un pequeño cambio en el widget de los botones para compartir de modo que en vez de salir el botón "Buzz" sale el elefantito de meneame.net. Para ponerlo así he tenido que hacer un poco de investigación, buscarme el código fuente y echar un poco de mano al photoshop. Como muchos sabéis, Buzz es un servicio de google bastante fallido, y a los webmasters más bien nos interesa poco que nos compartan una entrada por esa vía, sobre todo comparado con meneame.

Así que os pongo el tutorial, hecho por mí, para el que le interese hacerlo, que lo tenga más fácil que yo:

• En la pestaña de Diseño de Blogger, en el recuadro para "Entradas de blog" le dais a editar y activáis "Enlaces para compartir". De esta manera aparecerá donde elijáis el botón clásico que nos provee blogger con el símbolo de Buzz.
• Ahora, en la misma pestaña de diseño tenéis que ir a "Edición de html" y después hacéis click en la opción "Expandir a pantalla de artilugios". Antes de hacer ningún cambio os recomiendo que guardéis la plantilla, está la opción un poco más arriba.
• Tenéis que copiar el siguiente código:

.share-button{display:block;width:21px;height:22px;float:left;
background:url("http://2.bp.blogspot.com/_mnFa7KgTTFI/TQlllt1waxI/AAAAAAAAAVA/FeEPgDoKrU4/s1600/share_buttons.png") no-repeat left !important;overflow:hidden}a:hover.share-button{text-decoration:none}.share-button-link-text{position:absolute;left:-999px} .sb-email{background-position:0 0 !important}a:hover.sb-email{background-position:0 -22px !important}a:active.sb-email{background-position:0 -44px !important}.sb-blog{background-position:-21px 0 !important}a:hover.sb-blog{background-position:-21px -22px !important}a:active.sb-blog{background-position:-21px -44px !important}.sb-twitter{background-position:-42px 0 !important}a:hover.sb-twitter{background-position:-42px -22px !important}a:active.sb-twitter{background-position:-42px -44px !important}.sb-facebook{background-position:-63px 0 !important}a:hover.sb-facebook{background-position:-63px -22px !important}a:active.sb-facebook{background-position:-63px -44px !important}.sb-buzz{background-position:-84px 0 !important;width:22px}a:hover.sb-buzz{background-position:-84px -22px !important}a:active.sb-buzz{background-position:-84px -44px !important}

Esto tenéis que pegarlo donde los estilos css de vuestra plantilla. Por ejemplo, dadle a "buscar" (ctrl+F) y buscáis .footer, y lo pegáis antes de ello. Si os fijáis en el código hay un enlace a una imagen, ahí es donde está la clave del asunto, si queréis guardaos la imagen y subidla a vuestra propia cuenta de blogger, si no tampoco será tan grave. Es la misma imagen que corona este post.

• Ahora volvéis a darle a ctrl+f (buscar) y buscáis "share-button sb-buzz", y substituís este texto por lo que encontréis. Los límites de lo que tenéis que copiar están dados por las etiquetas:

<a class="share-button sb-buzz" href="http://meneame.net/submit.php?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title" onclick="'" height="415,width="690\" title=""Menea este post"" target="_blank"/>
<span class="share-button-link-text"/><data:top.sharetobuzzmsg></data:top.sharetobuzzmsg/></span/></a/>

Y ya lo tenéis. Con esto ya tendréis lo suficiente para poder insertar un botón de meneame.net en el panel de enlaces de compartición de blogger.