Botón Google+1 (PlusOne) en una barra flotante

26 de julio de 2011 117 comentarios ,
Sé que ya muchos están usando el botón Google+1 en el blog para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.

Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.

Como sé que a muchos les puede parecer molesto tener siempre la barra visible, he incluido una cookie (a duras penas lo hice) para que el lector sólo lo vea una vez por semana, aunque por supuesto este tiempo lo puedes configurar a tu gusto.

Empecemos. Primero entra en Diseño | Edición de HTML y pega antes de </head> esto:
<script type='text/javascript'>
//<![CDATA[
// Cookies
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>
Ahora pega antes de ]]></b:skin> estos estilos:
/* Barra Plus One
----------------------------------------------- */
#barraPlus1 {
position:fixed;
bottom:0px;
left:0;
height:24px;
background:#000; /* Color de la barra */
width:100%;
padding:5px;
filter:alpha(opacity=70); /* Transparencia de la barra */
-moz-opacity:0.7; /* Transparencia de la barra */
-khtml-opacity: 0.7; /* Transparencia de la barra */
opacity: 0.7; /* Transparencia de la barra */
z-index:900;
}
#mensajePlus1, #textoPlus1 {
color:#D8D8D8; /* Color del texto */
font-family:Verdana; /* Tipo de fuente */
font-size:16px; /* Tamaño del texto */
vertical-align: middle;
display:table-cell;
}
.botonPlus1 {
display:table-cell;
padding-left:20px;
}
.cerrarTextoPlus1 {display:none !important;}
A continuación busca la etiqueta <body> o esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega este código:
<script type='text/javascript'>
//<![CDATA[
// barra Google +1 (ciudadblogger.com)
function saludoPlus1(plusone) {
var div_ty = document.getElementById("mensajePlus1");
if (plusone.state == "on") {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros.";
} else {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad.";
}
}
//]]>
</script>

<div align='center' id='barraPlus1'>
<span id='textoPlus1'>&#191;Te ha gustado el blog? Qué tal si nos regalas un +1</span>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='mensajePlus1'/><span class='botonPlus1'><g:plusone callback='saludoPlus1' href='http://nombre-de-mi-blog.blogspot.com'/></span>
</div>

<script type='text/javascript'>
//<![CDATA[
var divName = document.getElementById("barraPlus1");
if(!readCookie('cookiePlus1')) {
divName.style.display='block';
createCookie('cookiePlus1', 'cookiePlus1', 7); // Número de días que dejará de verse
}
else {
divName.style.display='none';
}
//]]>
</script>
Ahora vamos a personalizar todo esto. En el segundo código, el de los estilos, está señalado en color verde algunas áreas que se pueden modificar como el color de fondo, tamaño de la letra, etc. Ahí mismo se controla la transparencia que tiene la barra, con un valor más alto se hace menos transparente, con uno más bajo se hace más transparente.

El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.

Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.

El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.


117 comentarios en:

" Botón Google+1 (PlusOne) en una barra flotante "

  1. Muy buen aporte Potro, ya se que es uan petición un tanto dificil.
    Pero es que me ha llamado la atencion lo de crear las cookies, y me gustaria, si tienes tiempo y no te importa que creases un entrada sobre como aplicar lo de las cookies a functions :)
    Saludos,
    Óliver.G

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

    ResponderEliminar
  3. Interesante entrada potro:) yo obte por poner una barra flotante con el boton +1 :) pero disculpa que me salga del tema y mas es una curiosidad, quisiera saber como haces para que te salga asi en Google http://i51.tinypic.com/2iaszkn.jpg porque cuando busco mi blog me sale normal, como una entrada cualquiera, o es necesariamente tener un dominio .com o cualquiera, para que me salga asi como tú, con algunas pestañas, bueno espero que me quites la duda, gracias

    ResponderEliminar
  4. Por cierto la cookie que creastes para la barra del +1 no funciona en google chrome, en el mozilla si me funciona

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

    ResponderEliminar
  6. Excelente Potro me funciono bien gracias ;)

    ResponderEliminar
  7. Hola Óliver.G,

    Elimina las cookies del navegador, es que poco antes después de publicar la entrada tenía la cookie en 1 día, luego lo cambie a 1 minuto, pero si limpias las cookies verás la barra de nuevo.

    Sobre la entrada del tema de las cookies te lo voy a quedar debiendo porque de verdad que soy bruto en ese tema, esta entrada tardé más de una semana en terminarla justo por eso de las cookies.
    Sin embargo Oloman sabe mucho más del tema, ahí tiene una entrada sobre ello, seguro ahí podrás aprender el uso de las cookies.

    Saludos.

    ResponderEliminar
  8. Hola SmiThzhiTo,

    Esos se llaman Enlaces de Sitio, y son agregados por Google, no hay forma de que nosotros podamos ponerlos.
    Google decide qué sitios los deben tener, no importa si es dominio propio o no, básicamente depende de la "relevancia" del sitio en la red y de la antigüedad.
    Pero descuida que seguro con el tiempo podrás tenerlos tú también ;)

    Saludos.

    ResponderEliminar
  9. Gracias a ti por tu visita Leo, saludos!

    ResponderEliminar
  10. Potro como tengo que hacer para dejarla así como tu solo en minutos por favor!

    ResponderEliminar
  11. Excelente! esta muy cool! como siempre innovando en recursos interesantes gracias!

    ResponderEliminar
  12. Hola potro por que no nos muestras como hacer que dure solo unos minutos sin aparecer.

    ResponderEliminar
  13. Leo, Haniel,

    Para que la barra sólo aparezca unos minutos hay que cambiar esta parte del primer código:
    days*24*60*60*1000

    Se sustituye (con mucho cuidado) por esto:
    days*60*1000

    Luego se cambia el 7 en color azul (el último código) por el número de minutos que quieran, yo lo tengo en 1

    Después de hacer eso eliminen las cookies de su navegador, e ingresen de nuevo a su blog para que puedan apreciar los cambios.
    Entren, actualicen la página y no se mostrará, transcurrido el tiempo que eligieron refresquen de nuevo la página y ahí estará otra vez la barra.

    Saludos.

    ResponderEliminar
  14. Gracias Sergio, saludos y buen inicio de semana!

    ResponderEliminar
  15. Muy bueno!
    Gracias por tu respuesta Potro, al final lo pude solucionar sin hacer nada, solo tuve que marcar la casilla: Redireccionar planeta-grandt.com.ar a www.planeta-grandt.com.ar que la verdad no tengo la mas pálida idea porque motivo se desmarco sola :S

    ResponderEliminar
  16. Por eso te insistía ayer con que activaras esa casilla ;)

    ResponderEliminar
  17. Potro nuevamente muchisimas gracias sirvio perfectamente como siempre. Saludos y cuidate ;)

    ResponderEliminar
  18. Gracias Potro ahora si por fin pude poner uno del +1 de google... jeje

    ResponderEliminar
  19. Hola Potro, quisiera hacerte una pregunta que no tiene nada que ver con esto. En mi blog yo seleccione para que aparezcan las reacciones y se pueda comentar pero nunca aparecen. Me ayudarias ? Porfavor.

    ResponderEliminar
  20. esta exelente gracias potro lo incorpore en mi web :)

    ResponderEliminar
  21. Hola ¿que tal?
    Tal vez este comentario no vaya aquí, pero si pueden ayudarme seria genial, hace unas semanas adquirí un Dominio Propio para mi Blog DiosCaficho.Com y resulta ser que el widget Buscar ya no funciona, no encuentra ningún post en mi Blog, querría saber si hay una manera de solucionar esto.
    Otra pregunta hay una manera de agregar un share bar estilo mashable, los que he encontrado tienen demasiados servicios que la barra no entra en la pantalla y es muy disfuncional para no decir horrible

    ResponderEliminar
  22. Hola potro esto no va con el tema, pero queria preguntarte donde puedo hacer un cuadro de seguidores de twitter y uno de google, asi como los que tienes en el tema de los tabview para agrupar varios gadgets en uno solo, mil gracias :)

    ResponderEliminar
  23. ya encontre el fanbox de twitter pero no e podido saber como hacer el de google

    ResponderEliminar
  24. javi_anubis, la tercera era la vencida :)

    Macarena, es posible que falté algún código en tu plantilla. Mira esta entrada ahí verás qué códigos poner en caso de que estén faltando. Saludos.

    ResponderEliminar
  25. dioscaficho, si apenas acabas de cambiar el dominio entonces es necesario que tu sitio se indexe de nuevo para que el buscador funcione bien. Quizá debas enviar un sitemap para que los robots de Google sepan del contenido de tu blog. Sobre la barra ni idea, ni siquiera conozco la de Mashable :/

    Sirius, de Google sólo existe el de Seguidores que es el mismo que uso aquí o el que puse de ejemplo en el Tabview. Saludos!

    ResponderEliminar
  26. Hola potro, muy bueno, la verdad es interesante. Necesito tu ayuda con otro tema: necesito tener como si fueran etiquetas a entradas por autores. Para hacertelo más fácil sería, si el blog tiene 5 autores:
    ENTRADAS POR AUTORES:
    •Juancito
    •Susana
    •Carolina
    •Pepe
    •Oscar

    y que al clickear aparezcan las entradas que cada uno publicó. Muchisimas gracias, saludos.

    ResponderEliminar
  27. Wow Bro, sí que se ve atractivo ese botón. Creo que es una buena estrategia para captar la atención y recibir un +1!! Excelente truco!

    Un abrazo!!

    ResponderEliminar
  28. Hola Potro antes que nada gracias a ti mi blog va agarrando forma ahora te hago una consulta de como hacer este tipo de tablas que al dar clic se despliega una ventana pequeña con información mira aqui te dejo el link http://telme-bg.com/index.php/4/10 de antemano muchas gracias

    ResponderEliminar
  29. Excelentes aportes.
    Muy buenos tus posts, y además muy claros, cualquiera puede modificar el suyo!
    Gracias!
    Saludos-

    ResponderEliminar
  30. uuff me sirvio,,, potro quiero instalar este chat en mi blog pero no encuentro la manera de instalarlo me puedes ayudar...esta es la web http://www.bowob.com

    ResponderEliminar
  31. Hola potro esta genial esta entrada, pero me gustaría ponerlo en la parte de arriba de mi blog que tengo que hacer.
    este es mi blog:
    http://ayudaparatupcparaprincipiantes.blogspot.com/
    gracias
    saludos Luis

    ResponderEliminar
  32. Hola emmaremix,

    Sólo ponle a cada entrada la etiqueta de cada autor, por ejemplo, una entrada redactada por Fulano tendría (además de las etiquetas propias de la entrada) la etiqueta Fulano; otra entrada redactada por otro autor le pones el nombre de su propia etiqueta, por ejemplo Sutano.
    Luego, de la misma forma que haríamos con un menú de categorías pondrías los enlaces a esas etiquetas, de forma que cuando el lector de click en Fulano aparezcan todas las entradas etiquetadas bajo la categoría Fulano.

    ResponderEliminar
  33. cyberbloggero, por supuesto brother, con esto el lector podrá tener el botón más visible y listo para ser votado. Otro abrazo para ti!

    TH3 V1P3R, el procedimiento exacto a ese ejemplo no sé, pero puedes usar una simple tabla HTML y en los enlaces que agregues poner Shadowbox

    Mario Mingüer, muchas gracias por tu comentario!

    ResponderEliminar
  34. karloselectronica, no lo conocía, pero por lo que vi se necesita de un servidor para poder instalarlo con PHP y mySQL.

    lerh, cambia donde dice bottom:0px;, por top:0px;

    ResponderEliminar
  35. Hola potrillo :D .. muy buena la nota, me gusto el resultado.

    Te queria hacer una pregunta, sabes como hacer para que la plantilla de mi blog no me deforme las imagenes, es que tengo ese problema porque la plantilla solo muestra una imagen y las deja todas como en un rectangulo.

    Si quieres miralo tu mismo. http://www.postdesign.blogspot.com.

    Te agradezco que me ayudes ya que me gusta la plantilla pero no le he podido corregir ese problema yo mismo.

    ResponderEliminar
  36. Hola potro disculpame por molestar xD pero me surgió una duda con algo que me esta saliendo mal te puse un comentario en este post http://ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html?showComment=1311786035677#c2378928490593714496
    espero que me puedas ayudar, gracias :)

    ResponderEliminar
  37. Hola POTRO, He sido premiado en mi BLOG, y he querido compartir este premio con usted porque la verdad he sido muy bendecido con cada una de las enseñanzas que hay en su pagina.

    Espero que LO VISITE y lo pueda disfrutar como yo lo he disfrutado.

    Es un premio a su talento, paciencia, honestidad, responsabilidad y sobre todo por su maestria a la hora de compartir con muchos sus conocimientos.

    Bendiciones a manos llenas en Cristo Jesus,


    Pastor Gilberto Hernandez.

    ResponderEliminar
  38. potro tu sabes como instalarlo en el servidor??

    ResponderEliminar
  39. muchas gracias potro, pero tengo una duda, en Internet explorer no se ve bien el botón, me podrías ayudar por favor, intente colocarlo arriba pero aun así se ve solo la mitad de botón, gracias potro

    ResponderEliminar
  40. Oye potro tengo un problema
    lo he hecho como explicas
    en curiosidades del mundo
    y aparece en la parte de arriba y me gustaria que apareciera como aqui en Ciudad Blogger que puedo hacer

    GRACIAS

    ResponderEliminar
  41. Hola Carlos Sz,

    Tendrías que quitar el Leer más, luego colocar el Leer más mejorado el cual muestra la miniatura proporcionalmente sin deformarla y además en ella se añade un enlace a la entrada.
    Pero primero hazlo en u blog de pruebas con la misma plantilla, por si las cosas no salieran bien o por si el resultado no fuera el esperado.

    Saludos.

    ResponderEliminar
  42. MHermon, gracias y bendiciones igualmente :)

    karloselectronica, ni idea :/

    ResponderEliminar
  43. lerh, ¿en dónde lo has puesto arriba?

    AlexG, lo que sucede es que un poco arriba de donde pusiste los estilos del botón hay una llave de cierre que eliminaste al poner otro código:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  44. te ago una pregunta...¿Como Haces Para Poner El Fan Fox de Facee o Twitter En Una Entrada ?

    ResponderEliminar
  45. Querido Potro, tengo mi blog hace un par de meses y estoy muy contento, el unico inconveniente es que tengo un problema con los divisores de las entradas.

    Por ejemplo por pagina son 7 entradas, pero hay 6 separadores.

    No se si entedes.

    http://unespacioindependiente.blogspot.com/

    ResponderEliminar
  46. Gran post, y muy bien explicado aunque no este interesada en ponerle botones a mi blog lo voy a tener en cuenta en su momento (: potro tengo una duda quisiera saber si se pueden redondear las esquinas de mi blog, ya que me estoy volviendo loca y se que se hace con border-radius pero no se bien donde ponerlo, desde ya muchas gracias!

    ResponderEliminar
  47. Hola Potro en mi página de Facebook queremos publicar un enlace los administradores y nos salta lo siguiente: http://dl.dropbox.com/u/4349555/nose.PNG que puede ser? Algún error de Face o bloquearon la página? Porque escribir en el muro y publicar texto se puede.

    ResponderEliminar
  48. Hola Potro!, solo quiero agradecerte por hacer de mi blog algo grande, hehe y solo queria avisarte que me mude a WordPress, y mi nueva web es GeekOS.com.ar Muchas gracias por todo!, seguire visitandote para no hacerme noob (: lo qiero mucho

    ResponderEliminar
  49. e.e no me sale ya xD, hehe www.geekos.com.ar

    ResponderEliminar
  50. X.A.N.A, hago un blog de pruebas donde no exista nada, ni entradas ni cabecera, ni nada, sólo dejo un gadget, luego en la entrada pongo un iframe de ese blog de pruebas.

    Fuerza Roja, prueba mejor con este tipo de separadores de entradas. El problema con el que usas es que agrupa todas las entradas de la misma fecha, por eso en algunas no se muestra.

    ResponderEliminar
  51. Hola locaporunaobsesion,

    Efectivamente es con border-radius pero debes tener un fondo del cuerpo del blog que se de un color distinto al color del fondo del blog, de otra forma no se notarán los bordes.
    Para ponerlos redondeados sólo coloca debajo de:
    .content-inner {

    Lo siguiente:

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;

    ¡Saludos!

    ResponderEliminar
  52. Pozo+10™, ya te he respondido en Facebook.

    TutoGeek , buuu, ni hablar, espero que tengas mucho éxito en la nueva plataforma, y ya sabes que siempre serás bienvenido aquí ;)

    ResponderEliminar
  53. hola potro:
    lo había puesto arriba para ver si así se solucionaba el problema pero como vi que no, lo regrese abajo.
    http://ayudaparatupcparaprincipiantes.blogspot.com/

    ResponderEliminar
  54. Necesitaría que lo tengas puesto arriba, al menos en un blog de pruebas para ver el problema que mencionas.

    ResponderEliminar
  55. Potro una Consulta, dime tú crees que pueda pasar mi blog, de Blogger a WordPress, es que me han recomendado mucho Wordpress :) espero tu respuesta

    ResponderEliminar
  56. Potro una preguntita fuera del tema.. COMO SIEMPRE YO HACIENDO PREGUNTAS QUE NADA QUE VER CON EL POST jaja. Queria saber como hacer una imagen, o un AVISO, cuando ingreses a un blog, aparesca un aviso de BLOG EN MANTENIMIENTO o EN CONSTRUCCION o cosas parecidas. Me fije que en un post tu sugeriste un post de elescaparatederosa pero no encuentro los codigos < body > y los demas, y no los puedo aplicar. Me darias una mano en este problema. Es que voy a dejar un tiempito el Blog porque ya como que me saturo un poco y... quisiera que la gente que entra al Blog sepa que por un tiempo va a estar sin actualizacion y esas cosas... Para que no quede en la nada, y la gente vea que no hay actualizaciones nuevas. Porfavor me ayudarias Potro.. espero tu respuesta...

    ResponderEliminar
  57. Hola Potro!
    Yo lo hice tal cual lo explicas, encontre cada cosa que debia buscar en el codigo css para luego anadir los codigos que das en la explicacion pero no lo veo en blog. Cuando pongo la pagina cargar lo puedo ver pero se desaparese muy rapido y ya no sale mas. si voy a los comentarios hace lo mismo, veo la barra por un intasnte y ya despues no lo veo. Que podra estar pasando. Puedo ponerlo fijo? como lo hago? o como puedo hacer que no se quite tan rapido para que de tiempo a votar?

    ResponderEliminar
  58. Querido Potro, lo extraño del caso es que no agrupa todas las entradas de la misma fecha, siempre falta un divisor para la cantidad de entradas que hay por pagina. Por ejemplo: hay 7 entradas por pagina - 6 divisores.

    Un abrazo

    ResponderEliminar
  59. Muchisimas gracias potro! sos un genio♥ Saludos (:

    ResponderEliminar
  60. Perfectamente perfecto Funcionando en mi blog--> http://tumultitec.blogspot.com/ saludoss..!!potrillo xD

    ResponderEliminar
  61. SmiThzhiTo, de poderse se puede, pero no sé cómo se hace, en la red debe haber tutoriales que explican cómo trasladarlo a WP.

    [FastenMovies], sigue ese procedimiento, pero en lugar lugar de la etiqueta BODY busca exactamente la misma línea que se menciona en esta entrada (la que hay que buscar en lugar de esa).

    ResponderEliminar
  62. Hola Hija del Altisimo,

    Recuerda que la barra trabaja con cookies, así que luego de verse por primera vez no volverás a verla hasta después de una semana, esto es con el fin de que quienes ya dieron click no tengan que estar viendo la barra siempre.
    De cualquier forma puedes programarla para que en lugar de que dure una semana dure sólo unos minutos desaparecida. Si deseas hacerlo así mira el comentario #13

    Saludos!

    ResponderEliminar
  63. Fuerza Roja, entonces quizá es uno de los tantos "defectos" que tienen esa plantilla cuando se trata de personalizar. De cualquier manera intenta con el método que te sugerí para ver si con ese no te da problemas.

    TuMultitec, excelente :)

    ResponderEliminar
  64. No es error de Facebook al final Potro, todas las demás funcionen perfectamente, bloquearon mi página y la verdad no veo los motivos. Llene un formulario en Face mostrando el error y la respuesta me tarda como mínimo 48hs, espero respondan algo coherente. Que calentura tengo!

    ResponderEliminar
  65. Pozo+10™ , pues qué lata con estos del Facebook, ya he sabido de varios bloqueos esta semana :/

    [FastenMovies], por nada ;)

    ResponderEliminar
  66. Es una cosa de locos! A quien más le sucedió? Si es que te acordas, así hablo con él para ver si se le soluciono.

    ResponderEliminar
  67. Gracias Potro, solucione el problema

    ResponderEliminar
  68. Pozo+10™, no recuerdo :S

    AlexG; vale ;)

    ResponderEliminar
  69. Gracias Potro!
    una cosa mas... en la linea de color azul del codigo y conforme la explicacion del comentario 13, debo entonces tambien sustituir la palabra "dias" por "minutos" ? ...dejame saber por favor!!! y gracias tu ayuda!!!

    ResponderEliminar
  70. No, todo lo demás se queda tal cual, sólo debe cambiarse las partes que menciono ahí, el resto queda intacto ;)

    ResponderEliminar
  71. Hola potro , esta tarde instalar la barra en mi blog, pero ya no se ve en ninguno de mis blogs . http://gestoresdecontenido.blogspot.com/ , espero tu ayuda, y gracias por todo

    ResponderEliminar
  72. se me olvido decirte , que hubo un momento en que me salia sin el boton .

    ResponderEliminar
  73. este es mi otro blog , mira como queda, se llevo funcionando 2 dias perfectamente.

    ayer instale showdrabox.

    y hoy al despertame ya no esta el boton , no porque, subi la copia de seguridad que tenia antes de modificar lo del show... y me sigue saliendo igual.

    ResponderEliminar
  74. Potro que hago para que la barra aparezca al instante y no se borre, tampoco que se borre el boton +1 de los botones flotantes que tambien instale, no se si me entiendes, espero que me ayudes

    ResponderEliminar
  75. Disculpa ya funicono, pero en las entradas el boton +1 flotante no aparece :/

    ResponderEliminar
  76. Younes Elazizi, en el primer blog no veo que tengas instalada la barra, en el otro no sé porque no dejaste la dirección, pero desde hace unas horas ha estado fallando el botón, supongo que algo deben estar haciendo los de Google porque igual los míos por ratos desaparecen y de pronto vuelven a aparecer.


    SmiThzhiTo, anda fallando, esperemos que no tarde mucho y que si Google está haciendo pruebas no demoren.

    ResponderEliminar
  77. Potro antes de nada darte las gracias por este blog ya que me ayuda enormemente para mejorar mi blog.
    Ahora te quería preguntar una cosa sobre esta barra de google+...
    He añadido las flechas de arriba y abajo y esta barra, pero cuando se ve la barra la flecha de 'ir abajo' sale tapada... ¿Como puedo poner la flecha para que salga por encima de la barra.
    Lo quiero como lo tienes en este blog.
    Salu2 y gracias.
    Mi blog --> www.mejoreschops.com

    ResponderEliminar
  78. Gracias por la duda Potro, tengo otra, la barra flotante en la pagina principal me sale todo bien, perfecto, pero cuando me dirigo a cualquier entrada pasa esto http://i54.tinypic.com/alp9h5.jpg la barra sale muy abajo que casi no de distinge lo que dice, haber si me puedes ayudar :)

    ResponderEliminar
  79. MejoresChops, pues de hecho yo no le hice nada en especial, no sé por qué la mía sí quedó así. Pero puedes solucionarlo buscando en el código de ese botón esto:
    position:fixed;

    Justo después de eso agrega esto:
    z-index:1000;

    ResponderEliminar
  80. SmiThzhiTo, lo que sucede es que ahora tienes dos botones +1, y uno de ellos tiene la medida grande, entonces este también toma esa medida y se sale de la barra, por eso se baja.

    Prueba cambiando esta línea:
    <g:plusone callback='saludoPlus1' href='http://www.smithzhito.tk'>

    Por esta otra:
    <g:plusone size='standard' callback='saludoPlus1' href='http://www.smithzhito.tk'>

    ResponderEliminar
  81. Hola Potro, amigo mío. Aquí paseándome de nuevo. Lo encuentro genial. Yo de a poco estoy utilizando el Google+ y esta herramienta sí que me servirá. Pero, sabes? Me he encontrado con un problemita (mi primer problema que te comento): resulta que agrego el código como lo indicas, pero al ver el resultado aparece sólo por un instante y luego desaparece, al mismo tiempo que se descarga mi blog. ¿A qué crees que se deberá?

    Gracias por tu pronta respuesta. :D

    ResponderEliminar
  82. Potro las cambie pero sigue el mismo problema :/

    ResponderEliminar
  83. Hola Panchito,

    Recuerda que la barra trabaja con cookies, y se verá cada semana, por ejemplo, si la pones ahora y miras el resultado verás ahí la barra, si tratas de verla de nuevo ya no podrás verla pues la cookie indica que deberá estar oculta por una semana, es por eso que la vez por un pequeño instante y luego desaparece.
    Si lo deseas puedes hacer que se muestre cada ciertos minutos en lugar de cada semana. Si es así entonces mira el comentario #13

    Saludos!

    ResponderEliminar
  84. SmiThzhiTo, si te fijas primero carga el tamaño normal y después cambia al tamaño grande.
    Hay dos opciones, una es que quites el botón flotante de Google +1 para que no interfiera con este.
    Otra es que quizá si pones el código de la barra (el que va después de <body>) hasta el final pueda hacer que se quede con el tamaño que sele indica, puedes probar ponerlo antes de </body>

    ResponderEliminar
  85. Gracias Potro. ¿Cómo pasé por alto las cookies? Jeje, la cosa es que se solucionó el problemilla, ahora se ve sin problemas. Nuevamente Gracias! :)

    ResponderEliminar
  86. hola potro mi otro blog es www.comunidadbloggers.com , necesito ayuda, ya que lo he intentado y no me sale el boton para pulsar . gracias

    ResponderEliminar
  87. se me dejo de ver de un dia para otro .

    ResponderEliminar
  88. Hola Younes,

    A muchos nos desaparece el botón por ratos. Prueba actualizar el código del botón:
    http://oloblogger.blogspot.com/2011/07/actualizando-el-boton-1-y-aprovechando.html

    Yo no lo he puesto actualizado porque a mí al igual que a muchos no nos funciona esa actualización, pero quizá tú tengas mejor suerte.

    Saludos.

    ResponderEliminar
  89. Muchas gracias Potro ahora si me sale bien la barra y el boton.

    ResponderEliminar
  90. hola potro a esta barra se le podrían agregar los botones de me gusta de las paginas de facebook, twitter y taringa??
    gracias saludos lerh

    ResponderEliminar
  91. Hola lerh,

    Tendrías que meter dentro de <div align='center' id='barraPlus1'> una tabla, en ella poner el código del botón de Google+ y en las demás celdas los códigos de los otros botones.

    Saludos.

    ResponderEliminar
  92. Te pregunto de esta misma forma se hace en wordpress??? gracias por la atencion

    ResponderEliminar
  93. No lo sé Steven, no manejo la plataforma de WP :(

    ResponderEliminar
  94. Hola ! y gracias por tu ayuda.
    Como tengo en Blogger algunos blogs con plantilla antigua, donde no aparece el Google+ aunque marques esa opción, la añadí aparte.
    Todo muy bien, aunque noto que me ha lentificado los blogs ya que es lo último en abrirse y lo hace muy lentamente.
    Suprimí el script que le correspondía, pero nada, sigue todo igual(sigue apareciendo el G+ y todo lento)
    ¿Me puedes dar una idea de qué hacer?
    Otra vez gracias.

    ResponderEliminar
  95. Hola Martha,

    Habría que ver si es realmente el botón de Google +1 el que está causando la lentitud en la carga.
    Entiendo que ya no quieres que aparezca, pero éste sigue apareciendo. ¿En cuál blog lo tienes para poder verlo?

    Saludos.

    ResponderEliminar
  96. Hola Amigo [ El Potro ]. Solo un dato...

    En la opción:

    [ Ahora pega antes de ]]> estos estilos:]

    yo creo que no es "antes" es "después" ya que al poner antes el código me apareció en la parte superior de mi blog.

    Sólo es una sugerencia.

    Gracias por el aporte.!

    ResponderEliminar
  97. Hola BDJMarcelo,

    Es antes de ]]></b:skin>
    Lo que pasa es que muchos se confunden de etiqueta y lo pegan antes de <b:skin><![CDATA[/*
    Ahí es cuando sí aparecen los códigos arriba del blog.

    Saludos!

    ResponderEliminar
  98. Hola Potro!ya tengo puesta la barra en mi blog,solo que hice los cambios correspondientes como indicas en el comen.#13 lo he puesto en 1 minuto pero no veo el cambio podrias verlo?
    gracias!

    ResponderEliminar
  99. Hola Cocofansclub,

    Después de cambiar el tiempo de las cookies debes eliminar las cookies de tu navegador, después de eso ya podrás apreciar los cambios.

    Saludos.

    ResponderEliminar
  100. ok muchas graciass!
    Saluditos!
    PD:Felicitaciones por el nuevo diseño,es muy agradable a la vista!

    ResponderEliminar
  101. Hola el potro, mi comentario no es sobre este post sino sobre un problema que tengo y no he podido solucionar. Mira esta es mi web:

    http://vainasbook.blogspot.com/

    El problema que tengo es que la pagina entre los gadgets tiene demasiados espacios y yo quisiera saber como puedo hacer para reducir ese espacio que tengo. Para ser mas detallista la plantilla que estoy usando es una predeterminada de google llamada "Sencillo" y asi me vino. Bueno ese es mi problema y espero que me respondas porfavor me has salvado de muchas!.

    ResponderEliminar
  102. Hola Menecox,

    Para reducir la distancia enter gadget y gadget agrega antes de ]]></b:skin> esto:
    .main-inner .widget {margin-top:-15px;}

    Sin embargo, hay unos espacios que se ven por ahí, esos espacios son de gadgets que tienes que parece que están vacíos o tienes algunos códigos en ellos, y aunque no se muestra nada en ellos sí se muestra el espacio que ocupan.

    ResponderEliminar
  103. Pregunta, a mi me gusta más la que aparece acá, no a lo largo, sino chiquito, al costadito, abajo, que dice "te gusta ciudad blogger?"...cómo se puede hacer así sólo con el botón de google + 1? Gracias!

    ResponderEliminar
  104. Mira aquí, ahí verás todas las medidas disponibles que hay de los botones, incluyendo ese:
    http://ciudadblogger.com/2011/06/anadir-el-boton-1-de-google-en-blogger.html

    ResponderEliminar
  105. Gracias, pero me parece que no se entendió lo que dije, lo que quiero no es un tamaño de botón, sino cambiar que aparezca la barra gris y algo como lo que está acá, un cartelito chiquito, abajo, a la derecha, que diga "¿Te gustó mi blog?" y recién ahí al hacer click, que salga el botón de google + 1 para hacer click, y no la barra toda a lo ancho de la página con el mensaje "Te ha gustado el blog? que tal si nos regalas un + 1?" como se puede cambiar todo ese mensaje a lo largo, por la burbujita chiquita que aparece acá, abajo, a la derecha? se entiende? gracias y feliz año nuevo!

    ResponderEliminar
  106. Si es como la que yo tengo abajo, esa pequeña que al darle click aparecen los tres botones para compartir el blog, entonces espera un poco, recién termine de responder todos los comentarios publicaré esa entrada ;)

    ResponderEliminar
  107. Hola potro!! Coloqué el boton de google arriba, y quiero agregarle un título...algo como "Si te gustó este servicio, recomiéndalo." cómo hago para colocarlo? gracias!

    ResponderEliminar
    Respuestas
    1. Sólo pon arriba del código del botón el texto que quieras, por ejemplo:
      <div class="googleplusb">Aquí el texto que quieras</div>
      .... Aquí el código del botón ....

      Eliminar
    2. Listo, ya le puse el título, pero está super chico y muy pegado al botón, cómo agrando un poco la letra y pongo un poco de espacio entre el título y el botón? Gracias!

      Eliminar
    3. Agrega estilos, como el DIV ya tiene una clase entonces pon los estilos que desees, por ejemplo:
      .googleplusb {
      font-size:16px;
      margin-bottom:10px;
      }

      Eliminar
  108. Y para qué la barra jamás desaparezca, ¿qué tengo que hacer potro?

    ResponderEliminar
    Respuestas
    1. Prueba quitando el primer código, pero si lo haces de esa manera el mensaje de texto siempre será el mismo, no cambiará ni podrá recordar si ya diste +1 o no.
      Tal vez necesites algo más sencillo como esto (pero sin el botón de cerrar)
      http://ciudadblogger.com/2010/11/barra-de-herramientas-flotante-con.html

      Y dentro puedes poner el botón +1 e incluso de otras redes sociales.

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger