Marcadores de redes sociales en blogger


Si buscas otra alternativa con mejor diseño (gracias a Elpotro) de las que ya vimos (I y II) para poner los iconos de las redes sociales para compartir y difundir el contenido de tu blog puedes optar por lo siguiente:



1) Vamos a Diseño
2) Edición de HTML
3) Marcamos la casilla "expandir artilugios"
4) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido)
5) Antes de </head> pegamos el siguiente código:


<!-- Iconos redes sociales -->
<style type='text/css'>
.pushbutton a:hover{
position: relative;
top: 1px; left: 1px;
outline:none;
}
.bookmark table{
background-color:#000911;
border:1px hidden gray;
padding:10px;

}
.bookmark td{
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #CCCCCC;
}
.bookmark img{
vertical-align: middle;
}
</style>
<!-- Fin Iconos redes sociales -->



6) Ahora buscamos <p class='post-footer-line post-footer-line-3'/>
Dependiendo de nuestra plantilla no nos aparecerá y deberemos buscar en su lugar por <div class='post-footer-line post-footer-line-3'/>
7) Justo debajo pegaremos el siguiente código:


<!-- Iconos redes sociales -->
<p align='left' class='post-footer'>
<td style='vertical-align:middle' valign='middle' width='15%'><div>Compártelo:</div></td><span class='pushbutton'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img188.imageshack.us/img188/5378/delicioushx9.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img src='http://img10.imageshack.us/img10/9247/bitacoras.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' target='_blank'><img src='http://img188.imageshack.us/img188/9284/rssf.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img46.imageshack.us/img46/5803/digggn.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img34.imageshack.us/img34/2607/googlez.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img207.imageshack.us/img207/6710/yahooweb.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://www.technorati.com/faves?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img231.imageshack.us/img231/4666/technorati.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img207.imageshack.us/img207/3607/meneame.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://tec.fresqui.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img36.imageshack.us/img36/4478/fresquiam.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://www.blogmemes.com/post.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img189.imageshack.us/img189/2158/blogmemes.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://www.neodiario.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img189.imageshack.us/img189/9827/neodiario.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://enchilame.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img41.imageshack.us/img41/517/enchilame.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://twitter.com/home/?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img60.imageshack.us/img60/2700/twitterq.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;https://favorites.live.com/quickadd.aspx?marklet=1&amp;mkt=en-us&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img26.imageshack.us/img26/2134/liverww.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='&quot;http://myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img src='http://img8.imageshack.us/img8/8239/myspacexhm.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><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'><img src='http://img170.imageshack.us/img170/3513/facebooko.png' style='border:0px; padding:2px' valign='bottom'/></a></span></p>
<!-- Fin Iconos redes sociales -->



8) Clicamos en vista previa y si no hay ningún problema guardamos la plantilla.


Por defecto vienen los marcadores de del.icio.us, RSS, Digg, Google, Bitacoras, Yahoo, Technorati, Meneame, Frequi, Blogmemes, Neodiario, Enchilame, Twitter, Live, My Space y Facebook. En cambio otras como Badoo, Meetic y Tuenti deben esperar.

53 comentarios:

  1. Hola! Gracias por tu ayuda! Me ha servido mucho. La barra de marcadores me sale horrible, he copiado y seguido todas tus instrucciones pero todos los iconos salen en forma horizontal. He buscado mil y un blogs relacionados al tema, he copiado igual, tal cual indican y el resultado es el mismo. Por fa, ayúdame.

    ResponderEliminar
  2. Perdón por el error, me salen en forma vertical, todo en una columna. Horrible.
    Gracias!!

    ResponderEliminar
  3. Hola Turismoyperu. Creo que el motivo es porque el tamaño de las entradas es demasiado estrecho, por eso le ocurre. Te recomiendo que observes la columna derecha de este blog en donde pone "DA A CONOCER TU BLOG". En ese menú desplegable encontrarás otros tipos de botones para marcadores sociales.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  4. Ya lo he hecho con la nueva plantilla, perfecto, mejor que los otros botones de Addthis,
    están creador por ti?

    ResponderEliminar
  5. Hola compañero. No, estos botones los he sacado del blog de mi compañero "El Potro". Si te fijas en la primera línea le doy las gracias por ello.

    La verdad es que dan un toque serio y elegante al blog. Sin duda, de los mejores que he visto.

    Un saludo y gracias por comentar.

    ResponderEliminar
  6. Hola quierocrearunblog, en mi plantilla no hay div class='post-footer-line post-footer-line-3'/, pero esta lo mismo acabado en 1 y 2, probe a ponerlo en esos dos sitios, pero me sale arriba del todo del post, donde debería ponerlo para que me saliera al final del post?

    ResponderEliminar
  7. Hola jose_3. Prueba a ponerlo antes de <data:post.body/> Ya me comentarás si te funciona o no. Saludos

    ResponderEliminar
  8. Gracias me sirvio mucho, mil gracias

    ResponderEliminar
  9. Gracias a ti Rols. Bienvenido al blog, gracias por tu visita y por tu comentario.

    ResponderEliminar
  10. hola compañero otra ves yo a como pregunto cosas vdd? jaja bueno ps este post esta genial pero el problemas es ke lo unico que encuentro es esto: div class='post-footer' y si lo pongo despues de eso si me salen pero el problema es que como mi plantilla es algo diferente ps sale en las entradas nuevas pero cuando entro a una entrada ya no sale y era lo ke keria ke pasara ya intente hacerle como dijiste en el comentario 7 y no me funciono gracias

    ResponderEliminar
  11. Hola tebant. ¿A qué blog te refieres por favor?

    ResponderEliminar
  12. me refiero al blog de mundo latino online cuando pongo el cogido sale en lo cuadritos chiquitos de los videos pero cuando entro a la entrada ya no sale que crees que deba hacer? porke me sucede lo mismo con el post que pusiste de entradas relacionadas y ps la vdd son dos cosas que si me gustaria ponerle a mi blog pero no se como espero puedas ayudarme muchas gracias

    ResponderEliminar
  13. hola compañero otra vez yo intente poner este mismo truco en el otro blog que tengo donde si encontr a p class='post-footer-line post-footer-line-3' pero aun asi cuando doy vista previa me sale error de tipo "a" y ya busque y todo esta bien no entiendo porke no me funciono en ningun blog este post

    ResponderEliminar
  14. Si te da error es que te falta alguna palabra que no has copiado bien. Ese error es porque algún enlace no está bien descrito. Revísalo.

    ResponderEliminar
  15. Mil millones de gracias... busqué un montón, intenté un montón y de la única forma que salió bien fue siguiendo tus instrucciones... sabía que no podias fallar!!!!! te sigo en twitter!(reinorosario)

    ResponderEliminar
  16. hola ps ya me canse de revisarlo y nomas no pero bueno ya no importa el ke si me gustaria q me ayudaras es en el otro blog el de mundo latino problema que te explico en el comentario 12 espero tu respuesta gracias nos vemos

    ResponderEliminar
  17. @Lis. Gracias por todo Lis, me alegro que te haya servido. Saludos y felices fiestas.

    @tebant21. Te repito lo mismo que te comenté, trata de mirar si copias el código entero. Si te da error de enlace que falta la "a" es porque no está bien copiado. Si no es por eso no sé darte otro motivo. Lo lamento.

    ResponderEliminar
  18. Saludos desde Venezuela !!!
    He querido colocar los marcadores de redes sociales pero me da error, en el paso 6 es dode esta el problema ya que ninguno de los dos códigos los tengo, intenté también con lo que dices en tu comentario # 7 como respuesta a jose_3 pero tampoco me ha funcionado...
    Si me das un e-mail te explicaria mejor incluso pegandote las pantallas donde me da los errores, el mio es jarsmusic80@hotmail.com
    Apreciaria tu apoyo...
    Gracias...

    ResponderEliminar
  19. Hola juan, estoy intentando poner estos botones en mi blog, la primera parte muy bien, pero la segunda parte no, no encuentra nnguno de esos dos códigos... he seguido las instrucciones tal cual, y no me sale... tambien he probado lo del comentario 7, y tampoco, que puedo hacer? sabes si hay alguna otra forma de poner botones de este tipo?
    gracias por adelantado! =)

    ResponderEliminar
  20. Hola a Jonathan y Carles. ¿Habéis marcado la casilla "expandir artilugios"?

    ResponderEliminar
  21. no tengo el post-footer-line-3
    solo tengo el 1 y el 2, he probado y nada...
    tampoco tengo esa etiqueta

    ayudenmee

    ResponderEliminar
  22. ola, mira, tengo este problema, al realizar el segundo paso, me sale este mensaje, lo he intentado muchas veces y siempre sale lo mismo, porfa ayudame, gracias...
    "No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>"."

    ResponderEliminar
  23. @Elias. Hola. Trata de hacerlo respecto al post-footer-2.

    @jhova. Hola. Ese error que te da es porque no has copiado bien los códigos, falta un > o />. Revisa que copias el código entero sin dejarte nada.

    ResponderEliminar
  24. a mi me sale que el codigo esta mal cerrado .... y no tengo ni idea que puede ser.

    ResponderEliminar
  25. No ha habido manera y forma posible para ponerlo bien y como no tengo idea, busque en otro enlace amigo de esta pagina, creo , y ya si me salia bien , asi pues os dejo el link con el ke lo he puesto yo bien.

    http://ciudadblogger.com/2009/06/poner-marcadores-sociales-en-blogger.html

    ResponderEliminar
  26. Hola regi, son los mismos pasos éstos que los de Ciudad Blogger, pero los míos están explicados de forma más simple. Si no te funcionó aquí tampoco lo debería haber hecho allí jajaja.

    Un saludo y me alegro que ya lo hayas solucionado.

    ResponderEliminar
  27. Hola, acabo de descubrir tu blog. Como dirian en "que vida mas triste"; ES LA VIDA

    No consigo hacer el paso 2º. El error q me aparece es este:

    Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

    me puedes echar un cable?

    ResponderEliminar
  28. @Pablo. Hola Pablo, comprueba que copias el código entero. El error que te da es porque no está al completo.

    @Pepe. Gracias amigo, me alegro que te haya servido.

    ResponderEliminar
  29. En primer lugar darte las gracias por tus explicaciones y luego hacerte una consulta. He tratado de añadir al código que has propuesto el atributo "alt" para que al colocar el ratón encima de la imagen aparezca el nombre del marcador social. Con la modificación que he probado quedaría así:

    [...]img alt='Del.icio.us' src='http://img188.imageshack.us/img188/5378/delicioushx9.gif' style='border:0px; padding:2px' valign='bottom'[...]

    Pero parece que no funciona. Supongo que algo estaré haciendo mal ¿Sugerencias?
    Gracias de nuevo

    ResponderEliminar
  30. Hola de nuevo, ya he descubierto como añadir el nombre del marcador al pasar el raton por encima; te lo dejo por si a alguien le interesa. A cada una de las expresiones:

    [...]a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'

    añadimos justo despues el atributo: title='Nombre del marcador'

    De modo que quedaría:
    [...]a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Del.icio.us' [...]

    ResponderEliminar
  31. Hola amigo. Efectivamente tal y como comentas agregando "title" muestra el nombre. Lo tengo explicado en otra entrada de mi blog.

    Un saludo y gracias por tu aporte.

    ResponderEliminar
  32. NO se si se habrán dado cuenta pero hoy 26-02-2010. Algunos iconos que estaban alojados en un servidor, no estaban funcionando.
    Entonces cambie todos y los guarden en mi cuenta de blogger. Ademas le puse titulo a cada uno para que se pueda leer.

    El código que tienen que reemplazar quise poner en este lugar pero me dice que es tiene demasiados caracteres. Entonces lo que podríamos hacer es mandenme un mail a josego85@gmail.com o entren a mi blog y pidamenlo ahí. O copien de mi código. NO tengo bloqueado para que puedan copiarlo.

    Saludos. Fuerza a todos los Blogerros. Juntos mejoramos.ej

    ResponderEliminar
  33. yo creo qe tengo un grable problema ya que no encontre niuno de los dos codigos a buscar que puedo aser??

    ResponderEliminar
  34. funciona a la perfeccion pero me quedo bajo los comentarios, como lo puedo poner sobre los comentarios?


    saludos

    ResponderEliminar
  35. ola amigo, mira no me salio como tu lo colocas...
    lo hice con mi forma y si me dio :P

    <div class=

    te invito a mi blog, yo te hablo publisidad :P

    http://zonahacker01.blogspot.com/
    chao

    ResponderEliminar
  36. Muy bueno!! muchas gracias..
    Pero me quedo muy abajo, me gustaría debajo del título de la entrada.. de ser así donde tendría que pegar el código???
    Saludos

    ResponderEliminar
  37. Bien, hice lo recomendado en el comentario 7:
    ("Hola jose_3. Prueba a ponerlo antes de Ya me comentarás si te funciona o no. Saludos")
    Como no existían en mi plantilla los códigos citados en esta entrada y no me funcionó como quería, pues salía debajo del título de la entrada y yo lo quería al final, intenté copiarlo "debajo" de y ya quedó bien.
    Saludos y gracias! :)

    ResponderEliminar
  38. ¿Que pasó con el icono de twitter? Me desapareció... y en tu entrada también..

    ResponderEliminar
  39. Hola

    Definitivamente este es el mejor blog que e visitado, tienes muchas cosas utiles, pero tengo una duda, ya hice todo lo que dice este post paso a paso lo repeti dos veces pero las redes sociales salen arriva de mis post, me podrias explicar como bajarlo abajo de mis post, de antemano gracias.

    ResponderEliminar
  40. Hola que tal. Pongo en búsqueda alguna de las frases entre comillas del punto 6 pero en mi plantilla no se encuentran ninguna de las dos. Cómo puedo hacer? gracias !

    ResponderEliminar
  41. Lo máximo, gracias!fue genial q tb recoerdaras q si no se encuentra p class es div class!un abrazo

    ResponderEliminar
  42. Gracias, me ha quedado perfecto, el 60% del exito de mis blogs es gracias al tiempo que dedicas en enseñar tantas y variadas funciones. Sigue adelante y te mando una nube cargada de exito y prosperidad. Omnitube

    ResponderEliminar
  43. Hola Juan, gusto de saludarte, una pregunta ¿cómo hago para que me quede debajo del post? espero tu amable respuesta

    ResponderEliminar
  44. Lo primero, muchas gracias por la información, me ha venido genial.
    Pero una duda, se podría hacer que no aparezcan los marcadores en la portada del blog? que sólo aparezcan al abrir los artículos?
    Y otra cosilla más, son compatibles con los famosos "me gusta", twitter, etc...?
    Gracias por todo.
    Un saludo.

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  47. HOLA Y BUENAS NOCHES ESTIMADO SEÑOR:

    BUENO YO PUSE UN GADGET EN MI BLOG PARA QUE APARECIERA LA PALABRA ME GUSTA PERO TMB QUIERO SABER COMO PUEDO HACER PARA APARECAN LA GENTE CON SUS CARAS DE LAS PERSONAS K LE GUSTA MI BLOG, HAY ALGUNA FORMA SENCILLA. MUCHAS GRACIAS ES LO DE AÑADIR COMO MIEMBRO SOLO LO HICIERON 2 PERSONAS MAS POR K DICEN K ES MUY COMPLICADO. MUCHAS GRACIAS

    ResponderEliminar
  48. Es una explicación sin desperdicios, me sirvió para sustituir uno código que ta tenia antes el cual tenia el icono de facebook mal configurado.
    http://personajesysociedad.blogspot.com/

    ResponderEliminar
  49. alguna forma de hacerlo automaticamente?

    ResponderEliminar