Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.
Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.
Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.
Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.
Lo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>Ahora antes de ]]></b:skin> pegamos los estilos de la barra:
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
#botonesflotantes {Por último, debajo de <div class='post-header'> agrega el siguiente código:
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}
<b:if cond='data:blog.pageType == "item"'>Si quieres que los botones estén al final de la entrada entonces el código anterior pégalo antes o después de <div class='post-footer'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>
<!-- Botón de Facebook -->
<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>
<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>
<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>
<!-- Botón de Bitácoras -->
<li><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='votar' expr:src='"http://widgets.bitacoras.com/votar/mini/" + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>
<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>
</ul>
</div>
</div>
</b:if>
Verás que en el primer código aparece en color verde el ancho de la barra, y también aparece en los estilos, si cambias el tamaño deberás hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla más angosta, de lo contrario algunos botones se bajarán. En caso de que decidas hacerla más angosta entonces quizá sea necesario eliminar algún botón.
En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.
Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.
En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.
Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.
Hola Potro!! Hacia mucho que no me daba una vuelta por tu blog. Muy bueno este post, lo voy a probar en mi blog. Saludos!
ResponderEliminarQué gusto verte de nuevo por estos lares :)
Eliminarque combinacion se usa para encontrar una palabra dentro de la plantilla o para activar el buscador de palabras en la plantilla ayudame potro gracias
EliminarSi usas Windows es CTRL + F, si usas Mac es CMD + F
EliminarEste comentario ha sido eliminado por un administrador del blog.
EliminarTuve que eliminar el comentario por el aviso que está al final de la página :(
EliminarSaludos.
Hola amigo potro, Bueno, de nuevo, Yo, Freddy,
ResponderEliminar¡Guau!
Está Bonito, ¡Ya lo voy a poner!
¡Gracias Amigo Potro!
¡Saludos!
Por nada Freddy, que todo salga bien.
EliminarUn abrazo.
SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! Es justo lo que quería, lo estaba buscando hace un montón SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!!
ResponderEliminarMe alegra tu entusiasmo :)
EliminarGracias Potro, muy buena idea
ResponderEliminarJeje en Way2bloggin publicaron hoy lo mismo
ResponderEliminarParece que nos pusimos de acuerdo :D
EliminarImpresionante entrada, sin duda la mejor en varias semanas
ResponderEliminarGracias Potro, Un saludo. :D
Gracias Valentin, me alegro que sea de tu agrado, ojalá y también les pueda ser útil.
EliminarSaludos.
¡Quedó perfecto en mi blog! Muchas gracias por todo Potro, es genial.
ResponderEliminarGenial PukitChan, gracias por confirmar que todo ha salido bien. Saludos.
EliminarHola... Saludos desde P.R. Entre a tu pagina PukitChan pero no me salio para verlo en su acción... Me podrías decir donde lo instalaste para yo instalarlo igual... Me encanta la idea... Gracias...
Eliminarhola potro quisiera que me digeras como quitar el boton de like de mis entradas, es el boton que aparese debajito del titulo de la entrada pues lo quiero quitar porque ya puse este y este me gusta mas que el otro. pero solo el que esta debajo del titulo los botones flotantes de la izquierda tambien me agradan :D
ResponderEliminarmuchas gracias potro
Hola Augusto, mira el código que pertenece al botón de Facebook, ese código búscalo en tu plantilla y elimínalo. Debe estar cerca de donde has puesto estos botones.
EliminarHola Potro,ya con esta es la segunda vez que paso hoy,te deje un comentario,en la entrada del código del banner para que enlazen el blog..:-)
EliminarTengo una duda...que tantos videos puede soportar un Blog de Blogger? Eso trae algún problema?
Quiero saber porque los otros dos que tengo son de música.
La misma pregunta igual con la cantidad de imágenes que soporta un Blog.
Esto de esta entrada me gusta .
Eres el mejor! Dank.
ok potro intentare gracias por la ayuda. aunque si me pudieras para el post de donde saque el boton me seria mas util :D
Eliminargracias
Hola JFBluePlanet, nunca he sabido de alguna limitante en cuanto a los videos. En imágenes tienes un espacio de 1GB
EliminarSaludos.
Simplemente genial, pero me gustaría hacerlo con los botones sociales de mi blog, me ayudas???
ResponderEliminarNo sé cuáles sean los botones de tu blog, pero sólo es cuestión de agregar antes de </ul> el código de cada botón, cada uno encerrado entre <li> y </li>
EliminarExcelente tu Post, Felicidades men!
ResponderEliminarOyes sabes como poner publicidad superior con opcion cerrar como la de Bitacoras.com?
Click para ver ejemplo
Quizá con una caja de aviso como esta:
Eliminarhttp://ciudadblogger.com/2011/09/caja-de-aviso-para-el-blog-con-opcion.html
Hola Potro.
ResponderEliminarMuy curioso lo de los botones ;)
Saludos.
Curioso pero útil sobre todo :)
EliminarQué interesante! Quizás lo ponga en práctica :)
ResponderEliminarse ve bueno...pero porque la de facebook no lo pones como boton para cuando le des like salga un cuadro de comentar,ese seria mucho mejor que solo darle like!!
ResponderEliminarel boton de facebbok seria mejor si le pusieras cuandoi al darle like salga el cuadro de comentario y dejar algo ahi,ese seria mucho mejor!!
ResponderEliminarLa base ahí está, ya será de cada quién que le cambie o agregue los códigos que más les gusten o los botones que necesiten.
EliminarComo siempre Potro, SOS EL MEJOR, SOS UN POTRO!.
ResponderEliminarGracias!
Eliminarcomo siempre muchas gracias mi blog esta hecho a base de tu ayuda.
ResponderEliminarGracias a ti por tu visita!
Eliminaryo siempre he querido esta funcion pero en un gadget con un chat, osea
ResponderEliminarel chat sale al final de todos los gadgets del sidebar, y cuando el post sea largo que el gadget baje con el chat y cuando vuelva al tope se quede en el mismo lugar es posible esto?
Después veremos cómo aplicarlo a cualquier gadget del blog. Saludos.
EliminarHola Potro, excelente truco, es bueno volver de nuevo a Internet, excelente truco.
ResponderEliminarTambién es bueno verte de nuevo por aquí, que estés bien :)
EliminarAmigo, excelentes recursos para Blogger, pero tengo una pregunta, de pronto sabe como hago para implementarlo en Joomla.
ResponderEliminarNunca he usado esa plataforma así que no podría decirte cuál es el procedimiento ahí.
Eliminarahora ya moderan los comentarios??
ResponderEliminarDesde abril se están moderando ;)
EliminarHola potro ! Se que no es de esta entrada pero me dirías como poner unos botones de reacción, por ejemplo en este blog http://sintonialiteraria.blogspot.com abajo de cada entrada está el botón de que te hablo, espero tus respuesta, Gracias
ResponderEliminarHaz click en el elemento Entradas del blog, ahí puedes activar el gadget de Reacciones.
EliminarPotro, en mi blog no funciona.. ojala me puedas ayudar.. Gracias!
ResponderEliminarQuizá es porque tienes ya la última versión de jQuery, así que no es necesario agregarla, además, esa versión la tienes al menos dos veces y sólo debe estar una vez:
Eliminarhttp://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html
Ya elimine las versiones repetidas que tenia y aún así no funciona.. lastmia me había encantado el truco.
EliminarDe igual forma, gracias y un saludo
Es una lástima, aun así, si después te animas a intentarlo otra vez déjalo puesto para que pueda darme una idea más clara de qué pueda estar pasando.
EliminarSaludos :)
Genial Potro, deje todo en la plantilla, cuando tengas tiempo le hechas un ojo :)
EliminarEntiendo que recibes muchas peticiones de ayuda, mi reconocimiento para ti viejo. Muchas gracias :D
Pues ni ayer ni hoy lo veo puesto completo, pero prueba cambiar de lugar el script de jQuery, ponlo después de <head> para que lo lea antes que los plugins.
EliminarExcelso, justo pasaba por acá a buscar esos botones, CB es como una botica, hay de todo y para todos :D
ResponderEliminarUn abrazo Potro!
Gracias Marcelo, siempre tan amable :)
Eliminar¡Hey Potro! ¿No existe algún lugar como CiudadBlogger pero para Tumblr que me puedas recomendar? Gracias :)
ResponderEliminarNi idea Erick, una vez abrí una cuenta en Tumblr y ese mismo día la dejé de usar, así que no estoy enterado qué tantas páginas estén dedicadas a esa plataforma.
EliminarHey Saludos #Potro.. Necesito una ayuda, Tengo un blogger.. peroo Quisiera ponerlo como este "http://www.blazergraph.com/" y Que cuando le de a un Boton... que pondree Reenvie a Mi Pagina de Facebook de "DIseños Graficos" peroo!.. No ENcuentro una Plantilla Asi que solo le ponga una Imagen de Informacion y De Diseños.. y el Boton de Reenviar.. peroo me Encantaria Otro Color no Negro. Para Hacer la Diferencia.. SI puedes contestarme muhcas Gracias..
ResponderEliminarkemilgraph@gmail.com
Hola KemilGraphz, si el blog será sólo como una presentación sin contenido quizá la forma menos complicado es algo como esto:
Eliminarhttp://ciudadblogger.com/2011/11/poner-en-el-blog-aviso-en-construccion.html
Ahí podrías poner la info que deseas y el botón.
buenas Potro muy buenos post, te pido ayuda sobre una duda en mi blog, quiero eliminar el fondo de la cabezera y el fondo de la atribución sin tener que eliminar los fondos de los gadgets, me puedes decir como hacerlo? Si quieres te dejo un correo para que me expliques. Te dejo la url del blog: http://lacajadance.blogspot.com.es/
ResponderEliminarAgrega en el CSS lo siguientes estilos:
Eliminar.footer-fauxborder-left, .header-outer {background:none !important;}
Saludos.
Muchas gracias por todo :) Eres de lo mejor :)
Eliminarhttp://naricarts.blogspot.com/
ResponderEliminarhaber que te parese
gracias potro era lo ideal que necesitaba hermano siempre me salva de una!!
ResponderEliminaroye potro no habra uno como este aparece luego luego a entrar http://i.imgur.com/JwKPl.png
ResponderEliminarDesde hace unas semanas iba a publicar un script similar (más completo que el de la imagen) pero es de pago, por esa razón ya no lo pude publicar :/
EliminarPERO NO HAY OTRO MAS PARECIDO QUE AIGAS SUBIDO ES QUE ASI ES MAS FACIL CONSEGUIR LIKESS
EliminarQue yo tenga no, no conozco alguno parecido.
EliminarHola potro me gustaria saber si me puedes responder una pequeña duda lo que pasa es que en mi blog tengo incluida la opcion de "responder" los comentarios pero al picarle responder simplemente no pasa nada como si no estuviera activado o algo asi mi plantilla es personalizada osea no por defecto de blogger alguna soluccion que tengas mi amigo?
ResponderEliminarHola Redzer HD, mira esta entrada de Karla, quizá lo que ella propone pueda ayudarte:
Eliminarhttp://www.compartidisimo.com/2012/02/no-funciona-el-enlace-de-responder-de.html
Potro sabia que no me desepcionarias , muchas gracias ya solucione el problema , siempre sigo tu blg increibles tutoriales que haces Gracias
EliminarCuando le doy un clic en "Me gusta" no la registra y sigue marcando 0, ¿a qué crees que se deba? aquí te dejo el sitio, está en construcción:
ResponderEliminarhttp://kryptog.blogspot.mx/2012/06/google-senala-que-han-crecido-las.html
Saludos, buena página!.
A ciencia cierta no sé, pero puedes probar poner un script que evite la redirección, tal vez algo de eso tenga que ver:
Eliminarhttp://www.oloblogger.com/2012/03/redireccion-de-dominios-por-paises.html
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarde lo mas grande que e visto hasta la fecha potrillo :D my heroe
ResponderEliminarHolas tanto tiempo je~... Grande como siempre Potro, me llevo los botones para mi blog ;)
ResponderEliminarSaludos~
Hola.
ResponderEliminarNo sabia como ponerme en contacto con vosotros, así que aquí estoy.
Tengo una duda sobre un antiguo tutorial: http://ciudadblogger.com/2011/07/quitar-el-leer-mas-automatico-en-las.html
Cuando dices que tengo que eliminar algo... ¿que tengo que eliminar en concreto? y después tan solo tengo que poner "" ¿y ya?
Gracias y siento si esto por aquí no se puede postear.
Hola Luis, deja la pregunta en esa entrada, aun cuando sea antigua se siguen respondiendo los comentarios en cada una de ellas.
EliminarSaludos.
hola potro, tengo un problemita, mira este es mi blog, tiene plantilla nueva, triple "w" frasesimagenes(punto)com, varias cosas sobre esta plantilla, quiciera cambiar, la primera, es que no se como se puede dar "todas las entradas tienen comentarios" ya que parece ser que sólo las nueva sme habilita la cajita de comentarios, y eso es un problema,después no me aparecen los botones de redes sociales debajo del títlo de entrada, y además quiciera quitar el gadget principal y ponerlo abajo de los post, gracias potro
ResponderEliminarHola Álvaro, he entrado a tu blog pero he visto que sólo tienes habilitados los comentarios de Facebook, por lo tanto ninguna opción de los comentarios de Blogger servirá ya que es un sistema independiente.
EliminarEn cuanto a lo de los botones, ¿cuáles son los botones que has puesto y no te aparecen?
Del gadget, ¿te refieres al slider de arriba? Si es así entonces tendrías que quitar con mucho cuidado desde <div id='content-slider'> hasta donde termine todo el código del slider, luego ubicarlo donde desees, por ejemplo debajo de:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
hola potro, gracias por tu respuesta, mi blog sólo tiene comentarios facebook en vez del codigo de blogger, pero usa el código de comentarios de blogger, para que se deslice la caja de comentarios (facebook) el tema es que hay muchísimos post, que tienen esa opción anulada, y sólo manualmente la puedo activar (una por una) me preguntaba si hay forma de hacerlo en bloque, por otra parte, los botones que he pusto son los de esta entrada tuya, y no salen díme porque??
EliminarEstimado, he podido quitar el gadget prinicpal(el de arriba) y cuando lo pego en donde tu me aconsejás, me salta un error con un código, díme que puedo hacer?
EliminarHola de nuevo Álvaro. Cuando redactes tus entradas selecciona la opción de habilitar los comentarios, pero sí tendrás que hacerlo manualmente me temo.
EliminarEn cuanto a este código, habría que ver cuál error te salta, lo más probable es que el código no esté bien colocado, o que al ponerlo hayas eliminado por error algún otro.
Saludos.
estimado, gracias por tus prontas respuestas, hace años que te sigo, y he aprendido mucho, pero me está doliendo mucho la cabeza intentando agregar los botones de compartir facebook, twitter, google+, pinecest, (o algo así, jeje) sé que es un tema del blog, creo que algún ccnflicto con las librerias jquery y la otra espartacus o algo de eso, yo no entiendo tanto como vos, pero leí algunos post tuyos, díme como puedo solucionar el tema de los botones de compartir al inicio del post???
EliminarTendría que ver puestos los botones Álvaro, pero lo que sí veo, es que en tu plantilla el último código tendrás ponerlo arriba o debajo de:
Eliminar<div class='post-entry-body'>
Buen fin de semana!
Estimado, muchísimas gracias por fin he logrado instalarlos en esta plantilla, te felicito como siempre sos el mejor y de gran ayuda para todos los bloggers, ahora tengo otra consulta, he instalado una plantilla nueva en otro sitio, el tema es que me encanta la plantilla pero es para ver videos de youtube, yo la quiero para ver imágenes y habría que modificarle algunas cositas, te dejo el link, y tu me dices como hago, (yo ya le quité algunas de las cosa que supuse podrían no servir, pero no pude avanzar más de como está.) LINK: (3w)facebookmuro(punto)com/
EliminarDime cómo hacer para que las imágenes se vean tanto en la página principal, como en las entradas, gracias !!
No conozco esa plantilla, pero también he entrado y no veo nada en las entradas :/
Eliminarbueno muchas gracias potro tratare de buscar otra plantilla entonces.
EliminarHola potro como andas? todo bien?
ResponderEliminarHay forma de hacer esto con un gadget? por ejemplo tu gadget de "archivo del blog" que vaya bajando a medida que la pagina va bajando??
o es muy complicado?
Hola Lucas, sí se puede, sólo agrega el primer código, luego donde dice #botonesflotantes cámbialo por el ID del gadget al que se lo quieres hacer, por ejemplo, si fuera para el gadget de Archivo entonces sería #BlogArchive1
EliminarFunciona!!! muchisimas gracias :)
EliminarYa lo he incorporado a mis blogs sin problemas, gracia a que lo has explicado muy bien. Muchas gracias por toda la ayuda que nos prestas y por tus explicaciones sencillas y entendibles.
ResponderEliminarGracias a ti por tu amable comentario, saludos!
EliminarGracias EL Potro, por hacer un tutorial de lo que te pedí ;)
ResponderEliminarAhora haré unos cuantos clics en tu publicidad :D
Por nada Josep-Pepe :)
EliminarHola potro primero enorabuena por este post esta muy bien y aora tengo dos dudas y no se donde ponerlas te las dejo aqui:
ResponderEliminar1:Mi primera dudas es si me podrias recomendar algun gadget que aga mas interactivo mi blog y con el gane mas visitas cada dia y tambien que la gente pinche mas en mis anuncios xD
2: y la segunda es sobre mis anuncios hay algo que se pueda hacer para que los cuadrados donde salen mis anuncion no quede hay ese borde que sobre del cuadrado no se si me explico bien pero es que si eligo el anuncio mas grande que cabe en un cuadrado de ese me sobre siempre un cachito y quereria saber si se puede poner los anuncios de los tamaños que yo quiera sin ser los que me da blooger o se puede reducir esos cuadras
Gracias
No hay gadgets mágicos, para tener más visitas el contenido de tu blog debe gustar, ahí no hay gadget que pueda interferir :)
EliminarLo de los anuncios no, no hay tamaños personalizados. En la página de AdSense puedes crear los anuncios según las medidas que ofrecen, pero no hay alguno al que se le pueda meter las medidas que uno quiera :/
Saludos.
Hola Potro, mira no se si me podrias brindar tu ayuda... He seguido todos los pasos pero no me sale nada!!!! =/ ayudame porfa
ResponderEliminarMe encantaría ayudarte pero sino me dices en cuál blog lo has puesto no puedo hacerlo :(
Eliminarhola amigo, fíjate que he hecho todo tal y como dices y no me a tirado nada sigue como si nada.
ResponderEliminarHola Steven Nuñez, necesitaría verlo puesto todo en tu blog para saber porqué no se ve.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola Renato, he tenido que eliminar el comentario por el aviso que está al final de la página.
EliminarNo vi que tuvieras puesto los botones así que no pude ver cómo es que te aparecía el resultado.
Saludos.
Hola Potro deseo contactarme contigo para comprarte un enlace en tu blog, mi correo es gerardoarambulo@gmail.com, muchas gracias ;).
ResponderEliminarHola Gerardo™, por el momento no hay venta de espacios publicitarios abiertos a todo el público, si más adelante se habilitan aparecerá el banner indicándolo :)
EliminarSaludos y gracias por tu interés.
oye potro hoy que dropbox eliminara la carpeta publica apartir del 1 de julio, tu sabes de algun hostin donde pueda guardar los swf y los script?
ResponderEliminarHola Neomontoya, en la página de Dropbox así como en sus distintas redes sociales no hay ningún comunicado que afirme lo que mencionas, así que no debes preocuparte.
EliminarSaludos.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEs lo malo de cuando se usan plantillas muy personalizadas, que los códigos no coinciden con los tutoriales que encuentras por la red.
EliminarEn tu caso quizá debas poner el último código debajo de <div class='article-meta-autor'>
Gracias potro! ahi si me sirvio y se ven bastante bien...gracias!
EliminarHola Potro, como no es difícil notarlo soy nuevo en el tema de modificar los códigos, excelentes tus entradas y antes que nada un súper agradecimiento.
ResponderEliminarTengo un par de preguntas (si se puede y no es mucho pedir) respecto a esta entrada:
1. ¿se podría incluir esta barra de botones en el encabezado del blog?
2. ¿se podría dejar siempre visible el encabezado del blog? (Título, descripción, pestañas y en dado caso esta barra)
Gracias de antemano por la respuesta
Hola Excel Colombia, se puede poner en cualquier lado, pero no en cualquier lado funcionará para compartir las entradas del blog. Para que éstos botones sean capaces de leer los datos d ela entrada como el título, enlace, etc. es necesario que estén dentro del área de las entradas.
EliminarSaludos.
Hola, Potro. Me gustaría que no quedase tanto espacio entre el título de la entrada y los botones. ¿Qué debo modificar?
ResponderEliminarHola Fran, quita el clear:both; que está en el último código.
EliminarComo podría hacer que un menú muestre el mismo efecto que estos botones, osea que se detiene y flota al bajar la página?
ResponderEliminarMira el comentario #37.1
EliminarHola EL Potro, lo he probado con la Pagelist y no me funciona:
Eliminarhttp://grupoblogin3.blogspot.com
Si a los otros scripts les has aplicado el parche del noConflict también aplícaselo a este.
EliminarAhora baja pero hay dos problemas:
Eliminar1. Que cuando baja los otros gadgets no se sobrepongan
2. Que cuando subas otra vez hacia arriba se ponga el menú de páginas donde estaba originalmente, no como ahora que se pone más abajo.
Saludos
Guiate con los códigos de esta entrada, si es necesario agrega estilos como los de aquí pero con el ID de tu gadget y con las medidas que tiene. Juega con los distintos valores hasta que quede como deseas.
EliminarSaludos.
Potro, qué gusto visitarte y encontrar siempre información nueva y útil, un abrazo desde Guatemala.
ResponderEliminarEl gusto es mío Edwin, un saludo.
EliminarHola Potro otra pesada atascada. Lo he puesto en mi blog y me gusta como queda, pero... ¿cómo puedo bajar un poco todo porque me tapa el año de la fecha que tengo tipo calendario? ¿cómo puedo poner los botones para que se vean centrados y no a la izquierda? ¿cómo separar el botón de FB y Twitt. para que la distancia sea la misma que los otros?
ResponderEliminarGracias como siempre. Un abrazo:)
Hola m.p.moreno, mira las anotaciones de los estilos, ahí dice cómo moverlo desde la izquierda en caso de que lo quieras mover más al centro.
EliminarNo hay ninguna distancia estipulada entre los botones, la distancia que ves de cada uno es el ancho de cada botón, desgraciadamente cada botón tiene un ancho distinto, y el de Twitter especialmente suele ser el mayor de todos, así que eso depende de los botones en sí.
Lo primero que preguntas no pude verlo en tu blog, pero en la entrada se menciona dónde modificar en caso de que la parte del contenido de la entrada se encime.
Saludos.
potro el botón de facebook se me desapareció igual veo que paso en este post :(
ResponderEliminarme toco quitarlo :(
que paso?
Yo los sigo viendo sin problema. Recuerda que los botones los proporcionan servicios externos así que puede ser normal que de vez en cuando no carguen algunos, o no carguen de inmediato, pero al menos ahora aquí mismo yo los veo todos sin ningún problema.
Eliminara y tambien google+ :(
ResponderEliminarVaya, todo mi gozo... me han dejado de funcionar el gadget del traductor y el del archivo del blog, ambos los tenía expandibles ¿qué puedo hacer?
ResponderEliminarUsa un parche en el script de jQuery, ya que no es compatible con Scriptaculous:
Eliminarhttp://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html
la verdad que el potro si que es un potro!
ResponderEliminar¡SOS! Algo grave ha ocurrido en mi plantilla porque han volado casi todas las personalizaciones que había aplicado, incluso esta que me había quedado bien, sólo me faltaban unos toques de CSS. Tengo copia de la plantilla actualizada, pero no sé como ponerla, tampoco quiero hacer más pruebas por mi cuenta, no, ya no.
ResponderEliminarComo siempre esperando tu ayuda. ¡GRACIAS!
Hola m.p.moreno, puede ser que sin querer hayas cambiado de plantilla, o que hayas dado click en "Restablecer plantillas de artilugios". Si tienes una copia sólo súbela como cualquier plantilla, si lo prefieres primero practica en un blog de pruebas.
Eliminarde lujo gracias muy util
ResponderEliminarGracias Potro, está muy bien echo, pero no me funciona el botón de bitacoras.
ResponderEliminar¿A qué te refieres con que no funciona? ¿no aparece o qué sucede? ¿en cuál blog lo has puesto?
EliminarPrimero no funcionaba, pero ahora no aparece ya ha echo algunos estragos en el blog. (Como que no vaya el silder). Lo he puesto en http://www.vvalcoi.com/
EliminarVeo los dos primeros códigos pero no el última. Revisa si tienes dos veces la línea que hay que buscar, si es así entonces pon el código en la otra, en la que no la has puesto.
EliminarEl código está en la única línea que hay. Sigue sin funcionar. ¿Crees que el problema con el silder se debe a esto? ¿son ambas cosas incompatibles?
EliminarNo, es por la plantilla que usas. Pon el último código arriba de:
Eliminar<div class='postmeta-primary'>
Gracias, la barra ya se ve. Pero el silder sigue igual
EliminarQuizá porque tienes dos versiones de jQuery y debes tener sólo una. Deja sólo esta línea:
Eliminar<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Después de:
<head>
Era eso, pero ahora los botones no bajan.
EliminarQuizá es por otros scripts que tienes de jQuery, veo que tienes varios ahí, no sé si ocupas todos, pero quizá es por eso. O tal vez necesitas aplicarle también a este script el parche de noConflict:
Eliminarhttp://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html
Igual, no se aprecia ningún cambio.
EliminarHe pensado que como cada día le veo más problemas. Voy a quitar esos botones y a colocar unos diferentes. Gracias por tu ayuda.
EliminarEntonces debe ser que no es compatible con los demás scripts que tienes.
EliminarVale, es "lo malo" de cuando se usan muchos scripts en la plantilla, aun así siempre se podrán poner botones normales que no requieran nada de esto.
EliminarLo que estaba buscando! GRACIAS. No se casi nada de códigos pero con tus explicaciones lo hago a la perfección. Gracias nuevamente.
ResponderEliminarPor nada :)
EliminarPodrías hacer una entrada sobre esto: http://www.codigos-qr.com/2011/12/03/qr-tooltips-for-jquery/
ResponderEliminarNo te lo aseguro, nunca he usado ese script.
EliminarHola potro que tal, otra vez molestando, sabrás la razón por la que no me suma los me gusta de facebook?, había puesto el botón tipo taringa y me había gustado, pero no me sumaba los me gusta, pensé que lo había hecho mal y lo quite y puse este para ver si lo lograba, pero me paso lo mismo, hay uan razón técnica o me equivoque.
ResponderEliminareste es mi blog
http://5ppythaim.blogspot.com/
Parece que anda fallando el botón, hace un par de días un usuario reportaba un problema igual y de pronto sin hacer nada le han aparecido de nuevo todos los likes. Debe ser problema de Facebook quizás.
EliminarHola Potro!, yo he intentado poner el código de facebook en la sidebar, pero no me funciona, no estoy seguro pero tiene que ver estos caracteres '". he intentado cambiarios por las " pero sigue sin funcionar.
ResponderEliminarGracias!
Hola Peter, ¿te refieres a estos botones?
EliminarCualquier botón que sea para compartir entradas deben estar colocados dentro del área de las entradas, de otra forma no podrían leer los datos como el título, enlace, resumen, etc.
Hola Potro! Hace tiempo leo tu blog y tus tutoriales son geniales, desde ya muchs gracais por todo tu esfuerzo!
ResponderEliminarAhora bien, tengo una duda con respectoa estos botones deslizantes, hay forma de ponerlos verticales y a un costado del blog? O sea, en este ejemplo aparecen horizontales y se desplazan hacia arriba a medida que bajamos el scroll, pero seria posible poner esta barra o alguna otra a la izquiera por ejemplo, y que esté vertical (parada) ??
Hola CyberPunker, más adelante haré una entrada sobre ello, con el mismo efecto pero los botones en vertical fuera de la entrada ;)
EliminarEste comentario ha sido eliminado por el autor.
EliminarAh ok, entonces es problema de facebook, gracias potro, pensé que la había regado otra vez... gracias!!!
ResponderEliminarEso me supongo yo porque de otra manera no me explico porqué algunas veces funciona y otras no :/
EliminarPerdona las molestias, pero como se conseguiría que hubiese menos espacio entre los botones? Gracias
ResponderEliminarSalu2
Hola Valentín, como mencionaba en otro comentario más arriba, no hay ninguna distancia estipulada entre los botones, la distancia que ves de cada uno es el ancho de cada botón, desgraciadamente cada botón tiene un ancho distinto, y el de Twitter especialmente suele ser el mayor de todos, así que eso depende de los botones en sí.
EliminarY si no fuera una lista... si no una tabla... y el codigo fuera este:
ResponderEliminar<div id="header-links">
<table>
<tr>
<td>Feed</td>
<td>SiteMap</td>
<td>Contacto</td>
<td>Acerca De</td>
</tr>
</table>
</div>
y los estilos estos:
#header-links table {
background-color:#444;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
position:fixed;
height:38px;
width:auto;
margin:15px 0 0 460px;
z-index:99;
}
#header-links td {
color:#F0F0F0;
font-family:"Century Gothic";
font-size:16px;
padding:0 5px 0 5px;
}
Cual seria el javascript????
MUCHAS GRACIAS...
El script es el mismo, lo único que cambiaría sería donde dice #botonesflotantes por #header-links
EliminarA que se debe que al darle Like en el boton aparece error :(, puedes entrar y verificar ya que recién lo puse, Saludos!
ResponderEliminarNo me ha dado error, pero me pide confirmar el "like", si le das click en Confirmar aparece el like de forma normal.
EliminarBuenos dias Potro, mira puse el codigo correcto pero no me sale, ojala me puedas ayuda, mi blog es: http://eagol.blogspot.com/
ResponderEliminarNo conozco esa plantilla Harrys pero prueba poner el último código entre </header> y <section>
EliminarPrimero Potro, muchas gracias!, estan muy buenos estos botones, me funcionaron muy bien pero me quedo un error pequeño, creo solucionable, no me quedaron ordenados como tu muestra, si no que uno quedo mas cercano que otro e incluso alguno mas separado, no centradito como a ti te quedaron.
ResponderEliminarTe dejo en enlace para que lo veas http://www.mundomanualidades.info/2012/06/entretenidos-cuadritos-infantiles.html saludos!
Gracias Ignacio, así es como debe verse, quizá sólo tengas que reducir un poco el ancho del contenedor para que al final no quede mucho espacio sobrante.
EliminarSaludos!
Hola El Potro, se podría hacer una cabecera como el de esta web: http://www.eyeos.org/es/
ResponderEliminar?
Saludos
Supongo que sí aunque nunca lo he intentado así que no sabría decirte qué procedimiento seguir :/
EliminarPotro, una pregunta, ¿Que código podría agregar para que la barra se detenga al terminar el post?
ResponderEliminarNi idea Victor, no sé si se pueda.
EliminarHola, he insertado los codigos tal y como se especifica pero los botones no se ven y he leido cada uno de los comentarios intentando cambiar y actualizar jQuery y cambiando levemente los codigos y no funciona, mi plantilla es sencilla. Espero ver si me puedes ayudar o tienes alguna solucion. gracias por adelantado y sino que opcion similar me podrias sugerir.
ResponderEliminarHola CineNews, los botones se ven al ingresar a un post, ¿ya has entrado a uno para verlos?
Eliminar¿Cuál es el nombre del blog donde los has puesto?
si como dije ya intente y de hecho al darle vista previa me da la posibilidad de entrar a los post, y una vez que entro no hay nada, y ya intente arriesgarme dandole guardar pero no me permite guardar me pone fail. gracias por el interes y espero me puedas sugerir. mi blog es http://cinenewscine.blogspot.com
EliminarNo veo puesto el código en el blog, sin estar puesto no puedo saber qué sucede. Si te da error al guardar entonces no está bien colocado.
EliminarHola Potro nuevamente, volví a colocar los codigos en donde se indica y poniendo el ultimo código de los botones debajo de post-header/line 1 o algo asi en lugar de header en mi caso y ya lo pude guardar y se ve perfectamente, ya solo me falta modificar cosas como fondo tamaño etc. gracias por el interés y por el motivar a intertarlo de nuevo. Gracias. espero saludarte otra vez.
EliminarGracias por avisar, me alegro que ya todo esté saliendo bien. Saludos!
EliminarMuchas gracias potro eres un GENIO me funcionó!!! y a ver si te haces fan de mi web!! Sería un Honor
ResponderEliminarGracias Harrys, qué gusto que te haya salido bien. Saludos.
EliminarEsta bueno el post. pero me parece que le falta un botón para compartir (Share) el like suma.. pero tiene mas difusión el share. saludos
ResponderEliminarEl código es completamente personalizable por lo que le puedes quitar o poner los botones que quieras ;)
Eliminaroie potro, cambie de plantilla por lo que dijiste de problemas con muchos scripts, pero resulta que lo puse pero no aparece para nada la barra :(, auqnue solo lo queria para que le dieran like al post.
ResponderEliminarNo veo puesto el código en el blog.
Eliminarhahah, no te digo que no se miraba, lo quite, a que cres que se deba?
EliminarSin verlo puesto no puedo decirte, pueden ser varias cosas, por eso siempre hay que dejarlo puesto, ya sea que se vea mal, o que no se vea.
EliminarHola Potro estoy agradecido por cada uno de tus aportes que son muy buenos y mejoran cada vez mi Blog. En esta oportunidad quería saber porque al insertar los botones me salen fuera del cuadro y no como en el ejemplo que tu muestras. ¿De qué manera puedo arreglarlo? Gracias de antemano.
ResponderEliminarGracias por tu comentario. Me encantaría poder ayudarte pero sin saber en cuál blog lo has puesto me es imposible hacerlo :(
EliminarEs en este blog: http://jreformistas.blogspot.com
ResponderEliminarMi blog es este: http://jreformistas.blogspot.com
ResponderEliminarY disculpa que no hayas podido verlo ya que cambie la plantilla justo ayer pero el problema continua!!!
Agrega debajo de .botonesflotantes { esto:
Eliminarmargin-top: 0px;
¡Saludos!
Muchas Gracias Potro, estoy muy agradecido!!!!
Eliminar:) Sigue siendo lo mejor de lo mejor Ciudad Blogger!!!
Sigue así Potro!!
hola gente seguidora de ciudad blogger y al reconocido amigo POTRO ; tengo una inquietud asi como hay botones flotantes , eh encontrado ...." una caja flotante lateral" que cuando el cursor pasa por encima se abre la caja y aparece x ejemplo un reloj, un contador, hasta un chat, el problema es que el codigo solo funciona CON AQUELLAS PAGINAS JIMDO .. intente ponerlos en el blogger y pues no llegan a funcionar como que le falta algo.. POTRO AMIGO esta ventana emergente nos seria de mucha ayuda que tambien funsionase en blogg te dejo el link :
ResponderEliminarhttp://disemucho.jimdo.com/2012/06/18/caja-flotante-lateral-para-colocar-chat-y-todo-lo-que-imagines/
es sorprendente
Hola, hay un fanbox que tiene el mismo efecto, y claro, que si no quieres poner el fanbox puedes poner algún otro elemento como un chat, o lo que quieras:
Eliminarhttp://ciudadblogger.com/2011/08/el-fanbox-de-facebook-flotante-y-con.html
Hola potro, la verdad siempre le echo un vistazo a CB para ver si puedo implentar algo nuevo a mis blogs...
ResponderEliminarTe tengo una pregunta, ¿se puede hacer un menu con las mismas caracteristicas que esos botones para compartir? en el caso de que se pudiera.
¿Como haria para que aparezca en la parte superior del blog justo encima de la cabecera?
Hola Jon Darian, más adelante veremos un menú como el que buscas, sólo dame algunos días ;)
EliminarSaludos.
Hola, amigo hice todos los pasos pero no sale las barras de facebook.
ResponderEliminarespero que me ayudes.
Me encantaría ayudarte pero no puedo hacerlo sin saber el nombre de tu blog.
Eliminar