viernes, 11 de julio de 2008

Añadir iconos para las redes sociales en blogger

Algo muy demandado entre los nuevos bloggers es la manera de poner los iconos para las redes sociales debajo de cada post. De forma que puedan ser enviados a estos servicios para quien le interese, cosa que nos beneficia dado que nos fomenta el tráfico hacía nuestro blog dando publicidad de los artículos en estas redes sociales donde acuden diariamente miles de visitas.

Por tanto, a continuación detallaremos los pasos para colocar los susodichos iconos.

Nos vamos a la página de modificación de la plantilla. Es decir, en la pestaña Diseño a la sección Edición de HTML y activamos la opción Expandir plantillas de artilugios.

A continuación mediante el acceso directo Ctrl + F, buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>


Y lo sustituiremos por lo siguiente:
Donde cada etiqueta <li> es un icono con su respectivo enlace al formulario de la red social en cuestión.

El último paso se trata de darle estilo a las anteriores listas por lo que añadiremos unos parámetros en CSS. Para ello buscamos la siguiente línea, ]]></b:skin>, y justo antes incluimos el siguiente código:Ya hemos terminado, por ultimo decir que los anteriores parámetro pueden ser modificados a vuestro gusto para adaptarlos a vuestro blog como más os guste.

Otra cosa a decir es que en el primer código están incluidos las redes sociales más conocidas, pero si queréis añadir más, solo tenéis que duplicar toda la sentencia que hay entre <li> y </li> ambos incluidos y situarla antes del "tag" </ul>, y a su vez cambiar la dirección de la red social y la dirección del gif que lo va a representar. El ejemplo:A continuación os listo otras redes sociales con su icono respectivo por si quereis agregar alguna mas.
Código de Hazmereir:

<li><a expr:href='"http://www.hazmereir.net/login.php?return= /submit.php" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2108626471_c28070a4c7_t.jpg'/></a></li>

Código de Webeame:


<a expr:href='"http://www.webeame.net/submit.php?url=" + data:post.url + "&amp;title="+ data:post.title' target='_blank'><img alt='Agregar a Webeame' src='http://club.telepolis.com/S98GYVNSG/webeame.gif'/></a>

Código de Mascame:

<li><a expr:href='"http://www.mascame.com/submit.php?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Mascame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2301/2110794361_2c64942f60_t.jpg'/></a></li>

Código de Seoclon:

<li><a expr:href='"http://www.seoclon.com/submit?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Seoclon' class='rsociales-sobre' src='http://farm3.static.flickr.com/2041/2111573886_8f8b285d35_t.jpg'/></a></li>

Código de Blub:

<li><a expr:href='"http://noticias.sinmiedo.es/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blub#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2274/2111573792_c4d2697cc9_t.jpg'/></a></li>


Código de Universo TV:

<li><a expr:href='"http://www.universotv.org/login.php?return=/submit=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Universo TV#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2222/2111573860_7244885759_t.jpg'/></a></li>

Código de Enchilame:

<li><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + &amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Enchilame#039; class='rsociales-sobre' src=' http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/enchilame.gif'/></a></li>

Código de Viajame:

<li><a expr:href='"http://www.viajame.net/login.php?return=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Viajame' class='rsociales-sobre' src='http://farm3.static.flickr.com/2396/2111552084_95eb91769c_t.jpg'/></a></li>


Código de MisterWong:

<li><a expr:href='" http://www.mister-wong.es/index.php?action=addurl&bm_url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Hazmereir#039; class='rsociales-sobre' src='http://www.tecnoswa.com/blog/wp-content/themes/blog-pixel/favoritos/wong.gif'/></a></li>

Código de Wikio:

<a expr:href='"http://www.wikio.es/vote?url=" + data:post.url + "&amp;title="+ data:post.title' target='_blank'><img alt='Agregar a wikio' src='http://club.telepolis.com/S98GYVNSG/wikio.gif'/></a>

Código de la Claqueta:


<li><a expr:href='"http://www.claqueta.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a la Claqueta#039; class='rsociales-sobre' src='http://imagenes.claqueta.net/Gravatar_15.gif'/></a></li>

Código de Autobombo:

<li><a expr:href='"http://autobombo.es/submit.php?url=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Autobombo#039; class='rsociales-sobre' src='http://farm3.static.flickr.com/2113/2110794305_ae78e3b0ca_t.jpg'/></a></li>


Código de StumbleUpon:

<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Agregar a StumbleUpon'><img alt='Agregar a StumbleUpon' class='rsociales-sobre' src='http://img396.imageshack.us/img396/1984/stumbleuponxr5.png'/></a></li>
Desplegar/Ocultar lista


Debido a la gran cantidad de código espero no haberme equivocado en nada, pero por si acaso si alguna no funciona, por favor comunicádmelo para su corrección. En principio todos están probados así que no tendréis problemas ni con los enlaces ni con las imágenes. Espero que les sirva para vuestro propósito, y os recuerdo que no tenéis que incluirlas todas obligatoriamente.

Para otra cosa o cualquier duda ya sebeis donde estamos :D.

#Actualización: Agragado StumbleUpon a la lista de redes sociales.

11 Comentarios:

Mario dijo...

Hola Juanjo me he pasado por tu blog, y te han quedado de muerte, me alegro de que los hayas podido implementar con facilidad. Con respecto a tu duda es muy sencillo y vas en lo cierto al decir que es en el CSS, donde debemos añadir una propiedad.
Por tanto si lo que quieres es añadirle el borde con la sombra debería quedarte algo así:

.rsociales img {

border:1pt outset #999;
}
.rsociales-sobre:hover {

border:1pt outset #999;
}

Solo añadiendo la propiedad border en esas dos sentencias del CSS es suficiente luego puedes modificarlo a tu gusto siendo 1pt el grosor, outset el estilo y #999 el color. Con respecto a los estilos hay muy diversos por lo que puedes probar hasta quedarte con el que más te guste: hidden, dotted, dashed, solid, double, groove, ridge, inset y outset.

Espero haberte ayudado, ya sabes que si tienes otra cuestión no dudes en comentarlo aquí.

Un saludo amigo :D.

Anónimo dijo...

Gracias me ha surtido efecto aunque no entiendo por que los recuadritos / pegatinas de los iconos a mi se me ven un poco mas pequeños que los tuyos, bueno eso igual asi me vale se ven bonitos.

Gracias :P

Anónimo dijo...

Ya esta por fin! perdona que te haya tomado prestado un par de códigos más de vuestro código fuente pero es que ahora se ven perfectos osea como los tienes tu jejeje.
Gracias de nuevo.

Salud/Os!

Mario dijo...

Me alegro que de una manera u otra hayas logrado lo que querías. Un fuerte saludo. ;D

Anónimo dijo...

div class='post-footer-line post-footer-line-3'/ este es el unico codigo que encuentro, por que el que tu das no esta en mi plantilla, quizas sea cosa de plantillas, habra solucion?, o poner en otro lado este codigo, ya en otros, blogs, he encontrado el mismo problema en algunos comentarios.

Mario dijo...

No te preocupes JOtaCT, en algunas plantillas en vez implementar estas ares con la etiqueta <p... lo hacen con <div..., sin embargo no hay ningún inconveniente siempre y cuando te cerciores que esta sección esta dentro de <div class='post-footer'>, si es así sigue los pasos tal cual.

Si tienes algún problema comentalo.

Unknown dijo...

Me salen los botones en vertical.. Cual puede ser el problema??

Mario dijo...

Hola Greg¡¡ A mi me sucedió el mismo problema, y resulto ser que el el código CSS lo había colocado mal, cerciórate de que lo has situado en el lugar correcto antes de ]]></b:skin>, y si en cambio lo tienes bien situado fíjate en haber copiado tal cual el código de las redes sociales, lo digo porque deben estar encerradas en unas etiquetas <div>.

Intenta probar con eso si sigues teniendo problemas no dudes en comentarlo.

Saludos¡¡

Mario dijo...

Gracias Ricardo, aunque no se cual es tu blog ya que no tienes el perfil público :S. Aun así nos alegramos de que te guste, pero si pudieras proporcionarnos tu dirección mucho mejor ;S

Saludos :D

Hola!
¿que hago si al expandir artilugios y buscar el primer código no aparece? Antes tenía una plantilla minima y desde hace algun tiempo tengo una nueva y algo modificada.
¿Cómo puedo hacerlo?

Publicar un comentario