Botón de compartir de Twitter que muestra los avatares

23 de febrero de 2011 117 comentarios ,

Cargando..
A veces aunque tengamos en el blog el botón de compartir de Twitter parece no ser suficiente pues muchos no se animan a compartir la entrada aun cuando ésta sea interesante para el lector. Así que quizá tengamos que recurrir a tentar la vanidad de nuestros lectores con este botón para compartir de Twitter que muestra los avatares de aquellos quienes han compartido la entrada.
Este animado y divertido botón es una idea desarrollada por More Tech Tips y está basado en jQuery apoyado en la API de Topsy.

Se muestra sólo al ingresar en la entrada y una vez que el lector retwittea el post su avatar aparecerá en en el botón junto con el de los demás lectores que lo han rettwiteado. Puedes hacer la prueba en esta misma entrada para verlo funcionando.

Para agregar este botón de compartir de Twitter entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;div.who-tweet-2&#39;).whoTweet({
nick:&#39;usuario&#39;
,url:&#39;&#39;
,tweet_tip:1
,animate:&#39;height&#39;
});
});
</script>

Cambia lo que está en color rojo por tu nombre de usuario de Twitter y luego antes de
]]></b:skin> pega esto:
div.topsy_widget_data{overflow:hidden;}
div.topsy-big{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
width:50px
}
a.topsy-big-total,a.topsy-big-total-badge{display:block;}
div.topsy-big a,div.topsy-big a:visited,div.topsy-big a:hover{
text-decoration:none;}
a.topsy-big-total,a.topsy-big-total-badge,a.topsy-big-total:visited,a.topsy-big-total-badge:visited{
color:#333!important
}
span.topsy-big-count{
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2!important;
text-align:center!important;
padding:5px 0!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
}
a.topsy-big-total:hover,a.topsy-big-total-badge:hover{color:#D70!important;}
span.topsy-big-num{
display:block;
line-height:15px!important;
font-size:15px!important;
font-weight:bold!important
}
a.topsy-big-total:hover span.topsy-big-num,a.topsy-big-total-badge:hover span.topsy-big-num,a.topsy-big-total:hover span.topsy-big-unit,a.topsy-big-total-badge:hover span.topsy-big-unit{color:#D70!important;}
a.topsy-big-total-badge span.topsy-big-count{
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
border-bottom:none!important
}
span.topsy-big-unit{
font-size:10px!important;
line-height:10px!important;
display:block
}
span.topsy-big-badge{
display:block;
font-size:9px!important;
line-height:9px!important;
font-weight:bold!important;
background:#8F8F7C url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border:1px solid #8F8F7C!important;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
padding:2px 0!important;
text-align:center!important;
color:#FFF!important;
text-shadow:#75755a 1px 1px 0!important
}
a.topsy-big-total-badge:hover span.topsy-big-badge{
background-color:#ff8700!important;
border-color:#ff8700!important;
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important
}
span.topsy-big-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-big-retweet,a.topsy-big-retweet:visited{
display:block;
margin-top:2px!important;
text-align:center!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
font-size:11px!important;
line-height:16px!important;
padding:0!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important;
color:#FFF!important
}
a.topsy-big-retweet:hover{
background-color:#1B73CC!important;
border-color:#1B73CC!important;
color:#FFF!important
}
a.topsy-big-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
div.topsy-sm{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
height:18px
}
div.topsy-sm a{
display:block;
float:left;
padding:0 3px!important;
line-height:16px!important;
border-style:solid!important;
border-width:1px!important;
-webkit-border-radius:3px!important;
-moz-border-radius:3px!important;
margin-right:1px!important
}
div.topsy-sm a,div.topsy-sm a:hover{text-decoration:none!important;}
a.topsy-sm-total,a.topsy-sm-total:visited{
font-weight:bold!important;
color:#333!important;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x bottom left!important;
border-color:#E6E7E2!important;
font-size:14px!important
}
a.topsy-sm-total:hover{
color:#D70!important;
background-color:#f2e8dc!important;
border-color:#f2e8dc!important
}
a.topsy-sm-total:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
a.topsy-sm-badge,a.topsy-sm-badge:visited{
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important;
background:#D70 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#D70!important;
font-size:9px!important;
font-weight:bold!important
}
a.topsy-sm-badge:hover{
text-shadow:#C46900 1px 1px 0!important;
background-color:#F78400!important;
border-color:#F78400!important;
color:#FFF!important
}
a.topsy-sm-badge:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-sm-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-sm-retweet,a.topsy-sm-retweet:visited{
margin-right:1px!important;
font-size:11px!important;
font-weight:normal!important;
color:#FFF!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important
}
a.topsy-sm-retweet:hover{
background-color:#358de5!important;
border-color:#358de5!important;
color:#FFF!important;
text-shadow:#369 1px 1px 0!important
}
a.topsy-sm-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-big-count-wtb{
position:relative;
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2;
text-align:center;
padding:0;
-moz-border-radius:3px;
-webkit-border-radius:3px
}
a.topsy-big-total-badge-wtb{
position:absolute;
z-index:10;
bottom:0px;
left:1px;
background:white;
opacity:0.8;
filter:alpha(opacity=80);
width:44px;
border:gray 1px solid
}
a.topsy-big-total-badge-wtb,a.topsy-big-total-badge-wtb:visited{
color:#333
}
a.topsy-big-total-badge-wtb:hover{color:#D70;}
span.wtb{
display:block;
width:47px;
height:47px;
overflow:hidden
}
span.wtb img{padding:0 !important;}
span.wtb a{
display:block;
float:left;
}

Por último marca la casilla Expandir plantillas de artilugios y busca esta línea:
<div class='post-body entry-content'>
Justo debajo de ella agrega este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='who-tweet-2' style='float: right; padding:5px;'>Cargando..</div>
</b:if>
Y listo, con eso ya tendrás tu botón de Twitter que mostrará los avatares de quienes comparten la entrada.


Ahora sólo hay que tomar en cuenta que el botón sólo aparecerá en las entradas, no en la portada del blog.
Además, en algunas ocasiones puede tardar un poco en aparecer el avatar de quienes twittean la entrada, eso depende básicamente de la API de Topsy así que no hay que desesperarse si en ocasiones tarda un poco más en aparecer el avatar.



117 comentarios en:

" Botón de compartir de Twitter que muestra los avatares "

  1. Hola que tal,

    me gustaria aportar algo, creo q si se puede mostrar en la pagina de inicio y no solo en las entradas lo unico q hice fue quitar

    b:if cond='data:blog.pageType == "item"'>

    que especifica q lo qeremos solo en las entradas y el codigo me qdo asi

    div class='who-tweet-2' style='float: right; padding:5px;'>Cargando../div>

    y en vez de ponerlo debajo de

    div class='post-body entry-content'>

    lo puse debajo de

    div class='post-header-line-1'/>


    Solo es una acotacion.. a mi me servio espero q a uds tambien :D


    NOTA:
    tengan en cuenta que el formulario de comentarios no deja publicar la etiqueta DIV, por lo que en alguno de los códigos q publique deben abrirlos o cerrarlos con < >


    Saludos.

    ResponderEliminar
  2. oye no me encuentra el codigo

    <·div class·='post-·body entry·-conten·t'>

    solo este

    <·div class·='pos·t-body'·>


    puede ser ese??

    mi blogs de test es este:

    http://bajakifull.blogspot.com/

    OBS: perdon por poner · , xq no acepta HTML en el comentario.

    ResponderEliminar
  3. Dj_Hrod, esa condicional se la agregué a proposito para que sólo se muestre en las entradas, ya que si un botón de este tipo está en la portada y se comparte desde ahí entonces no funcionan los avatares, además que si ya hubieran personas que retwittearon la entrada entonces no se verán esos avatares si el botón se muestra en la portada, es por eso que metí ese código par evitar esos problemas.

    ResponderEliminar
  4. J-Iresponsable, no conozco esa plantilla pero puedes probar ponerlo ahí, digo, con probar nada se pierde ;)

    ResponderEliminar
  5. no me funcionoo. tanto queria poner eso.!!

    ResponderEliminar
  6. Excelente, me quedo de perlas el botón, muchas gracias!!!

    ResponderEliminar
  7. AHHH ok ok no sabiaaa esoooo :O

    lo corregiree

    GACIAS. :D

    ResponderEliminar
  8. rudii, no veo que tengas el código del botón y sin él puesto obviamente no funcionará.
    Si no encuentras esa línea puedes ponerlo debajo de:
    <div class='post-header-line-1'>

    ResponderEliminar
  9. funcionando en mi web www.lockerzlatinos.com :D

    ResponderEliminar
  10. al parecer ahi un problema con el boton le deoy retweet y no carga completamente la web en twitter

    ResponderEliminar
  11. No es el botón, es Twitter que como muchas otras veces anda saturado en el servicio.

    ResponderEliminar
  12. perdón que me salga del tema potro, pero te quiero agradecer por tu conversor de texto plano, te quedo muy bien eres un genio

    ResponderEliminar
  13. Gracias lerh aunque aun le faltan unas mejoras ;)

    ResponderEliminar
  14. Potro esta genial! pero hay unos problemas! ya que la url no se acorta como es necesario en twitter! te digo por esto, en este caso probé :

    ¡Oh no! Tu Tweet es más de 140 caracteres. ¡Trata de hacerlo más corto!

    Cuando quize publicar esto:

    RT @Franco_PC: Fuente de graves conflictos familiares ~ PLANO INFANTIL | Pasión por los niños http://planoinfantil.blogspot.com/2010/12/fuente-de-graves-conflictos-familiares.html

    ResponderEliminar
  15. Efectivamente el sistema no tiene incluido un acortador, pero igual se puede reducir el texto del tweet manualmente e incluso algunas veces Twitter lo acorta por sí solo.

    ResponderEliminar
  16. POTRO ES URGENTE :| .. mi plantilla no guarda los cambios :| , que sera? porfavor ayudame :(

    ResponderEliminar
  17. - [F]asteN [M]ovieS - Yo tambien ando así quiza sea un error de blogger que seguro pronto resolverán

    ResponderEliminar
  18. potro ¡AYUDA¡ ALGUIEN SABE PORQUE NO SE PUEDE SUBIR O MODIFICAR O TENER VISTA PREVIA DE LAS PLANTILLAS DESDE EL AREA DE - DISEÑO - EDICION HTML - INTENTO CAMBIAR UNA PERO BLOGER NO PERMITE HACER NADA.

    ResponderEliminar
  19. Black si nose que sera.. ojala se pueda solucionar.

    Potro, muchas gracias por la noticia. Ahora estoy mas tranqui.. pense que era solamente yo jaja.

    ResponderEliminar
  20. Gracias potro nos toca esperar a que se restablesca al 100% el servicio SALUDOS

    ResponderEliminar
  21. no esta funcionando la edición html en blogger alguien sabe x que hoy 24/feb/2011 o solo es en mi ordenador ????... esa era mi pregunta!! pero viendo los comentarios me di cuenta que no es mi ordenador :P

    ResponderEliminar
  22. Bueno Potro ahora si twitter esta acortando la url! =D

    ResponderEliminar
  23. Quiero redondear las puntas en la plantilla de mi blog y no sé como hacerlo ¿me ayudarías?
    Gracias.

    ResponderEliminar
  24. Hola potro muy buen post pero quisiera preguntare algo que no tiene que ver con esta entrada...¿se puede poner widgets que solo aparezcan en las etiquetas ?
    se que existe el post de ponerlas en la pag principal.

    grax desde ya

    ResponderEliminar
  25. Esta caido el editor HTML 2/25/2011 por la manana
    solo se puede trabajar con los gadgets

    ResponderEliminar
  26. Bren, ¿en cuál blog?


    Dex/Jcs, en todas las etiquetas de manera general no, en ese caso se tiene que agregar una condicional por cada etiqueta.


    PeliculasTube, ya está resuelto ese problema.

    ResponderEliminar
  27. grax potro es justo lo que quería brother grax

    ResponderEliminar
  28. Hola potro. Como le puedo hacer para poner un widged de categorías o algo así. Ya tengo uno que lo hice con las etiquetas pero me gustaría poner otro aparte para que haya dos, una que diga "categorías" y otro "clásicos" o algo así. Espero puedas ayudarme.
    Saludos Muy buen blog.

    http://rockclasico1.blogspot.com

    ResponderEliminar
  29. oye potro que es eso del lorem ipsum? es que lo veo por todas partes y no se que es...

    ResponderEliminar
  30. Que sera entonces, mi blog sigue sin funcionar para editar el html, ni expande artilugios

    ResponderEliminar
  31. POTRO AUN NO PUEDO CAMBIAR DE PLANTILLA SOY DE MEXICO, TU SABES QUE SUCEDE PORQUE SEGUN ESTO YA ESTABAN HABILITADOS LOS CAMBIOS PARA MEXICO,

    SOLO PUEDO CAMBIAR LA PLANTILLA PERO POR LAS QUE ESTAN EN EL DISEÑADOR DE PLANTILLAS DE BLOGGER Y POR LAs QUE HE DESCARGADO NO, DICEN QUE CON GOOGLE CHOROME SI SE PUEDE HACER ESO ALGUIEN QUE LO TENGA INSTALADO LO PUEDE VERIFICAR O SERA PURO CHORO-ME-N JEJE ¡ESPERO RESPUESTA¡ SALUDOS

    Marina Lorem Ipsum :)= http://www.google.com.mx/search?hl=es&biw=1024&bih=605&defl=es&q=define:Lorem+ipsum&sa=X&ei=SxdoTZvMOsjSgQf-qonMCg&ved=0CBEQkAE

    ResponderEliminar
  32. Emilio, de la misma manera que agregaste ese gadget de etiquetas puedes agregar otro más o los que quieras, no hay problema con que se trate del mismo gadget.

    Saludos.

    ResponderEliminar
  33. PeliculasTube, Xtrem,

    Aunque en México y Estados Unidos ya está resuelto el problema hay que esperar a que los cambios se apliquen al resto de los países, y en el caso de quien tiene resuelto algunos problemas a medias hay que seguir esperando hasta que Blogger anuncie de manera oficial que ya está resuelto al 100%

    ResponderEliminar
  34. broh! se quedó pegado en "cargando.." eso es normal al principio??

    de antemano agradezco sus tip's! broh!

    saludos

    ResponderEliminar
  35. Hola Potro
    Sabes cómo colocar el pajarito de Tweeter colando por el blog?
    Gracias

    ResponderEliminar
  36. G-NoZiDe, no, no es normal. Quizá es porque tienes repetido el script de jQuery. Prueba eliminando esta línea:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

    Aparece dos veces pero sólo elimina una de ellas, cualquiera.

    ResponderEliminar
  37. Hola Soraya,

    Nunca lo he probado pero en Oloblogger explican cómo hacerlo:
    http://oloblogger.blogspot.com/2010/11/mas-vale-pajaro-volando-que-ciento.html

    ResponderEliminar
  38. Gracias Potro. Sigue asi con tu blog, eres de mucha ayuda. :)

    http://rockclasico1.blogspot.com

    ResponderEliminar
  39. Muy bueno el tutorial!
    Te pido un pequeño tutorial para adaptar éstas pestañas en blogger porfavor:
    http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

    Un saludo :D

    ResponderEliminar
  40. excelente!! jaja solucionado...

    ahora si me puedes ayudar con transparencias en las columnas!! ya ke lo he buscado harto en su blog pero no lo encuentro...

    Saludos broh!
    Thankz!

    ResponderEliminar
  41. Yo vivo en Estados Unidos todavia no se resuelve el problema aca,ni modo habra que esperar

    Saludos a todos

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

    ResponderEliminar
  43. PeliculasTube, haz intentado con descargar la plantilla completa en su pc? y editarlo con algún programa... yo uso el Wordpad de windows (7), ya que, yo tampoco puedo editar la planilla en linea...

    así ke lo descargo lo edito.. lo guardo.. y después lo subo! y ningún drama...

    espero ke te sirva...

    Saludos

    ResponderEliminar
  44. Mathias, aquí hay un tuto sobre ello:
    http://elescaparatederosa.blogspot.com/2010/05/anadir-una-seccion-con-pestanas-para.html


    G-NoZiDe, ¿cuáles transparencias?


    Soraya, por nada :D

    ResponderEliminar
  45. necesito dejar un 50% de transparencia a los fondos de las columnas.. los widget (columnas laterales) y los post (columna principal central del blog)... el blog se compone de 3 columnas bro..

    http://ydumhoodmagazine.blogspot.com/

    saludos

    ResponderEliminar
  46. Pues agregando debajo de .main-inner .widget { esto:

    opacity: 0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;

    Con eso obtienes transparencia, el problema es que la transparencia de ese tipo igual se aplica para los textos y el resultado no se ve tan bien como habíamos imaginado.
    En esos casos la mejor solución es poner un fondo a esos contenedores con una imagen en PNG que sea semitransparente.

    ResponderEliminar
  47. Hola potro de nuevo molestandote por aqui, pidiendo un poco de ayuda ,bueno tengo 3 dudas
    1._Como puedo cambiar el color de borde a negro de lasimagenes que estan debajo de mi menu(las puse en un widget mediante una tabla,pero le puse borde a las imagenes)quiero que quedecomo esta pero con el color mas negro.
    Mi otra duda es ,potro e intentado de cualkier modo mover los paddinsg y los margin y simplemente el titulo de los post no queda, enmedio de la imagen de fondo ,como esto mira:http://toditonarutoshippudenspain.blogspot.com
    y mi ultima duda ,potro los botones de compartir y retweet los tego pero no en la portada,como hago para que aparescan dichos botones en la portada?
    muchas gracias potro y saludos

    ResponderEliminar
  48. En el mío, osea usted fíjese mi blog, yo me refiero a las puntas de la parte blanca, porque capas no se entendió. Yo ví uno que las tenía y me gustó como quedó ♥

    ResponderEliminar
  49. Hola tengo una duda como puedes hacer que se muestren mas entradas tengo este blog http://galleryvictoriousmexico.blogspot.com/ es una galeria pero solo se muestra 1 entrada y como puede ser eso si ya le puse que se muestren 100! y no puede ser por la memoria pues mira que poquito hay como le hago para mostrar mas de 1 mediante codigo html?

    ResponderEliminar
  50. Hola mexico,

    Si le vas a poner un borde a las imágenes entonces la manera correcta es esta:
    <img src="URL de la imagen" style="border: 8px solid #000000; />

    Ahora, cuando te refieres al título en medio supongo que te refieres a "en medio verticalmente", si es así busca .post h3 {
    Y dentro de esa área cambia el:
    padding-bottom:0px;

    Por padding-bottom:5px;

    Los botones de compartir siempre deben estar sólo en las entradas individuales, de lo contrario cuando el lector desea compartir una entrada desde la portada no funcionará correctamente y pensará que el blog anda fallando.

    ResponderEliminar
  51. Bren, sí, pero ¿en cuál de los dos? en ambos son plantillas distintas.

    ResponderEliminar
  52. Jane vulturi, desde hace ya casi un año Blogger implementó la autopaginación, esto es que sin importar cuántas entradas configures a mostrar será él quien decida cuántas entradas mostrará, esto es con el fin de no hacer tan lenta la carga de los blog pues ya te imaginarás el tiempo que tardaría en cargar 100 entradas. Es por eso que los blogs que son más lentos muestran menos entradas. En tu caso a pesar de que no tienes muchos elementos las imágenes sí ocupan bastante tiempo en cargar y es ahí donde Blogger decide cuántas entradas son convenientes a mostrar.

    ResponderEliminar
  53. Que tal Potro.
    Quiza me puedas ayudar con esta situacion y es que e estado buscando como eliminar la face que aparece en el pie de mi blog que dice "con la tecnologia de blogger" la quiero cambiar y colocar el nombre de mi blog en ese sitio o alguna otra frace pero no se como hacerlo.
    si tienes alguna entrada que hable de esto o tu sabes como hacerlo te suplico querido amigo que me ayudes.
    desde ya te agradezco Potro.

    ResponderEliminar
  54. Mira esta entrada:
    http://ciudadblogger.com/2010/08/ocultareliminar-los-creditos-en-las.html

    ResponderEliminar
  55. Hola, Potro. tengo un problemilla desde ayer, no sé por qué no cuando publico aquí
    http://sofiaserrafotografia.blogspot.com/
    no se me actualiza el enlace en el otro blog con la miniatura
    http://sofiaserragiraldez.blogspot.com
    (ni creo que en ningún lado que esté metido)
    y como es de fotografía, pues es un poco rollo.
    ya he eliminado el gadget varias veces y vuelto a poner, pero nada.
    ¿sabes a qué puede ser debido?
    la verdad es que ese blog siempre me está dando problemas, estoy aún por eliminarlo y hacer uno nuevo, pero imagino que entonces todas las etiquetas y demás se me perderían, ¿no?
    Si puedes aconsejarme algo, te lo agradecería
    Un abrazo

    ResponderEliminar
  56. Me están ayudando mucho todos tus trucos y consejos!! Acabo de empezar con el blog y voy un poco perdida, así que gracias

    ResponderEliminar
  57. SIEMPRE MARAVILLOSOS TUS APORTES!!! MUCHAS GRACIAS!!! ÉXITO!!!

    ResponderEliminar
  58. hola como puedo hacer eso pero con disqus, he visto varios blogs que en vez de la palabra "# comentarios" dice "# comentarios y # reacciones, y al hacer click me envia al formulario del post.

    he intentado de todo pero no funciona :/

    ResponderEliminar
  59. hola potro sabes como kitar Con la tecnología de Blogger.

    ResponderEliminar
  60. Hola Potro interesante esto! es una buena alternativa y muchos visitantes seguro querrán aparecer allí...

    Hola Pokelevel, te respondo a lo que comentas pues justamente hace poco hice esto gracias a "CB", acá encontrarás la respuesta Quitar los créditos .

    Potro disculpa que me salga del tema pero necesito que me des una mano en mi Blog, he tratado de varias formas de eliminar ese espacio entre el menú y el post tanto en home como en los post y no lo he logrado incluso he eliminado la fecha del post y nada que puedo hacer para colocarlo como debe de ser¿?

    ResponderEliminar
  61. Hola Sofía Serra Giráldez,

    El gadget de blogs ha sido muy problemático desde su creación, tanto que ya se ha vuelto normal lo que te está sucediendo.
    Por alguna razón siempre tarda en leer el feed de los blogs que se agregan ahí y a veces pasan varios días sin que se actualicen y de repente ¡voilà! aparece de nuevo.
    Pero no, no es un problema con tu blog ni es algo que estés haciendo mal.
    Desafortunadamente no lo podamos controlar ya que es un gadget que maneja Blogger por completo.

    Si quieres puedes esperar hasta que se normalice pero será común que presente nuevamente ese problema. O bien, puedes probar con otro método para mostrar tus blogs ahí, como con este gadget que explica Jaime en su blog:
    http://elbalcondejaime.blogspot.com/2010/09/ultimas-entradas-con-miniatura-de.html

    Besos.

    ResponderEliminar
  62. Skittles, qué gusto que te esté siendo útil este blog, ya sabes que puedes tomar de aquí todo lo que necesites ;)

    Kary, te lo agradezco mucho!

    ResponderEliminar
  63. julio hito, no sabría decirte nada de Disqus, lo usé sólo un día y al mismo momento lo eliminé.


    Daniel, prueba agregando debajo de .main-outer { esto:
    margin-top:-30px !important;

    ResponderEliminar
  64. Muchísimas gracias, Potro, probaré a mirar ese enlace que me dejas de El balcón de jaime.
    A mí nunca me ha dado problemas ese gadget, pero claro, alguna ve tenía que tocar..:)..menos mal que estás tú. Eres un ángel.
    Un beso enorme, y muchas gracias otra vez

    ResponderEliminar
  65. Yo lo uso en otro blog que tengo y desde el primer día que lo puse tengo ese problema, ahora entro tan pocas veces a ese blog que ya no sé si sigue funcionando o no :P

    ResponderEliminar
  66. Hola Potro, he estado viendo lo de El balcón de Jaime, parece interesante, pero no me decido a usarlo porque la verdad es que no sé dónde pegar todo el código ése. Además, sin desmerecer a aquel blog, yo prefiero hacer las cosas según tú digas.
    No sé, creo que mientras tanto me aguantaré con que no funcione. lo curioso es que es una pequeña lista de dos blogs y en uno sí aparece la miniatura, en el otro no.
    Bueno, muchísimas gracias de todas formas, :)
    Un abrazo enorme

    ResponderEliminar
  67. Gracias por la confianza Sofía, la verdad es que nunca he probado ese método pero sé que Jaime es muy bueno en lo que hace. Si gustas puedo facilitarte el que uso en este mismo blog pero por desgracia no muestra miniaturas que creo que es el que buscas dado que se trata de un blog de fotografías. De cualquier forma no te preocupes, cuando menos te lo esperes estará de nuevo tu gadget funcionando como si nada hubiese pasado.
    Un abrazo!

    ResponderEliminar
  68. Excelente Potro!, me funciono de maravilla, cambie el 30px por 15px y me resulto. Al fin se fue ese molesto espacio como siempre estas en todas...

    ResponderEliminar
  69. Perdón, en éste http://myperfectworlddd.blogspot.com/.

    ResponderEliminar
  70. Ya ha empezado hoy a funcionar, potro, jaja!
    besos

    ResponderEliminar
  71. Bren,

    Busca esta parte de tu plantilla y agrega lo que está en negrita:

    $(content.background.color.selector) {
    background-color: $(content.background.color);
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;

    }

    ResponderEliminar
  72. Sofía Serra Giráldez, ¡qué gusto! entonces ya no hay de qué preocuparse por el momento :)

    ResponderEliminar
  73. Perfecto, me encanta. MUCHAS GRACIAS :')

    ResponderEliminar
  74. Hola Potro, en mi blog (my heart´s corner) he puesto el botón para retwittear, pero me dice, al hacer click que esa página de Twitter no existe.

    ¿Qué puede estar ocurriendo?

    Gracias, como siempre lo resolverás

    ResponderEliminar
  75. Hola samu,

    Supongo que era un problema temporal porque veo funcionando el botón al 100%.

    Saludos.

    ResponderEliminar
  76. potro sabes por que dejo de funcionar? se queda en cargando al entrar al post www.lockerzlatinos.com

    ResponderEliminar
  77. y me se me trabo tambien el menu superior joderrr
    el despegable como tenia todo de bien y se me desordeno todo ;(

    ResponderEliminar
  78. tambien en elementos se desordeno todo se be todo grande dosorganizado joder que paso ;(

    ResponderEliminar
  79. como puedo volver a la normalidad los elementos que se muestran en diseño etc

    ResponderEliminar
  80. Pues no sé qué hayas hecho pero es seguro que debe ser por un cambio que has realizado o un gadget que has agregado.
    En cualquiera de los casos deshaz el cambio que lo provocó o elimina lo último que añadiste.

    ResponderEliminar
  81. Yo de nuevo cambiando de tema jejeje. Ahora mi duda es la siguiente, le agregue el boton de twitter a mi blog, no este, otro que se consigue de la pagina oficial (http://twitter.com/goodies/tweetbutton). Mi problema es que el boton tambien sale en la portada del blog, y preferiría que saliera solo en las entradas. Y si seria posible alinearlo debajo a un lado del boton "Me gusta" de facebook. Gracias de antemano

    ResponderEliminar
  82. Hola Simon,

    Mira el último código que se menciona en esta entrada, esa primera y última línea hacen que "algo" sólo se muestre en las entradas, si metes ahí dentro el código de tu botón entonces no se mostrará en la portada.
    Ahora en cuanto alinearlo con el de Me gusta quizá lo más conveniente es que uses una tabla HTML y dentro de cada celda pongas los códigos de cada botón.

    Saludos.

    ResponderEliminar
  83. Valla eres un experto! Efectivamente, ya oculte el boton! Mas tarde pruebo lo de la tabla... Gracias por todo!

    ResponderEliminar
  84. Esta excelente, y pregunatando nada mas. No habría alguno para facebook??

    ResponderEliminar
  85. Pues no sé si lo haya, al menos yo no lo conozco.

    ResponderEliminar
  86. Tengo problemas...
    Anteriormente tenia un boton de retwit. Lo quite de aqui tambien. El asunto es que ahora trato de eliminarlo para que me quede solo el de los avatares, pero me sale error en la plantilla.
    el blog es: klaus-imagination-oncinema.blogspot.com
    Podrias ayudarme, la idea es borrar el boton de tewit y dejar el de facebook y el que muestra los avatares...

    ResponderEliminar
  87. ¿Cuál es el error que te da? ¿en cuál blog lo tienes puesto?

    ResponderEliminar
  88. Al borror el codigo del retwit y darle vista previa me tira esto:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".
    Error 500

    El blog es este: www.klaus-imagination-oncinema.blogspot.com

    ResponderEliminar
  89. El código que debes borrar es este:

    <script type='text/javascript'>
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

    ResponderEliminar
  90. Bonito tutorial Potro, lo implementamos pero nos dio conflicto con el menu que tienes en esta entrada http://ciudadblogger.com/2010/09/menu-desplegable-con-efecto-deslizante.html el cual tambien esta de 10 y tambien ya lo aplicamos pero mejor quitamos el de twitter para que no nos de dicho conflicto, a que se deberá Potro? ojala nos puedas encontrar una solución y como siempre muchas gracias.

    ResponderEliminar
  91. Lo que sucede es que este avatar cambiante requiere de jQuery, y el menú que mencionas usa Scriptaculous, estas dos librerías de scripts no son compatibles entre sí, es por eso que cuando se usan juntas una de las dos deja de funcionar.
    Sin embargo puedes probar con este hack para usar ambas al mismo tiempo.

    ResponderEliminar
  92. Hola. yo, otra vez...
    Resulta que estoy teniendo problemas con mi blog y quiero quitar el boton este de twitter para ver si es el causante del problema. El asunto es que ahora que blogger se actualizo no se como hacerlo. Podrias ayudarme.
    Gracias

    ResponderEliminar
  93. Sal de la Blogger in Draft e ingresa a Blogger normal para que puedas hacerlo. En unas horas o mañana publicaré algo acerca del tema de la Edición de HTML en la nueva interface.

    ResponderEliminar
  94. Buenas, lo he puesto y funciona perfectamente, el problema es que como tengo puesta la navbar escamoteable, y un favicon en movimiento, estos dejan de funcionar, puedes darme una solución, gracias.
    Mientras tanto quité el botón de compartir de Twitter que muestras

    ResponderEliminar
  95. Hola luz,

    El favicon no tiene que ver con este u el truco de la navbar pues son áreas independientes a las modificaciones que se hacen.
    Con la navbar es un truco que usa Scriptaculous, una librería de efectos que no es compatible con jQuery, la que se usa para este truco de Twitter.
    Cuando se usan al mismo tiempo una de las dos deja de funcionar. Sin embargo hay un hack para que puedas usar ambas sin problema:

    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

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

    ResponderEliminar
  97. Tenías razón lo del favicon no tenía nada que ver, solucionado lo de la navbar, muchísimas gracias por la ayuda.

    ResponderEliminar
  98. Otra pregunta, cuando comparto en twitter el post, o al dar gracias por Rt, aparece mi avatar en la entrada, hay alguna forma en que esto no ocurra, muchas gracias.

    ResponderEliminar
  99. Hola luz,

    De la entrada no, si tú compartes la entrada también aparecerá tu avatar.
    Lo que sí puedes hacer es que quien comparta la entrada no le aparezca por defecto tu nombre de usuario, eso puedes hacerlo eliminando esta parte del código:

    nick:&#39;usuario&#39;

    ResponderEliminar
  100. He cambiado mi avatar en twitter, pero me sigue mostrando el anterior, me podrías decir si esto se puede corregir, para que me muestre el nuevo? gracias

    ResponderEliminar
  101. Me temo que no, siempre almacena el avatar que se tuvo ese día :/

    ResponderEliminar
  102. No si el problema es que aunque he cambiado el avatar, si hago un nuevo Rt me sigue mostrando el anterior y no el nuevo.

    ResponderEliminar
  103. Ummm, quizá debe ser un fallo en la caché de la API de Topsy, o mas bien, debe ser que guarda la caché por mucho tiempo y por eso no se ven reflejados los cambios en las cuentas de Twitter. Supongo que es un problema directo con Topsy pues en el script no encuentro nada que haga mención a ello.

    ResponderEliminar
  104. Desde ayer me ha dejado de funcionar,cuando me pinchan en retweet, aparece en twitter la entrada rt, pero no se me muestra el avatar y el contador está a 0

    ResponderEliminar
  105. Parece que ha sido una falla de Topsy, el servicio que provee la API para esta aplicación, pues el mío de ejemplo igual cayó a cero (ahora cuenta sólo 2). Pero ahora parece que se está restableciendo el servicio.

    ResponderEliminar
  106. Hola Potro!!!
    He conseguido que me salga el truco, pero ¿como lo posiciono en la parte izquierda pero dentro del primer parrafo de texto? es que siempre empiezo los post con una foto y me deja mucha separación entre el titulo y la foto y queda feo... así que pensé que era mejor ponerlo en el primer parrafo.
    Gracias!

    ResponderEliminar
  107. No hay manera JordanyPippen; puedes colocarlo arriba, abajo, a la derecha o a la izquierda del post, pero no hay una forma de que reconozca el primer párrafo y ahí lo coloque.
    Saludos.

    ResponderEliminar
  108. Muchas Gracias!! me sirvio mucho!! :)

    ResponderEliminar
  109. hola amigo te agradeceria si me dieras donde encuentro la casilla Expandir plantillas de artilugios me interesa mucho poner mi avatar de twiter en mi blogger y si los codigos se colocan todos juntos o separados?

    ResponderEliminar
    Respuestas
    1. Aquí la encuentras:
      http://i50.tinypic.com/16h671k.png

      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