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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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='"http://bitacoras.com/anotaciones/" + 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 + "feeds/posts/default"' 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='"http://digg.com/submit?url=" + data:post.url + "&title=" + 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='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + 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='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url=" + data:post.url + "&title=" + 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='"http://www.technorati.com/faves?url=" + data:post.url + "&title=" + 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='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + 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='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + 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='"http://www.blogmemes.com/post.php?url=" + data:post.url + "&title=" + 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='"http://www.neodiario.net/submit.php?url=" + data:post.url + "&title=" + 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='"http://enchilame.com/submit.php?url=" + data:post.url + "&title=" + 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='"http://twitter.com/home/?status=" + data:post.url + "&title=" + 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='"https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=" + data:post.url + "&title=" + 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='"http://myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + 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='"http://facebook.com/share.php?u=" + data:post.url + "&title=" + 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, Zoosk y Tuenti deben esperar.
52 comentarios:
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.
Perdón por el error, me salen en forma vertical, todo en una columna. Horrible.
Gracias!!
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.
Ya lo he hecho con la nueva plantilla, perfecto, mejor que los otros botones de Addthis,
están creador por ti?
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.
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?
Hola jose_3. Prueba a ponerlo antes de <data:post.body/> Ya me comentarás si te funciona o no. Saludos
Gracias me sirvio mucho, mil gracias
Gracias a ti Rols. Bienvenido al blog, gracias por tu visita y por tu comentario.
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
Hola tebant. ¿A qué blog te refieres por favor?
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
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
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.
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)
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
@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.
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...
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! =)
Hola a Jonathan y Carles. ¿Habéis marcado la casilla "expandir artilugios"?
no tengo el post-footer-line-3
solo tengo el 1 y el 2, he probado y nada...
tampoco tengo esa etiqueta
ayudenmee
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 "/>"."
@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.
a mi me sale que el codigo esta mal cerrado .... y no tengo ni idea que puede ser.
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
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.
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?
crack una y mil veces!!!
@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.
Gracias!!!!
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
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' [...]
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.
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
yo creo qe tengo un grable problema ya que no encontre niuno de los dos codigos a buscar que puedo aser??
funciona a la perfeccion pero me quedo bajo los comentarios, como lo puedo poner sobre los comentarios?
saludos
Muchas gracias!! Se ve muy padre!!
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
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
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! :)
¿Que pasó con el icono de twitter? Me desapareció... y en tu entrada también..
vale, ya apareció de nuevo... :[ ??
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.
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 !
Lo máximo, gracias!fue genial q tb recoerdaras q si no se encuentra p class es div class!un abrazo
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
Hola Juan, gusto de saludarte, una pregunta ¿cómo hago para que me quede debajo del post? espero tu amable respuesta
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.
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
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/
NORMAS PARA COMENTAR:
1) Si no encuentras lo que buscas emplea el buscador.
2) Si quieres preguntar algo, primero asegúrate que tu comentario guarda relación con la temática de la entrada.
3) Si tu pregunta no encaja en ninguna entrada mándame un e-mail en contacto situado a pie de página para preguntarme lo que necesites.
4) Trata de expresarte bien. Explica correctamente tu problema, y por favor, no escribas en mayúsculas ni emplees lenguaje SMS. Escribir correctamente es gratis.
5) No hagas SPAM. Comentarios breves con la unica intención de dejar la dirección de tu blog será considerado SPAM.
6) No se permiten descalificaciones ni faltas de respeto hacia ningún usuario.
Si no se cumplen estas seis normas el comentario será ignorado y/o borrado.
Respetando estas normas ganamos todos, conseguimos un mayor orden y ayuda para los nuevos visitantes. Gracias por tu comprensión.
Publicar un comentario en la entrada