Como agregar Bookmarks a tu blog (Blogger)

He creado este articulo porque he visto que muchos bloggers tienen la duda (como hace algunas semanas yo) de como insertar o agregar bookmarks a su blog, en este caso de Blogger (no lo he probado en Wordpress, para Wordpress ya hay un plugin de Bookmarks). Un bookmark es un marcador que permite enviar una noticia y compartirla valiendonos de distintos servicios web, graficamente se ve algo como:

Lo que deben hacer es ir a Plantilla> Edicion de HTML. Alli antes que nada hagan click en “Descargar plantilla completa” para crear una copia de seguridad por si hacen mal los cambios, luego clic en “Expandir plantillas de artilugios”, dejenla marcado con el check. Luego en la plantilla buscan el tag </head> y antes de eso pegan este codigo:

<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:2px;
}
.bookmark td{
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #CCCCCC;
}
.bookmark img{
vertical-align: middle;
}
</style>

Eso para dar el efecto de boton a la imagen.

Luego despues de <p class='post-footer-line post-footer-line-3'/>; pegan el código del siguiente enlace:

http://knxdtblog.googlepages.com/bookmarks.txt

Guardan la plantilla y listo.

PD: Editar el código puede conllevar a errores en la validacion de la plantilla xD.

Puedes leer también:


Si te gustó este artículo tal vez desees suscribirte a el canal RSS vía email completando este sencillo formulario o vía lector de feeds. Recuerda que si usas tu email debes verificar la activación de tu suscripción (si tarda mucho revisa en tu carpeta spam).

Comentarios

Recuerda leer las reglas del blog para dejar tus comentarios, de lo contrario jamás serán publicados, básicamente no mayúsculas, no lenguaje sms, no spam y no groserías ni insultos.

45 Comentarios en "Como agregar Bookmarks a tu blog (Blogger)"

  1. El Vengador Tóxico en September 28 del 2007

    Un artículo muy útil que ya he puesto en práctica. ¡Gracias por ello, y enhorabuena por tu blog!


     Add rating 0  Subtract rating 0  
  2. Anonymous en September 29 del 2007

    Tengo una duda, tu dices: “Luego en la plantilla buscan el tag y antes de eso pegan este codigo”
    Pero no entiendo muy bien en que lugar hay que pegar ese código. Perdonen mi ignorancia


     Add rating 0  Subtract rating 0  
  3. KnxDT en September 29 del 2007

    No hay nada que perdonar, (fue error mio) olvide validar el codigo para que sea visible en Internet Explorer, ahora si, el codigo de style va antes del tag </head>.

    Debe decir:”Luego en la plantilla buscan el tag </head> y antes de eso pegan este codigo:”


     Add rating 0  Subtract rating 0  
  4. EL MAGNÍFICO en October 1 del 2007

    Percy:

    También lo apliqué y me resultó, solo que hice lo mismo que Masterxp, te agregué al Blogroll.
    Este es mi blog
    http://elblogazodelcomic.blogspot.com/

    Voy a recomendar este sitio, estoy descubriendo cosas muy prácticas que desconocía. Muchas gracias.

    Saludos!


     Add rating 0  Subtract rating 0  
  5. Ficticio en October 3 del 2007

    Tenía que haber comentado esto, hace tiempo pero me quedé sin conexión, a ver, en mi configuración de plantilla no está ni el boton de Descargarplantilla completa, ni el de “Expandir plantilla de artilugios”!!! que hago Zebedéo!!???


     Add rating 0  Subtract rating 0  
  6. Daniel Valerio en October 3 del 2007

    No me salio porfa si pudieras ser mas especifico en el codigo html no encontre tag /head. Porque la verdad ahun soy novato en la materia gracias


     Add rating 0  Subtract rating 0  
  7. KnxDT en October 3 del 2007

    Realmente me sorprende el hecho que no tengas esas opciones ya que son propias de Blogger. Lo de “Expandir plantilla de artigulios” no tengo idea como puedas hacerlo si es que no lo tienes. Tal vez sea tu version de Blogger ¿cual usas?

    En cuanto a crear una copia, puedes seleccionar todo el codigo y copiarlo en un block de Notas.

    Seria conveniente que me mandes un screenshot (captura de pantalla) de tu Edicion de Plantilla. Saludos.

    PD: Siempre usa vista previa antes de grabar los cambios para previsualizar el diseño.


     Add rating 0  Subtract rating 0  
  8. neosho en October 9 del 2007

    Hola, me sirvió de mucho tu código, lo aplique en mi blog http://neoshomkt.blogspot.com del que ya me diste algunos buenos consejos, gracias por todo, un saludo.


     Add rating 0  Subtract rating 0  
  9. MoMo en October 9 del 2007

    Vaya muchas gracias,ha sido muy sencillo.


     Add rating 0  Subtract rating 0  
  10. Daniel en October 11 del 2007

    Quiero poner marcardores como los que estén en este blog. (con el texto de la izquierda cambiando según pasamos el mouse). Te agradeceré información.


     Add rating 0  Subtract rating 0  
  11. KnxDT en October 11 del 2007

    Daniel Valerio, para buscar el tag /head conviene que uses el buscador de texto, para los navegadores suele ser CTRL+F (mejor usado en Firefox).

    Neosho, me alegra que te sirviera, gracias por la visita. Saludos.

    Momo eso intento, que se haga sencillo.

    Daniel estate atento, pondré la actualización en breve, porque es un poco mas compleja la aplicacion de esos codigos y no quiero confundir a los demas con vectores y arreglos. Paciencia, yo lo pongo.


     Add rating 0  Subtract rating 0  
  12. MonikaMDQ en January 26 del 2008

    Hola
    acabo de hacer todo segun tus indicaciones, supongo que quedó bien, pero no entiendo porque el codigo txt que pegué en mi plantilla tiene tu dire : http://www.knxdt.com/
    (me refiero al codigo que dice “Inicio blogroll ……”
    o sea , mi pregunta es ahi no debería ir mi blog en vez del tuyo?
    perdon mi tremenda ignorancia en el tema.
    gracias y espero tu respuesta


     Add rating 0  Subtract rating 0  
  13. MonikaMDQ en January 26 del 2008

    Despues que mandé el comentario entendí que seria por eso pero no quise borrar el comentario.

    Tenés razón no es bonito que otro se copie algo que vos hiciste y te llevó tu tiempo para que ese otro presuma haberlo hecho él.

    Gracias por tu ayuda, te seguiré leyendo.
    Muy bueno tu blog.
    besos


     Add rating 0  Subtract rating 0  
  14. KnxDT en January 26 del 2008

    ;) Placer que me causas. Besos para usted también señorita jurado.


     Add rating 0  Subtract rating 0  
  15. MonikaMDQ en January 26 del 2008

    ahajaja…gracias, pensé que no habías leido/visto mi post del slip open xD
    De hecho, no se como mover tu comentario a otro post (para que no quede ahi en el del slip, porq no tiene nada que ver jaja) pero creo q eso en blogger no se puede hacer…¿?
    besos


     Add rating 0  Subtract rating 0  
  16. KnxDT en January 26 del 2008

    No, no se puede :D . Al menos no me he puesto a meterle mano al código para intentar hacerlo, sin embargo puedes borrarlo.

    El comentario era simplemente informativo. ;)


     Add rating 0  Subtract rating 0  
  17. MonikaMDQ en January 26 del 2008

    Vale, vale…
    Entonces con tu permiso (y el mio xD) lo borraré.
    De todas formas 1: ya queda el link a tu web ( en mis bookmarks) para todos mis lectores, que es incluso mejor que si estuvieras en mi blogroll y lo has de saber
    De todas formas 2: te agregaré a mi blogroll
    MuchasSsssssss gracias por tu buena onda!
    besos again


     Add rating 0  Subtract rating 0  
  18. KnxDT en January 26 del 2008

    Jajaja xD. Adelante entonces chica, tienes mi bendición.

    Gracias por las consideraciones. Ya pronto estaré trabajando en una sección que agrupe todos los tags de ayuda Blogger para los que usen el CMS de Google.


     Add rating 0  Subtract rating 0  
  19. KnxDT en January 26 del 2008

    No hay de qué apenarse. Sólo sigue las indicaciones :) . Ese código luego de donde dice “Inicio Blogroll” al igual que otras líneas similares están en modo “comentario”, es decir, forman parte del código pero no se ejecutan. Son comentarios en HTML.

    Un ejemplo de un comentario sería éste:

    <!- - Esta línea es un comentario - ->

    Otro ejemplo:

    <!–=== Esta línea es otro comentario === –>

    En realidad los comentarios en HTML son todos los códigos que se inician con <!– y terminan en –>.

    He puesto la dirección de mi web al inicio porque hay otros lugares que luego me copian el código o enlazan ese texto y dicen haber sido ellos los creadores … y me tomó algunos minutos hacerlo :D .


     Add rating 0  Subtract rating 0  
  20. Pedro en February 25 del 2008

    Hola, Tengo Una Pregunta Sobre Esto Del Bookmark, Me descargue una plantilla y trae uno por defecto que se pone en cada una de las entradas, como lo puedo quitar y poner mi bookmark??


     Add rating 0  Subtract rating 0  
  21. KnxDT en February 25 del 2008

    Mmmmm, si me dieras más datos te podría ayudar, por ejemplo: ¿Plantilla de Blogger o Wordpress?¿de donde descargaste la plantilla? Es que necesito ver el codigo xml.

    Saludos ;)


     Add rating 0  Subtract rating 0  
  22. Facebook en February 27 del 2008

    Siento no hacer publicidad a nadie, pero he quitado el botón al blog. A cambio lo he puesto como comentario. Además, he anadido el botón Facebook. Si quereis podeis añadirlo.


     Add rating 0  Subtract rating 0  
  23. El que postea en March 7 del 2008

    Muy util, pero prefiero sin el efecto “pushbutton”.
    Saludos a todos los bloggers!


     Add rating 0  Subtract rating 0  
  24. KnxDT en March 7 del 2008

    Si lo quieres sin el efecto pushbutton y no quieres complicarte la vida editando todos los códigos del enlace que dí, entonces solo pon este código en lugar del que di:

    .pushbutton a:hover{
    outline:none;
    }


     Add rating 0  Subtract rating 0  
  25. El que postea en March 7 del 2008

    Ok, muchas gracias!


     Add rating 0  Subtract rating 0  
  26. elerre en March 23 del 2008

    hago todo como lo marcas pero me sale el siguiente error

    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: The string “–” is not permitted within comments.

    que ha pasado… si desea ayudarme, favor de postear aqui o al mail elrogerochoa@gmail.com


     Add rating 0  Subtract rating 0  
  27. KnxDT en March 23 del 2008

    Lo que te está marcando es un error del XML que no tiene nada que ver con el código HTML que estoy poniendo allí, asegúrate de estar poniendo la sección de estilos donde corresponde y/o en su defecto deshaz todos los cambios y sin agregar nada “intenta” guardar la plantilla.

    Hace casi un mes Buzz está teniendo problemas con Blogger al intentar “mejorar” algunas funciones está dañando la sintaxis que tenia y está generando variedad de errores.


     Add rating 0  Subtract rating 0  
  28. elerre en March 23 del 2008

    :up: graciassss por su ayuda…

    ya he colocado bookmark’s, el unico detalle que me falta es darle el efecto de boton a la imagen

    gracias


     Add rating 0  Subtract rating 0  
  29. KnxDT en March 23 del 2008

    Para lo del efecto botón es solo cuestión de agregarle el código CSS :roll:


     Add rating 0  Subtract rating 0  
  30. José en June 15 del 2008

    en mi blog queda el blogroll muy lejos del post… como puedo hacer que quede mejor?


     Add rating 0  Subtract rating 0  
  31. adrix en June 16 del 2008

    muy bueno esto lo de las bookmarks
    funciona perfecto , gracias
    pero realmente la gente los utiliza?

    muy buena la señal de los thundercats, que recuerdos!
    saludos


     Add rating 0  Subtract rating 0  
  32. Gika en June 18 del 2008

    Disculpa pero… soy novata en esto, y ya me ha pasado en alguna otra ocasión, cuando queria insertar algún otro componente… en mi plantilla no aparece eso de

    p class=’post-footer-line post-footer-line-3′/>

    es posible?? y en ese caso… después de que pongo el otro trozo de código?

    Gracias


     Add rating 0  Subtract rating 0  
  33. KnxDT en June 18 del 2008

    Las comillas que pones están mal, deben ser ‘ no ’ en todo caso busca post-footer-line post-footer-line-3.

    Si aún asi no lo encontraras prueba con post-footer-line post-footer-line-2 o post-footer-line post-footer-line-1.

    Saludos ;)


     Add rating 0  Subtract rating 0  
  34. Brunetto en July 31 del 2008

    Hola KnxDt!
    Queria decirte que a mi los botones me salen muy separados, puede que sea tema de la plantilla mia pero… bue no se :S :roll:


     Add rating 0  Subtract rating 0  
  35. Marín en September 29 del 2008

    Lo implementare pronto saludos!


     Add rating 0  Subtract rating 0  
  36. jonathan en October 2 del 2008

    hola e estado buscando esta linea y por mas que la busco no la encuentro

    la verdad que aun asi encontre lo siguiente

    y beuno lo pegue por hay; pero aun asi nome sale; disculpa que moleste pero la verdad no se en que herre… gracias por tu respuesta.


     Add rating 0  Subtract rating 0  
  37. nakho en November 6 del 2008

    ya lo puse y funciona bien…solo tuve que cambiar la imagen de enchilame por que estaba roto el link.
    me gustaria que me ayudes a colocar el texto que dice “compartelo” ya que a mi no me quedo muy bien… y lo mas importante me gustaria saber como hacer para que la barra aparezca solo cuando abris una entrada y no en la pagina principal…
    muy buena la pagina,…
    saludos


     Add rating 0  Subtract rating 0  
  38. Como agregar un Bookmarks en blogger | Todo sobre informatica en November 13 del 2008

    [...] recomiendo hacer una copia de seguridad haciendo click en descargar plantilla completa. Ahora sigan este tutoríal que explica que comandos y donde [...]


     Add rating 0  Subtract rating 0  
  39. Alfredo en December 10 del 2008

    En mi blog cuando voy al código HTML no me aparece nada sobre postfooter line 3 o algo así, aparece otra clase de variable en vez de la p que tú mencionas en la explicación, sino me equivoco aparece div en la mía.


     Add rating 0  Subtract rating 0  
  40. KnxDT en December 10 del 2008

    Ese código es para las plantillas originales de Blogger, las que no puede que no la tengan, ya que el diseñador de la plantilla es el que decide o no ponerlas.

    Saludos.


     Add rating 0  Subtract rating 0  
  41. Camila en January 18 del 2009

    :up: :up: :up: :up: :up: Te adoroooo! Que te puedo decir? me pase todo el dia tratando de agregar los malditos botones y podia y tu me ayudaste mucho! muchas gracias :lol:


     Add rating 0  Subtract rating 0  
  42. Como agregar un Bookmarks en blogger | Tecnología e Informática | Noticias | Blog en March 13 del 2009

    [...] recomiendo hacer una copia de seguridad haciendo click en descargar plantilla completa. Ahora sigan este tutoríal que explica que comandos y donde [...]


     Add rating 0  Subtract rating 0  
  43. felena en March 22 del 2009

    como es para que al pasar o poner el mouse encima de alguno del los iconos, se muestre el nombre del sitio ejm.: meneame


     Add rating 0  Subtract rating 0  
  44. CABREADO en April 5 del 2009

    :down: el codigo post-footer-line post-footer-line-3 no esta en mi blog no ay ningun codigo que empieze con “post-footer”…

    Salu2 -1!


     Add rating 0  Subtract rating 0  
  45. Petrorafo en April 29 del 2009

    :?: No existe la línea <p class=… en mi HTML y eso q lo he buscado con el Firefox :!:


     Add rating 0  Subtract rating 0  

Deja tu comentario