Barra de herramientas flotante con opción de cerrar

15 de noviembre de 2010 265 comentarios ,
He visto que muchos de quienes usan barras de herramientas como Wibiya han tenido que quitarla porque interfiere con el funcionamiento de algunos scripts como Scriptacoulous y Prototype, y otros han optado por eliminar esos scripts con tal de seguir usando esa barra de herramientas.
Bueno, para quienes prefieren tener una barra de herramientas personalizada que no les dé esos problemas y les permita seguir usando otros scripts veamos cómo crear nuestra propia barra de herramientas flotante con opción de cerrar.
La barra de herramientas contiene un buscador, enlace de suscripción al feed, enlace para seguirnos en Twitter, Facebook, botón para compartir en Google Buzz, Twitter, Facebook y traductor en tres idiomas.

Puedes verlo funcionando en este blog de pruebas.

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega esto:
/* Barra de Herramientas
----------------------------------------------- */
#ToolBar {
background:#CEE3F6; /* Color de la barra */
border-top:1px solid #ccc; /* Color del borde superior */
margin: 0;
bottom:0px;
right:0;
width: 100%;
height:35px;
overflow: auto;
position: fixed;
}
.cerrar {
float: right;
margin-top:6px;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
.search-text {
color: #ccc;
text-align: center;
}

Ahora antes de </head> pega lo siguiente:
<script type='text/javascript'>
// Barra de Herramientas (ciudadblogger.com)
//<![CDATA[
var toolb_arr = new Array();
var toolb_clear = new Array();
function toolbFloat(toolb) {
toolb_arr[toolb_arr.length] = this;
var ftrpointer = eval(toolb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolb_arr[toolbpointer]);
var toolbbar = 'toolb_clear['+toolbpointer+'] = setInterval("toolbFloatInit(toolb_arr['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return toolbTotOffset;
}
function toolbFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ToolBar").style.visibility = "hidden";
}
//]]>
</script>
Después agrega este código antes de </body>
<div id='ToolBar'>
<img border='0' class='cerrar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibarY325OS3UWzBOLLVvcB_ZYwzni3XShTwclORkwIhKCbJpm8inXxzR7uBFTs0AeChYNC8IEhVt-a791QYrim7JjfVMtmkulsBkeK0-5TG6X5JKOaJgfkx6unoAyjYcQmXlw-3uOmpqo/s1600/close.gif' title='Cerrar esta barra' width='19'/>

<table border='0' cellpadding='3'>
<tr>
<td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form></td>

<td style='padding-left:20px;'><a href='http://www.facebook.com/usuario' title='Sígueme en Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzekESabPsGDtNSign6tD1QSFGpnvJWANKRaV_m7defjrFYRwAXFbtpEi4qQW2Yz0hhUq3cOjV7ACMYYgQNDy7D2r1S4KkXkJIQQA7dLA7-uYlGCBJPw2uSIikNqJPl8EiPYuVrSszuw/s1600/m-facebook.png'/></a></td>

<td><a href='http://twitter.com/usuario' title='Sígueme en Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2c7JNpwL41JpU7Wq8CFPpcrKbX8EHwxRx7XJAeh1agBX3cnRApOu1HsJJfKyShEtDZggNDHB9iWANDBbXOMfvoYQh1vdHtl_p7TDg4mkj66aWgkzJdnAVGsU6hsfe7JP2KGaZi4uKumU/s1600/m-twitter.png'/></a></td>

<td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Suscribete al feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3SOPej_VzZavNk9g_fy-cjYWegtqP-bEgqEtn_mLmNYn2Bp-C3DaQsi2H-nLa-r-IIKBN1krZQVke7d4AVzZuP-qa2byLN_6yf2FoVfmv-d61Xb_JUNjB6Q4hQmb9BNndqS8XlMxbFDE/s1600/m-feed.png'/></a></td>

<td style='padding-left:40px;'><a class='twitter-share-button' data-count='horizontal' data-lang='es' href='http://twitter.com/share' title='Publicar en Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><a class='google-buzz-button' data-button-style='small-count' data-locale='es' href='http://www.google.com/buzz/post' title='Publicar en Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></td>

<td><a href='http://www.facebook.com/sharer.php' name='fb_share' title='Publicar en Facebook' type='button'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

<td style='padding-left:60px;'><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ZIGHLZqqkRf7EHos7oSqxy7HZFGEgSPdtTxuDaieVkyc26y-udtgRZsooE3AA13lnZLPJ3VrNNBsVJkFzQSg-rRvOU-KTWLtaE9j5BGUWzsyS7ujcqlmn0yKQZLs_nK1qRq2LpE_Z-w/s1600/ingles.png' width='24'/></a></td>

<td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cpt&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Português'><img align='absbottom' alt='Portuguese' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKMhs_A9UJElOMpHjeVNxv6b5nbP5fDIXAUg4OBsVB9V7zoawybV8i7CCQ2d_Qzr_RV7Y6oSnSgfG9xIp323Ap6qlTFJDAM4v80dmn6R4V4p4G0Qw1QZzT1q76iBEkWGTISbxKB0MLKw/s1600/portugues.png' width='24'/></a></td>

<td><a href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=es&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Française'><img align='absbottom' alt='Spain' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2OhtLcMouC75OX2eAn1aOZ7sxrBZXKeS-I-l88Pbnt3ZCrTQuY_O90Z_gO4fVLNm8IeFK4GU80YVElyBNipYtn1gH2MVRAjoEdGuCRZ8lV-LBAnAdc3ugrGAgh9qYcb6s_yERVRr3zfk/s1600/Frances.png' width='24'/></a></td>

</tr>
</table>
</div>
Por último cambia lo que está en color rojo por las URLs de tu Facebook y Twitter.
Puedes cambiar el color de la barra donde se indica en color verde dentro del primer código que agregaste.

Si lo deseas puedes agregar otros elementos, como un contador de visitas, enlaces, etc. sólo agrega antes de </tr> un bloque como este:
<td> Aquí el contenido extra </td>

Añade donde se indica el contenido que quieres agregar y listo.
Como ves, no es necesario depender de sitios externos ni quebrarte la cabeza para poder tener una barra de herramientas en tu blog.

toolbar


265 comentarios en:

" Barra de herramientas flotante con opción de cerrar "

  1. Hola Potro!!Gracias! Un post Buenisimoooo como siempre!! :D
    Saludos y buena semana para tod@s!!
    ya me voy a probar como queda jejeje

    ResponderEliminar
  2. Gracias Potro... muchas cosas que compartes no las puedo poner en práctica porque aún tengo un nivel muy elemental pero me sirven para aprender y superarme.
    Saludos.

    ResponderEliminar
  3. No veo la barra en el blog de pruebas!

    ResponderEliminar
  4. Mariangeles, seguro te quedará muy bien :)

    Toptrucos, gracias!

    Delio, con el tiempo podrás ir implementando elementos más "avanzados", por lo pronto no estaría mal que en un blog de pruebas vayas probando lo que desearías usar más adelante :)

    Eurelio Jacinto, está abajo de la página.

    ResponderEliminar
  5. Wow! bastante interesante! :) muchas gracias!!!

    ResponderEliminar
  6. Muy interesante. De momento no la voy a poner, pero gracias.

    ResponderEliminar
  7. hola en que parte modifico el ato de la barra

    ResponderEliminar
  8. Potro una pregunta (para no perder la costummbre de molestarte jiji) ¿ como puedo hacer para reducir el ancho de la sidebar izquierda, sin que se reduzca el ancho total del blog?

    ResponderEliminar
  9. Luis Kasanova y martinyfelix, qué gusto que ha sido de su agrado :)

    bU, donde dice height:35x; se cambia.

    Mariangeles, mira esta entrada.

    ResponderEliminar
  10. Muchas gracias Potro, en cuanto se acuesten todos lo pruebo, que aquí en España ya es de nochecica jajajaja
    Me ha encantado esta entrada voy a probarla en el blog de pruebas y hay la dejo para cuando la necesite. Otra cosa hoy he estado trasteando lo de la sange en el blog y modificando valorese imagen, he conseguido colgar un gif amimado en la parte izquierda del fondo jajajja Lo utilizaré para adornos navideños y chominaicas varias . Me encanta probar y modificar los trucos, así no avanzo nada en mi blog, pues siempre estoy metida en el de pruebas. Gracias por la inspiración jajajaj

    ResponderEliminar
  11. Gracias!!!! sabìa que estaba por alguna calle de la ciudad, pero no la encontraba je.
    Saludos :D

    ResponderEliminar
  12. Todo esto me parece tan interesante, recien empiezo a aprender. Que sitio le recomendarían a un novato o mejor que material. Gracias

    ResponderEliminar
  13. Nadie, antes me pasaba igual, me la pasaba más tiempo en los blogs de pruebas probando de todo :)

    Mariangeles, me encantó eso de "por alguna calle de la ciudad" :D

    Javierdealmagro, pues aquí mismo hay de todo un poco, hay trucos un poco más avanzados que otros pero todo depende mucho de qué tanto vayas necesitando y que con paciencia los vayas probando. Verás que no es nada complicado ;)

    ResponderEliminar
  14. Vaya muy interesante, siempre quise tener mi propia barra sin depender de servicios externos que hacen mas pesado el blog.

    Voy a jugar mucho con la personalización (como de costumbre) de verdad gracias.

    No carga ningun script externo o si? se mira bien en internet explorer?

    ResponderEliminar
  15. Buenisimo Potro!! Cierto lo que dices,yo tenía Wibiya y la tuve que sacar porque demoraba una eternidad cargar. Probaré esta opción. :)Gracias!!

    ResponderEliminar
  16. Esta Geniallissssimo este post, muy buena barra inferior, jejejeje no es mejor que Wibiya pero para ser tan amigable con otros scripts esta Genialisisisisimo. salu2

    ResponderEliminar
  17. Hola potro, paso a saludarte y hacerte una pregunta hace poquito coloque los anuncios de adsense en las entradas pero queda un espacio muy amblio en la pàgina principal no se si hice algo mal. tal ves tù me puedas ayudar


    Un saludo

    ResponderEliminar
  18. Hola,

    te quiero hacer una pregunta a parte de este post para ver si me puedes ayudar.
    He visto algún que otro blog que tiene como cabecera sus últimos artículos. La verdad es que no sé como hacer que en vez de una imagen o foto salga como una especie de menú con los últimos artículos publicados.

    Gracias

    ResponderEliminar
  19. Hola potro excelente post,la barra se puede colocar en la parte superior del blog?

    Gracias!!

    ResponderEliminar
  20. @rielCastellanos, ninguno externo y funciona en todos los navegadores.

    Marysil, eso había escuchado, que Wibiya tarda demasiado en cargar. Esperemos que con esta estés más satisfecha :)

    Sergio Molina, no es mejor ni peor, pero ya con la compatibilidad de scripts y la carga más rápida es una ventaja :)

    samantha, ¿en cuál blog ves ese espacio con los anuncios?

    Benet García, no sé de cuál blog te refieras, pero supongo que sólo dividió la cabecera y ahí puso un gadget para mostrar los últimos artículos.

    Diviernet, claro, sólo cambia donde dice bottom:0px; por top:0px;

    ResponderEliminar
  21. mira es estè http://crepusculo-latina.blogspot.com/ si te fijas en la primera entrada se ven los anuncios pero en las siguientes se ve un espacio bastante amplio y no se ven hasta darles un clic.

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

    ResponderEliminar
  23. Por cierto potro te iba hacer una consulta màs o menos cuantas visitas debe tener un blog para colocar adsense?

    saludos

    ResponderEliminar
  24. Pues no hay un número específico de visitas, obviamente entre más visitas tengas mayor posibilidades hay de que hagan click en los anuncios.

    Adsense permite sólo 3 bloques de anuncios por página, cuando se excede de este número entonces no se muestra el anuncio y se queda en blanco, como es tu caso.

    ResponderEliminar
  25. disculpa por no poner en el sitio correcto este comentario pero bueno, yo tengo un blog de recursos quisiera saber si abria un servicio donde mis visitante o USUARIOS REGISTRADOS pudieran crear post para mi blog pero que estos post sean controlados por mi (que yo pueda decidir si se publica) de antemano espero tu respuesta

    ResponderEliminar
  26. claro gracias tienes razòn, que tonta y bueno en cuanto a las visitas creo que ya te diste cuenta que soy novata en esto, pensé que tenia algún limite de visitas como "mínimo".

    ResponderEliminar
  27. alex, no es posible, sólo puedes añadir autores al blog pero estos podrán publicar sin tu autorización.

    ResponderEliminar
  28. Hola ciudadanos!
    Tengo una consulta sobre diseño, me ha gustado mucho la plantilla que usan ustedes pero no la quise descargar, sino simplemente tomar algo de su diseño y hacerlo con el diseñador de plantillas.
    Si bien estoy conforme hay algo que me gustaria hacer y aqui es donde viene mi pedido:
    En el header tengo un .png con fondo transparente, pero al fondo no se como colocarle una imagen.
    Asi como ustedes tienen el logo de la ciudad como imagen de cabecera y aparte, en el fondo los edificios en negro, yo intento hacer lo mismo y no se como hacerlo con el nuevo diseñador.
    El blog es AngelCanibal.com
    Espero haber sido claro, muchas gracias por todo lo que comparten y un abrazo!!!

    ResponderEliminar
  29. Puedes agregar directamente en la plantilla una imagen para el área de la cabecera independientemente de la que subas desde Elementos de la página.
    Para hacerlo busca esta parte:

    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    Y cámbiala por esta otr:

    .header-outer {
    background: url(URL de la imagen);
    }

    Cambia la URL de la imagen donde se indica y listo.
    Saludos.

    ResponderEliminar
  30. Potro: si! yo de nuevo!! jajajaja ¿se puede cambiar el cerrar,de la barra ,por minimizar?
    Saludos :D

    ResponderEliminar
  31. Hola, perdoná que escriba acá, sé que no es el lugar indicado...pero es que estoy buscando reemplazar el título del blog por una imagen y no encuentro el link de la ayuda, sé que lo tenés porque lo vi.
    ¿Serías tan amable de pasarme el link???. Desde ya muchas gracias, esta es mi página de cabecera para ir agregando cositas en mi blog.
    Saludos

    ResponderEliminar
  32. MUY BUEN POST PERO CUANDO LE DOY PARA VERLO EN OTRO IDIOMA EL ANTIVIRUS ME SALTA POR QUE... GRACIAS

    ResponderEliminar
  33. Mariangeles, no con este script :(

    Lolilu, sólo necesitas entrar en Diseño > Elementos de la página, y hacer click en Editar sobre el elemento Cabecera, ahí puedes subir la imagen de la cabecera que sustituirá al título. Gracias por tener presente este sitio al momento de hacerle cosas al blog :)

    Th€ R€aL G1, no sabría decirte, el traductor que usa es el de Google así que no debe ser un problema grave.

    ResponderEliminar
  34. No te preocupes,yo la veo muy alta porque mi compu es portatil ,de 10 pulgas, pero me fijè en las otras( que tienen las pantallas màs grandes,y tomè "prestadas" a mis hijos y marido shhhh se vè muy bien jajaja). Ademàs le cambiè algunas cositas y quedò como un menù jeje.
    La verdad me encanta este truco!! jeje :D
    Saludos!!

    ResponderEliminar
  35. Hola estimado. Nuevamente lo molesto. Esta vez es por lo siguiente: uso "dropbox" para cargar los "scripts" que publicas aquí y que me son de una enorme utilidad. El problema está en que este servicio "dropbox" me hace la página sumamente lenta para cargar. Con la suya me sucede lo mismo. Y a veces ni siquiera se carga. Se queda esperando cargando mientras aparece el server de "dropbox" abajo. La pregunta es ¿existe algun otro alojamiento mejor? ¿Se pueden poner los códigos de los scripts directamente en la planilla sin poner un archivo?

    Muchas gracias.

    ResponderEliminar
  36. Luvodico Rey. Perdon que me Entrometa. A mi me pasaba lo mismo, y pense que era el servidor, de Dropbox porque tardaba horas en cargarse mi blog, pero el problema es que de pronto tienes muchos "scripts" en tu codigo fuente.

    Y con respecto al servicio de alojamiento, pues usa de pronto Google Sites, es bueno pero tambien es algo demorado. No conozco otro servicio pero tambien se que se pueden poner los scripts dentro de la plantilla como en este caso de la barra de herramientas

    ResponderEliminar
  37. Luvodico Rey, desde ayer Dropbox está teniendo problemas con su servidor, el día de hoy los links no están funcionando. En el foro de Dropbox ya se les ha notificado del problema y se supone que están trabajando en ello. De cualquier manera siempre es mejor alojar los scripts en la plantilla para evitar estos problemas, pero también deberías considerar la recomendación de Sergio Molina respecto a reducir el número de scripts que usas y dejar sólo lo que sea elemental, esto también aplica para los gadgets y cualquier otro elemento del blog que no sea realmente necesario.

    ResponderEliminar
  38. Hola se que no es el tema pero necesito ayuda, coloque el boton de facebook flotante pero no me manda al contenido simplemente me manda a una pagian de facebook pero necesito accesar para poder ver los comentarios; lo que quiero es que mande directo a ver el muro y todo lo demas, como el que tu tienes portro. Gracias por todas las aportaciones espero que me ayudes el blog es sebastiandelarosapelaez.blogspot

    ResponderEliminar
  39. Hola tengo una duda sobre mi blog y como no he visto nada para contactar con el potro ^^ es sobre como cambiar el color del texto de mi plantilla el general digo(comentarios, sidebar, y demas) k esta muy oscuro lo puedes ver aqui www.academygamer.com por favor esk no tengo ni idea por favor y gracias

    ResponderEliminar
  40. Gracias por el consejo Potro!.. Lo he cargado en la plantilla y me anda de maravillas. 0 km.
    Voy a empezar a desconfiar en los servers para cargar scripts. Igualmente hace rato que se colgaba justo en la parte de dropbox. Se tildaba unos 3-4 segundos mientras leía ese servidor y recién ahí aparecía el resto de los elementos. Para tener en cuenta.
    Saludos.

    ResponderEliminar
  41. Mundo Wull, al final de la URL de tu Facebook agrega esto: ?v=wall Si tuvieras más inconvenientes con ello deja el comentario en la entrada que corresponde.

    Luvodico Rey, sin duda siempre es mejor tener todo en la plantilla y no depender tanto de servicios externos.

    ResponderEliminar
  42. Hola Marko,

    Para cambiar el color general del texto del blog busca esta parte:

    body {
    background:#010810 url(http://1.bp.blogspot.com/_YXi3vp96gww/S9jWmmjsVcI/AAAAAAAAAYE/YKt_Ic6rz8c/s1600/background.jpg) top center no-repeat;
    color:#8E989F;

    Cambia lo que está en negrita por el código del color que deseas.
    Saludos.

    ResponderEliminar
  43. Hola de nuevo El Potro!

    Lo probe pero no funcionó, lo puedes mirar que no me lo ha cambiado y aora mismo tengo un color blanco puesto..lo que mas prisa me corre es cambiar el color de texto de los comentarios y del cuadro que tengo arriba justo antes de los post que se ve muy oscuro. Mira a ver si puedes echarme un cable por favor, tu que manejas esto tan bien =)

    Muchas gracias, un saludo!

    PD: por cierto tu pagina es la leche! me es de gran ayuda ^^

    ResponderEliminar
  44. Bien, entonces busca esta área y de nuevo cambia el código del color:

    #main-wrapper {
    color:#3C3D3F;

    Eso deberá cambiar el color de los comentarios y del gadget que tienes arriba.
    Saludos.

    ResponderEliminar
  45. gracias potro, vere si va en mi blog, aunqeu tengo tantas cosas que mi blog parece "vendedor de camioneta (pecera o bus)" XD

    ResponderEliminar
  46. Gracias Potro!! sirvioo! Muchas Gracias! =)

    ResponderEliminar
  47. nEjO, entonces sólo te falta ponerle un adorno de peluche y una cumbia al entrar al blog :D

    Marko, por nada ;)

    ResponderEliminar
  48. Potro, una pregunta, existe en Blogger opción para poner Palabras Claves o KEYWORDS?
    Saludos!

    ResponderEliminar
  49. Sólo agregando la meta-tag correspondiente a las keywords del blog.

    ResponderEliminar
  50. Potro tengo una pequeña consulta, creo que me saldre del tema pero acabo de cambiar el diseño a mi nuevo blogger y me gustaria que saliera la fecha en todos las entradas hay manera de hacer eso, y tambien que venga incluido debajo del mes el año.
    Este es mi blog: http://davidarquettefans.blogspot.com/

    ResponderEliminar
  51. Hay un script que permite mostrar la fecha en todas las entradas, puedes verlo en esta entrada de Rosa:
    http://elescaparatederosa.blogspot.com/2008/12/fecha-en-todas-las-entradas.html

    ResponderEliminar
  52. Hola Potro, tengo dos consultas, espero no molestarte porque ya me dà verguenza preguntar tanto.
    ¿Podrìa poner el gadget de buscar en este blog que dà blogger, en lugar del que està en la barra?
    y la segunda es que estoy un poco preocupada por el tiempo que tarda el bog en cargar, ¿sabes cuanto deberìa pesar para que sea òptimo?
    bueno espero no caer pesada:/ je
    saludos.

    ResponderEliminar
  53. Hola Mariangeles,

    No es ninguna molestia, al contrario :)
    No es posible agregar gadgets dentro de esa área ya que los gadgets de Blogger sólo funcionan dentro de determinadas áreas, fuera de ellas ni siquiera dejará guardar la plantilla.
    Desconozco si hay un tiempo exacto que debe ser el óptimo para la carga del blog, pero las veces que he entrado a tu blog (ahora lo acabo de hacer otras 2 veces más) ha cargado de manera rápida, no creo que tengas de qué preocuparte, al menos no por ahora.

    Saludos.

    ResponderEliminar
  54. Okis,Gracias por tomarte la molestia de fijarte Potro y por el dato de los gadget .
    Saludos :D

    ResponderEliminar
  55. Gracias Men!

    Me sirvio mucho.

    Saludos.
    p.s. tiene opcion de cerrar, pero... ¿si lo cierran como lo reabren? ok ok F5 ¿podrán las visitas recordar el F5?

    ResponderEliminar
  56. Cuando ingresen a toda entrada o sección del blog aparecerá de nuevo.
    Saludos.

    ResponderEliminar
  57. exelente yo lo hice transparente :D quedo muy bien tambien :D gracias Potro

    ResponderEliminar
  58. Amigo, como hago apra cambiar las traducciones, intente pero me amdna un error y no me deja guardarla.

    Quisiera cambiarle el de Frances por el Ingles

    ResponderEliminar
  59. Hola joex97, la barra ya tiene el traductor en inglés, no he entendido bien qué deseas cambiar.

    ResponderEliminar
  60. Hola Potro!!! Tanto tiempo que no hago lios en mi blog! jaja.Tengo una pregunta¿ Puede ser que haya por momentos algùn tipo de problema con la barra en el I.E? porque no abre mi blog por largo tiempo a veces ( ayer casi 1 hora), ya pasò varias veces ( en el firefox sì, se vè todo perfecto( y lo chequeè en los blogs de otros colegas que comentaron en esta entrada y pasa lo mismo :/ je
    Saludos :D

    ResponderEliminar
  61. Hola Mariangeles,

    En realidad no es un script muy pesado pues no está tan largo o alojado en otro sitio, que usualmente eso hace que los blogs tarden en cargar.
    Pero sí es un hecho que cualquier sitio tarda mucho más en abrir desde Internet Explorer, y por supuesto que también depende de qué tantas cosas haya en el blog, pues aun con un navegador más rápido una página puede tardar determinado tiempo en abrir dependiendo del número de gadgets, imágenes y scripts que tenga el blog.

    Al menos en el blog de pruebas lo abro desde Internet Explorer 8 y carga de inmediato.

    Saludos.

    ResponderEliminar
  62. Hola!! Interesante posteo, pero quisiera saber algo, solamente se vera la parte de abajo? o hay alguna forma de colocarlo en la parte superior o quiza en los laterales
    Gracias!!

    ResponderEliminar
  63. Claro Miwel, en el primer código donde dice bottom:0px; cambialo por top:0px; y el menú se pondrá en la parte superior del blog.

    ResponderEliminar
  64. exelente muchisimas gracias me sirvio de 10!!!!

    ResponderEliminar
  65. Potro hay alguna forma de colocar en esta barra el contador de visitas de blogger?

    ResponderEliminar
  66. Blogger no tiene gadget de contador de visitas pero sí puedes agregar cualquier contador web como se menciona en la entrada.

    ResponderEliminar
  67. ¡Hola, Potro!

    Muchas gracias por tus positivas orientaciones, pero cuando subí el código html para la barra de herramientas, me dice que me falta cerrar algo al final.

    Me gustaría que lo probaras de nuevo por si tiene algo que yo desconozco y debo ubicar.

    ¡Hasta pronto!

    ResponderEliminar
  68. Hola Redicom,

    El código está funcionando bien; verifica que estás copiando y pegando todo el código y que al hacerlo no estás eliminando algún otro código sin darte cuenta.

    Saludos.

    ResponderEliminar
  69. tengo problems... la barra cubre casi la mitad de mi blog, como le hago para hacerla mas chika? (delgada)

    ResponderEliminar
  70. es un blog que aun esta en costruccion jeje:

    http://cosplayersmexicanos.blogspot.com/

    ResponderEliminar
  71. Lo que sucede es que tu plantilla tiene estilos específicos y definidos para otras áreas que usualmente las plantillas no lo tienen.
    Prueba buscando y eliminando estas partes:

    img {margin:1.5em 1.5em 1.5em 0; max-width: 100%; /* not working in IE6*/}

    table {margin-bottom:1.4em;width:100%;}

    th, td, caption {padding:4px 10px 4px 5px;}

    Posiblemente no quede exactamente igual que a los demás pero deberá reducirse el tamaño, pero es por la razón que te mencioné anteriormente.
    Saludos.

    ResponderEliminar
  72. OHH!! ya quedo!! gracias!!

    ResponderEliminar
  73. no me sale u.u puede ser el formato de la plantilla que no me resulten muchas cosas como poner numeros a los comentario o esta misma barra :/

    ResponderEliminar
  74. Yo veo la barra funcionando perfectamente en tu blog o.O

    ResponderEliminar
  75. hola esto esta bien tengo una pregunta a esto sele podria agregar un reproductor de musica gracias

    ResponderEliminar
  76. No lo he intentado pero podrías probarlo, si es un reproductor pequeño probablemente sí se puede.

    ResponderEliminar
  77. Hola no me funciona el traductor sabrias decirme por que?

    Gracias!!1

    ResponderEliminar
  78. Si es en el blog 'La red en tus manos' el traductor sí funcione en los tres idiomas, acabo de probarlo.

    ResponderEliminar
  79. Si es en ese blog!
    Pero me sigue sin funcionar en ninguno de los exploradores que tengo FireFox, Internet explorer ni en Crome te dejo una captura
    https://lh6.googleusercontent.com/-wDNxe3jDHt0/TX6GekJhShI/AAAAAAAABoM/zEV5xKal8Os/s1600/Captura.PNG

    ResponderEliminar
  80. Pues no sé por qué a ti no te funcione porque yo lo sigo probando y traduce los tres idiomas sin problemas:

    http://i55.tinypic.com/35btouo.png

    ResponderEliminar
  81. Pues no lo se.....
    E estado probando el google traductor y no me traduce ninguna web ni tu blog ni nada :(

    De todas formas Gracias amigo!

    ResponderEliminar
  82. Entonces debe ser un problema con tu navegador o con tu equipo ;/

    ResponderEliminar
  83. Ya se a solucionado por el mismo..xD yo no e tocado nada y ahora si me funciona, mil Gracias!

    ResponderEliminar
  84. oye tengo una duda, ya la tengo en mi blog, funciona muy bien, pero e intentado cambiarle el color, pero no mas no puedo, me dirias que codigo maneja, o que le escribo?

    la intento cambiar a color negro o rojo, espero y me ayudes y no haberte molestado, de antemano gracias :D

    ResponderEliminar
  85. No es ninguna molestia ;)
    En donde dice color de la barra hay un código hexadecimal, ese es el código del color, si quieres conocer cuál es el código del color que quieres mira esta página:
    http://ciudadblogger.com/p/codigos-de-colores-rgb-y-hexadecimales.html

    ResponderEliminar
  86. me ocurrio algo raro la barra me quedo algo raro no se que hice mal la barra quedopero debajo de el bloger escondida solo se vesi vas al final del blog -.- si puedes ayudarme te agradesco sino la sacare no se que hacer este es mi blog para que veas para decirme que hacer espero respuesta muchas gracias http://sml--elpunchy--x3.blogspot.com/

    ResponderEliminar
  87. Es por el tipo de plantilla que usas que siempre tienen esos problemas.
    Primero busca esta parte dentro del primer código:
    height:35x;

    Y cámbialo por esto:
    height:35px;

    Luego debajo de ello agrega esto:
    z-index:100;

    ResponderEliminar
  88. Hola..........potro hice todo lo q decia.........pero no me sale la barra de herramientas flotante con opción de cerrar...........la barra de abajo si me sale.........q puedo hacer..............

    ResponderEliminar
  89. Pues en el blog de futbol veo perfectamente bien la barra o.O

    ResponderEliminar
  90. Quizá estás confundiendo el ejemplo, el tutorial de esta entrada es para que tengas la barra flotante azul que se ve en tu blog. Pero en el blog de pruebas también hay un aviso flotante que baja con la página, ese es un ejemplo de otro tutorial que puedes ver aquí:
    http://ciudadblogger.com/2010/04/aviso-flotante-de-suscripcion-al-blog.html

    Saludos.

    ResponderEliminar
  91. yayaya.........me puedes hacer un favor........este msj se me abre en cada entrada q abra en mi blog....como hago solo para q me salga cuando abran x 1era vez la pag....

    Como hago para enviarte el codigo, xq x aqui no deja enviar........

    ResponderEliminar
  92. Quizá usando cookies pero yo sobre el tema de los cookies no sé nada. En Oloblogger hay una entrada que habla sobre ello.

    ResponderEliminar
  93. Hola
    fijate q no me sale la barra flotante en mi blog te mando el link pa que lo mires e hice los pasos que tenia que hacer pero no me sale q hago??

    ResponderEliminar
  94. http://instituto-tecnolgico-taular.blogspot.com/

    ResponderEliminar
  95. oye fijate que si me sale pero no flotando sino que al final dela pagina
    que hago?? para arreglarlo??

    ResponderEliminar
  96. Lo que sucede es que cuando has puesto el primer código has eliminado una llave de cierre del código que estaba arriba y por eso no se ven los estilos de la barra y se queda abajo.
    Lo tienes así:

    .mobile-link-button a:link, .mobile-link-button a:visited {
    color: #ffffff;/* Barra de Herramientas
    ----------------------------------------------- */
    #ToolBar {

    Y debe ser así:

    .mobile-link-button a:link, .mobile-link-button a:visited {
    color: #ffffff;
    }
    /* Barra de Herramientas
    ----------------------------------------------- */
    #ToolBar {

    ResponderEliminar
  97. No, yo sólo puedo ayudarte a que lo hagas pero no puedo hacerlo por nadie.
    Siempre cuando pongas un código debes tener mucho cuidado de no eliminar nada más y que pongas sólo lo que se indica, ahora al ponerlo te ha faltado la primera diagonal.
    Si lo pones tal cual como es verás que no tendrás ningún problema.

    ResponderEliminar
  98. Hola Potro!! Estoy tratando de modificar la barra y quisiera que al lado del icono de --Rss feed-- hubiera uno de Subscripcion por mail. (con el link que da Feedburner de google_/Como el tuyo: http://feedburner.google.com/fb/a/mailverify?uri=CiudadBlogger)

    Para eso lo que hago como por "logica" es copiar la seccion de codigo que tiene la de --Rss feed-- y ya miro el blog y aparece doble ese icono.
    Ya donde dice href= pongo el link de subscripcion por mail, y al darle vista previa me dice que hay un error//--> no me di mañas de hacerlo y quisiera pedirte asesoria de como podria hacer para colocar el icono-link para subs X email.

    ( y si tenes tiempito quisiera poder cambiar los iconos que no se dejan, como el de twitter y facebook los demas si piden la direccion del recurso (icono.jpg)...como para no dejar la barra talcual no las das. Que no se vea el Copy and paste y ya...)
    http://losconceptos.blogspot.com (construyendo)

    ResponderEliminar
  99. Hola Jesus Segura,

    Quizá necesitas convertir a texto plano la URL del feed de suscripción.
    Lo de los iconos también se pueden cambiar, son URLs normales que están dentro del tercer código, ahí puedes localizar sus URLs y cambiarlas por la de los iconos que desees.

    Saludos.

    ResponderEliminar
  100. hola perdon por salirme del teme pero necesito saber como puedo hacer para que en una pagina web se puedan registrar la gente ayudame

    ResponderEliminar
  101. Blogger no tiene esa opción pues los usuarios no tenemos acceso al hosting para crear una base de datos.

    ResponderEliminar
  102. Buenos dias Potro
    Como puedo incluir este menu desplegable en la barra?.
    este es el codigo .

    es el que esta en
    http://tabloncentral2010.blogspot.com/

    Como veras la he puesto arriba y la estoy transformando como barra fija y abajo tengo la de wibiya
    Lo he incluido pero me sale un cuadradito en el que no se ven letras.
    este es el codigo DEFORMADO para que me lo admina el comentario


    < s elect name="menu" onchange="location=document.jump.menu.o ptions [document.jump.menu.s electedIndex].value;" value="GO"> 
    ** A R C H I V O **
    > TABLON CENTRAL 2009.
    > TABLON CENTRAL 2008.
    > TABLON CENTRAL 2007.

    ResponderEliminar
  103. Lo siento quise reprodudirlo pero no me admitio todos el codigo.

    Este es un menu muy antiguo que tengo.
    Otra consulta?.
    Se puede poner lateral ?.
    Es donde menos ocupa y donde hay mas espacio.
    Agradecido de antemano.
    Y agradecido por TODO LO QUE ME HA AYUDADO tus articulos, veras que hay muchas "intervenciones tuyas en mis blogs, que me han servido ademas de hacerlas ... de aprender.
    REPITO MUY AGRADECIDO.

    ResponderEliminar
  104. Seguramente sí se puede poner ese menú dentro pero quizá primero tengas que convertirlo a texto plano para que se pueda mostrar y no te dé ningún error.

    En la lateral no lo sé, nunca lo he intentado así que no podría asegurarte si es posible o no.

    Saludos!

    ResponderEliminar
  105. Buenas tardes Potro.
    Pues nada que no fui capaz.

    NO OBSTANTE , "todo mi gozo en un pozo", fui a cambiar un color en el diseñador de plantillas y se queda colgado el blog , "usease" que no puedes modificar nada de la plantilla por el diseñador , no te deja entrar a utilizarlo.

    ¿ sabes como se arregla ?.
    Agradecido de antemano

    ResponderEliminar
  106. Prueba eliminar cookies, historial y caché de tu navegador, si eso no lo arregla intenta hacerlo desde otro navegador.

    ResponderEliminar
  107. Buena tardes Potro.
    Efectivamente limpie el Chrome y no me deja entrar , en cambio si puedo con en el Firefox.
    aSI QUE VUELVO A PONERLA Y A UTILIZARLA.

    Muy agradecido por la amabilidad.

    Intente ingresarte por paypal y no pude ( problemas con mi cuenta)cuando lo tenga arreglado te ingresare para que te tomes unas cervezas a mi salud.

    Veo que mucha gente te pregunta sin haberse leido bien el articulo y menos los comentarios ...NO SE COMO TIENES TANTA PACIENCIA ...

    Seguro que ni siquiera cliquean en la publicidad de tu blog ... yo siempre lo hago , al menos asi recibes algo de google....

    Pues nada que me tienes maravillado por tu entrega ... y venga que cliqueen en los anuncios ...

    Por cierto cuando indiques que busquen algo pon entre parentesis asi (buscar con F3)yo al principio me dejaba las pestañas buscando los codigos .... hasta que en algun lado lo lei...

    ResponderEliminar
  108. Te agradezco mucho tu amable comentario y las buenas intenciones.
    Qué gusto que ya hayas podido solucionarlo. Si en Google no te deja entrar es por problemas que trae Blogger ultimamente, será cuestión de unos días más para que se regularice por completo el servicio y se acaben esos problemas.

    Un saludo!

    ResponderEliminar
  109. Hola, Potro Tengo una duda:
    Como le Cambio el favicon de Blogger Por uo personalizado O propio a mi blog??

    ResponderEliminar
  110. Hola José Enamorado, en esta entrada se explica cómo ponerlo:
    http://ciudadblogger.com/2011/06/cambiar-el-favicon-del-blog-ahora-desde.html

    ResponderEliminar
  111. Bueno aquí estoy de nuevo...lo que me preguntaba es como poner una imagen de fondo Tal vez estoy mal pero creo que es cambiendo el Color del Fondo donde dice: "background:#CEE3F6;" y poner este para que se ponga la imagen "background:Aquí la URL de la Imagen;" si estoy mal en esto ayudame.Te lo Agradezco..Otra Cosa ¿Eres de México?

    ResponderEliminar
  112. Caliente, caliente. Sí se le cambia ahí, pero la forma correcta sería así:
    background:url(URL de la imagen);

    P.D. De mero Tijuana :)

    ResponderEliminar
  113. Uf! Casi le atino jojojo...Eso quería Gracias (Casi por nda el apodo del Potro) Yo soy de B.C.S Cd. Constitución mucho más abajo de Tijuana.

    ResponderEliminar
  114. hola tengo una duda esta fuera del tema pero quiero saber como modificar mi plantilla y hacerla que no parezca Blog de blogger ???

    ResponderEliminar
  115. Depende qué le quieras modificar. En el menú de aquí verás muchas categorías, desde lo más básico a cosas más complejas.
    Igual puedes usar una plantilla que ya tenga todo el aspecto que deseas.

    ResponderEliminar
  116. hola @El Potro muy bueno el post pero tengo una inquietud ya ise todo lo que dice pero me dice que la etiqueta "div" esta mal cerrada pero yo veo que todo esta bien y no se por que me sale eso.. me podrías ayudar?!

    ResponderEliminar
  117. Hola bayron,

    Posiblemente al ponerlo o al hacer alguna personalización al código de la barra eliminaste algún caracter o etiqueta sin querer.
    Prueba de nuevo, pero esta vez hazlo uno por uno, es decir, pega uno de los códigos y guarda, sino te da error continua con el otro y así.
    No personalices nada, hazlo hasta que veas que se ha guardado todo sin problemas.

    Saludos.

    ResponderEliminar
  118. Hola El Potro aprovecho para decirte que intento suscribirme al feed pero la pagina causa un error de alguna manera y no carga bien y le doy a la opción de suscripción y me parece este erro "404 Not Found"...
    Solo me pasa a mi o que?!
    Gracias!"

    ResponderEliminar
  119. ¿Te refieres a tu blog? ¿En dónde lo has puesto?

    ResponderEliminar
  120. No me refiero a mi blog... me refiero a este blog!!! "http://ciudadblogger.com"

    ResponderEliminar
  121. Bueno ahora ya logre suscribirme a la pagina :) pero no se por que me salia ese error O.o!

    ResponderEliminar
  122. Quizá andaba fallando Feedburner (?)

    ResponderEliminar
  123. Hola, primero que todo muchas gracias por tus tutoriales y ayuda porque me han servido bastante a la hora de montar mi blog, pero tengo una duda con respecto a esta barra.
    Por mas que me esmero en poner la barra, no se muestra el 100% de ella solo un poco, mas arriba preguntaron como subirle el alto para que quede como debería pero aun así se ve igual.

    mi blog es http://elociodelblack.blogspot.com

    espero que tengas tiempo y ganas para poder ayudarme saludos y de nuevo muchísimas gracias por todo.

    ResponderEliminar
  124. Hola Black,

    He entrado a tu blog y veo la barra bien colocada. Lo que puede suceder es que quizá el monitor donde la has visto es de baja resolución, o bien, que lo has visto en una ventana muy reducida, pero si pones la ventana del navegador a un tamaño considerable verás que la barra se aprecia perfectamente bien.

    Saludos.

    ResponderEliminar
  125. gracias por postear esto men vita mi blog y calificalo http://sonacero360.blogspot.com

    ResponderEliminar
  126. ey potro podrias ayudarme. la barra se queda hasta abajo :( mi blog es http://otakuarts.blogspot.com

    ResponderEliminar
  127. Hola Blaze,

    Lo que pasa es que, más arriba un código en lugar de cerrarlo con una llave de cierre lo cerraste con un paréntesis:

    #PageList1 {
    font-size: 13px;
    font-family: Charcoal, Chicago, sans-serif;
    )

    Eso hace que todo lo que esté debajo no funcione. Corrígelo y verás que todo lo demás deberá verse bien.

    ResponderEliminar
  128. perdon x tardar en contestar, ya funciono gracias potro :D

    ResponderEliminar
  129. Descuida Blaze, qué bueno que te ha funcionado ;)

    ResponderEliminar
  130. potro elegante post.
    pero este tolbar se puede poner en la parte de arriba del blog, en vez de abajo asi como la del facebook?

    ResponderEliminar
  131. Claro Carlos, sólo cambia donde dice bottom:0px; por top:0px;

    ResponderEliminar
  132. Ecxelente Potro.

    por otro lado en esta barra nose peude colocar como un menu, que uno lede clic a una flechita y le dezpliege mas opciones, pero que no sea deslizante. me gustaria hacerlo asi muchas gracias espero respuesta :D aaa y como puedo poner una flechita asia abajo en la barra pero que muestre artas banderitas de paises para traducir. :P perdona las molestias

    amigo potro =D

    ResponderEliminar
  133. Sí puedes hacerlo, sólo es cuestión de que busques el menú que quieres y se lo integres, en la red hay varias opciones sólo tienes que decidirte por el que quieras y agregarlo a la barra de herramientas.

    Saludos!

    ResponderEliminar
  134. potro te molesto de nueva cuenta, ya coloque la barra en mi blog http://tuxpannoticias.blogspot.com/
    la bronca es que no se ve la barra, queda de tras del contenido del blog, a no ser que llegue hasta el final del contenido, en donde no tengo nada y es ahi donde ya se pueden dar click en los botones, no se que fue lo que este mal, pero espero me puedas ayudar, como en tantas veces que lo as hecho, te agradesco, un saludo, espero respuesta, esta vez no te quise molestar por twitter... gracias :D

    ResponderEliminar
  135. Hola buen día,

    Debajo de #ToolBar { agrega esto:
    z-index:100;

    Con eso se solucionará. Saludos.

    ResponderEliminar
  136. Magazo... +10000.... funcionando a la perfección, una duda, creo que de ello ya te había comentado, mi pagina esta lenta, o por lo menos eso me dicen los usuarios, a que se debe?

    ResponderEliminar
  137. Puede ser por la cantidad de gadgets o scripts que tengas, por el número y tamaño de imágenes, es decir, por todo lo que tengas en el blog.

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

    ResponderEliminar
  139. en mi codigo htlm no encuentro la etiqueta < / bo dy > me podrias ayudar saludos lo publique por espacios porque no me permitia la etiqueta del codigo publicar bue saludos

    ResponderEliminar
  140. Todas las plantillas tienen esa etiqueta. Para que te sea más fácil localizarla usa las teclas CTRL+F y ahí escribe la palabra que buscas.

    ResponderEliminar
  141. gracias amigo potro por tus explicaciones y por los ejemplos que nos compartes igualmente solo quiero compartir contigo y con todos los lectores de esta gran pagina lo siguiente:

    si ustedes toman esta barra y lo que necesitan es colocar de modo que sea transparente dentro de nuestro blog solo copien lo siguiente este código que les muestro da la opción de que nuestra barra sea transparente:


    /* Barra de Herramientas
    ----------------------------------------------- */
    #ToolBar {
    background:#cccccc; /* Color de la barra */
    border-top:1px solid #990000; /* Color del borde superior */
    margin: 0;
    bottom:0px;
    right:0;
    width: 100%;
    height:35px;
    overflow: visible;
    position: relative;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    -khtml-opacity: 0.7;
    }



    espero sea de sua yuda y si alguien lo necesita esta para ustedes un saludo y los espero dentro de mi blog www.bloggayuda.blogspot.com.

    ResponderEliminar
  142. Potro, puedo agregar los botones ir arriba y abajo con efecto deslizante en esta barra? muchsa gracias por el aporte

    ResponderEliminar
  143. Joel Alvarez, igual puede ponerse una imagen semi-transparente, para que los estilos CSS de transparencia no se apliquen a todos los elementos que haya dentro de la barra :)
    Gracias y saludos!!

    ResponderEliminar
  144. Claro, sólo agrega un bloque más en la barra como se indica en la entrada, y en color naranja pon el código de los botones. Sólo que al código de los botones tendrás que quitarle los estilos, es decir, algo como esto:
    style='position:fixed; bottom:0; right:0;'

    ResponderEliminar
  145. si potro lo acabo de hacer, date una vuelta por mi blog y me dices que tal me quedo, http://toxicosm.blogspot.com/
    saludos potro y buen día...

    ResponderEliminar
  146. otra cosa, descrubrí que cuando pongo la barra desaparece la caja de facebook (fanpage, algo asi, no se porque me pasa eso... saludos

    ResponderEliminar
  147. Es porque el botón de Compartir que pusiste ya es bastante antiguo e incompatible con muchos gadgets de Facebook. Pon el botón Me gusta que tiene la misma función y no causa esa incompatibilidad:
    http://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html

    ResponderEliminar
  148. si lo agregue en mi primer prueba, y estuve buscando el boton compartir y tu lo tenias, ya que el boton me gusta no sale en la barra, lo intente y lo intente pero no sale ne la barra aunque cambie de posición su codigo, creo que es porque se repite varias veces, ya que lo tengo en la cabecera del blog, y en las entradas, de seguro debo de sacar uno de esos dos, no te parece?

    saludos potro

    ResponderEliminar
  149. No. Es porque si el botón Me gusta lo pones en esas áreas entonces primero debes convertir el código a texto plano:
    http://ciudadblogger.com/p/conversor-de-html-texto-plano.html

    ResponderEliminar
  150. no, no lo soluciona, solo hace más largo la barra y aparece una scroll de desplazamiento. saludos

    ResponderEliminar
  151. gracias potro y como me comentas es posible hacerlo de esa manera colocar una imagen semi transparente opte por colocar la opcion por que aveces deseamos tener una barra que no se note tanto y nos reste visibilidad asi que la manera del codigo puede ser buena opcion pero como lo indicas es bueno contar con varias maneras para diferentes publicos un saludo...

    ResponderEliminar
  152. Chiknaui.Mikistli, no lo veo puesto, pero lo que sí miré es que este código lo tienes muchas veces:
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    Ese sólo tienes que ponerlo justo después de <body> una vez y ya.
    Una vez que lo tengas puesto ahí ya no es necesario agregarlos en todos los plugins de Facebook que tengas.

    ResponderEliminar
  153. Joel Alvarez, completamente de acuerdo :)

    ResponderEliminar
  154. lo que me acabas de comentar no lo sabía, muchas gracias y lo del boton ya me di por vencido, no se puede agregar, en fin yo creo que esta bien as, gracias potro te agradesco la atención prestada.
    ;)

    ResponderEliminar
  155. buenos dias potro otra vez yo quiero colocarle los botones de cambiar idioma pero no que al darle clikc me habra una ventana nueva sino que en el mismo blog me lo pase al idioma que selecciones dime se puede hacer

    ResponderEliminar
  156. Buenos días,

    Para que la traducción se abra en la misma ventana, agrega con mucho cuidado, después de esta parte:
    ie=UTF8&quot;

    Esto:
    ,&#039;_parent&#039;

    Eso deberás hacerlo en los tres códigos de las traducciones.

    ResponderEliminar
  157. TEMPLATE ERROR: invalid data reference post. url: No dictionary named: "post" in : [blog]

    cabe destacar que lo estoy implementando para compartir las entradas solamente, saludos espero puedas ayudarme

    ResponderEliminar
  158. ¿Pero cuál código fue el que te dio ese error? ¿el que te dije en el comentario #165 o cuál?

    ResponderEliminar
  159. No cuando pongo el boton de facebook con contador, ya que el boton share que tiene la barra es muy antiguo y genera conflictos con los demás plugins de face book, ya he intentado cambiar el codigo del plugin como me lo dijo, y ya utilize el conversor de html a texto, espero pueda usted modificar la barra incluyendo el boton me gusta actual de face book...

    un abrazo señor y disculpe las molestias

    ResponderEliminar
  160. No es ninguna molestia. Ponlo así, pero será para compartir el blog, no la entrada:

    &lt;iframe allowTransparency=&#39;true&#39; frameborder=&#39;0&#39; scrolling=&#39;no&#39; src=&#39;http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&amp;layout=button_count&amp;show_faces=false&amp;width=132&amp;height=30&amp;action=like&amp;font=tahoma&amp;colorscheme=light&#39; style=&#39;border:none; overflow:hidden; width:132px; height:30px&#39;&gt;&lt;/iframe&gt;

    ResponderEliminar
  161. gracias por el código pero quisiera uno que compartiera las entradas, hice un comentario en las entradas flotantes para compartir entradas, y quería ponerlos en el centro y me dijiste:

    Puedes cambiarlos de posición modificando:
    top:150px;
    left:5px;


    pero quisiera alinearlos como la barra, no se si puedes ayudarme en ese aspecto.. saludos desde México

    ResponderEliminar
  162. Los que comparten las entradas no pueden estar dentro del BODY como es el caso de la barra de herramientas, esos siempre tienen que estar colocados en el área de las entradas, por eso te mencionaba que sería para darle 'Me gusta' al blog en general.
    Si usas los que son flotantes, esos ya están dentro del área de las entradas, así que sólo tienes que cambiarlos de posición, por ejemplo, esto:
    top:150px;
    left:5px;

    Por esto:
    bottom:0px;
    right:0px;

    Pero son dos elementos aparte, no son parte de la barra de herramientas, aunque se encimarían a ella.
    Saludos.

    ResponderEliminar
  163. muy bueno.. lo probare en mi blog de pruebas.. y luego lo añadire a mi blog pero para darle uso como Barra de Menu

    ResponderEliminar
  164. ke tal potroo, kisiera saber como poner estos botones ke tengo en mi we, debajo de las entradas, y kitarlas del inicio, te dejo mi web pa ke lo veas, http://flowprprueva.blogspot.com/ , como veras estan los botones en cada cuadrado, y entrando a las entradas, los botones estan debajo del titulo, como aria pa ke se kite del inicio, y ke aparesca debajo de cada entrada, osea al final??

    ResponderEliminar
  165. Encierra los códigos de esos botones con una condicional para que se muestren sólo en las entradas individuales:
    http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

    ResponderEliminar
  166. como puedo hacer para que la barra se kede en la parte superior del blog... en vez de abajo

    ResponderEliminar
  167. Hola Potro!agregue una imagen de fondo a la barra,segui las indicaciones que das en el comen.#120, pero que deberian agregar para que esa imagen no se repita?
    saludos!
    gracias

    ResponderEliminar
  168. imeaburro, mira el comentario #67

    ResponderEliminar
  169. Cocofansclub, para que no se repita se le agrega no-repeat
    Quedaría así:
    background:url(URL de la imagen) no-repeat;
    Saludos!

    ResponderEliminar
  170. Muchas Gracias por tu ayuda!
    Saludos!!

    ResponderEliminar
  171. Vuelvo a molestarte!sigo armando mi barra,intento agregar otro elemento se trata del FeedCount pero no me permite pasarlo al español cuando cambio anim=0' por anim=0&label=lectores" me da error al cerrar la plantilla ,podrias verlo?
    http://videoscoco2009.blogspot.com/
    muchisimas gracias!
    saludos

    ResponderEliminar
  172. Prueba convertir a texto plano el código o la URL que te dé problemas:
    http://ciudadblogger.com/p/conversor-de-html-texto-plano.html

    Saludos.

    ResponderEliminar
  173. estimado potro deseo trasladar esta barrita a una web en html5 todo bien.. pero con los pasos un poco cambiados me ha quedado detras la barra de herramientas detras de la portada mejor echale una mirada.:. si me puedes echar una mano vendria muy bien saludos

    ResponderEliminar
  174. Respuestas
    1. Hola Dexter,
      Debajo de #ToolBar { agrega:
      z-index:10;

      Con eso se pondrá encima de todo.
      Saludos.

      Eliminar
  175. Gracias por tu pronta respuesta, ahora me da otro error de estetica al parecer la barra agrando la ventana de la web y se corre más ancha del diseño de la pagina, otra cosa queda un poco elevada. (hay un espacio) entre el tope final de la pagina y la barra como bajo la barra para que se alinie con la web. saludos ya te he linkeado

    ResponderEliminar
    Respuestas
    1. Hola Dexter,
      La barra ocupa el 100% del ancho del navegador, por lo que si la haces más grande la barra buscará ocupar el ancho.
      Ese espacio que se ve debajo es porque has quitado la propiedad del height. Ponlo así:
      height: 68px;

      Saludos.

      Eliminar
  176. hola potro, realize los cambios q me comentastes.. pero la barra queda muy por debajo de la linea del navegador.: me podrias ayudar a ponerla en su lugar. .. gracias de ante mano

    ResponderEliminar
    Respuestas
    1. Juega con el valor del height para que quede como deseas.

      Eliminar
  177. Hola potro esta muy bueno eso jeje

    tengo una preguntita le quise agregar un chat con el efecto spoiler (ciudadblogger.com/2011/04/spoiler-para-ocultar-y-mostrar.html) en la barra salio todo bien exepto que en ves de aparecer el chat afuera me aparece adentro de la barra que puede estar pasando ? http://sjapalermo.blogspot.com

    ResponderEliminar
    Respuestas
    1. El spoiler despliega el contenido hacia abajo, dentro de su propio contenedor, así que es normal que lo muestre dentro de la barra. Para mostrarlo por fuera supongo que se necesitaría de algo más avanzado, pero ahora no se me ocurre nada :/

      Eliminar
    2. ok gracias igual si se te ocurre algo este es mi eMail aloquede.web@hotmail.com


      :D

      Eliminar
  178. Soy fiel seguidor de esta pagina últimamente, la he puesto In yo mismo siguiendo los consejos que aquí se dan... Es #1....Gracias! www.carlosgabriel.net

    ResponderEliminar
  179. Y si no quiero que la barra se cierre como le hago?

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Carlos :)
      Si no quieres que se cierre sólo quita el código del ícono que es el que tiene la función de cerrar:

      <img border='0' class='cerrar' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_dsEG33PDaHw/TN8UsPkB8VI/AAAAAAAAAdY/zs77UsJStFE/s1600/close.gif' title='Cerrar esta barra' width='19'/>

      Eliminar
  180. Hola El Potro, como puedo hacer una barra como la que tiene este blog: http://www.todoblogger.com que cuando bajas aparece una barra arriba y cuando subes desaparece?
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Josep-Pepe, tendrías que preguntarle al dueño de ese blog, él sabrá decirte qué método usó.

      Eliminar

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.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger