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:
Comentarios
45 Comentarios en "Como agregar Bookmarks a tu blog (Blogger)"
Deja tu comentario





Un artículo muy útil que ya he puesto en práctica. ¡Gracias por ello, y enhorabuena por tu blog!
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
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:”
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!
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!!???
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
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.
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.
Vaya muchas gracias,ha sido muy sencillo.
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.
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.
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
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
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
No, no se puede
. Al menos no me he puesto a meterle mano al código para intentar hacerlo, sin embargo puedes borrarlo.
El comentario era simplemente informativo.
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
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.
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
.
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??
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
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.
Muy util, pero prefiero sin el efecto “pushbutton”.
Saludos a todos los bloggers!
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;
}
Ok, muchas gracias!
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
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.
ya he colocado bookmark’s, el unico detalle que me falta es darle el efecto de boton a la imagen
gracias
Para lo del efecto botón es solo cuestión de agregarle el código CSS
en mi blog queda el blogroll muy lejos del post… como puedo hacer que quede mejor?
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
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
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
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
Lo implementare pronto saludos!
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.
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
[...] recomiendo hacer una copia de seguridad haciendo click en descargar plantilla completa. Ahora sigan este tutoríal que explica que comandos y donde [...]
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.
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.
[...] recomiendo hacer una copia de seguridad haciendo click en descargar plantilla completa. Ahora sigan este tutoríal que explica que comandos y donde [...]
como es para que al pasar o poner el mouse encima de alguno del los iconos, se muestre el nombre del sitio ejm.: meneame
Salu2 -1!