Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar más, pues aquí va.
Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.
Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.
Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.
Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.
Este es la primera versión de 5 botones.
Y este es el código que has de pegar en tu gadget:
<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1goGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxzZ9WBDmn-wY5zVTJXn4oM_xiB5QQtBb-bYbUujnEeCBpNPsqLAdWU5INBe5naJU3CLsa87UR9MLM5tDuIKH0RzYgg_dg2T4Yh-Qr4Gl8wJI9XjFuz6YZ7D58aUBz_yydSAVeaTwyYpj/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePTvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV-YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>
Esta es la otra versión, la de 4 botones.
Y este es el código que pegarías en tu gadget HTML/Javascript.
<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1goGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s0/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePTvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s0/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s0/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV-YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s0/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s0/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>
Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.
Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en negrita son los colores en su estado normal, y los que están en color naranja son los colores al pasar el cursor.
Y ahora sí, es todo.
Y ahora sí, es todo.
Ciudad Blogger
Me gustan muchos tus botones Potro, simplemente... perfectos :3, gracias por compartirlos.
ResponderEliminarGracias a ti por tu visita!
EliminarGracias,maravilloso no tener que tocar la plantilla para nada.Si quisiera poner el icono de youtube que tendría que poner.
ResponderEliminarTendrías que crear un nuevo sprite, puedes tomar cualquiera de las URLs como ejemplo para guiarte, y luego la sustituyes por el botón que no quieras:
Eliminarhttp://lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png
hola que tal... me gusto mucho esta entrada,gracias por compartirla. pero ahora tengo una pregunta tal vez no sea nada que ver con este post pero quisiera saber como poner los numeros en los comentarios como los de aqui,mas bien numerarlos. saludos hasta luego
ResponderEliminarHola Raven, busca en Oloblogger, ahí tienen una entrada sobre ese tema. Saludos.
EliminarMuy buenos los botones ;)
ResponderEliminarMuy buenos estos botones ya los agregue a mi pagina, los he tenido que modificar un poco agregandole el target="_blank" y title a cada uno de ellos, gracias potro.
ResponderEliminarBonitos botones Potro, que bueno que estés de vuelta.
ResponderEliminarOye no tienes un tutorial para poner los artículos relacionados y los botones para compartir así como los tienes tu?
Saludos!!
Hola Obed. Todo el conjunto del post-footer como lo tengo no, pero sí tengo el post sobre las entradas relacionadas: http://ciudadblogger.com/2009/07/entradas-relacionadas-en-blogger.html
EliminarLo que yo he hecho es poner una tabla HTML y dentro poner las entradas relacionadas junto con los botones:
http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html
Gracias Potro, voy a aprobar a ver como queda.
EliminarMil gracias! Llevaba tiempo buscando algo como esto en un estilo un poco más agraciado. Si quiero eliminar una de las opciones de la primera versión (G+), ¿qué líneas tengo que cargarme?
ResponderEliminarSaludos!
Saludos Jolan. Sólo elimina todo el LI correspondiente al botón que no quieres, en el caso de Google+ quitarías esta parte:
Eliminar<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
Que bueno, pero, ¿Hay forma de poner las imágenes del horizontal más pequeñas?
ResponderEliminarHola Danny. Si quieres los íconos más pequeños reduce el width y height que está dentro de .social_bookmarks li {
EliminarLo mismo con el width y min-height que está dentro de .social_bookmarks li a {
Luego, en todas las URLs de las imágenes reduce la parte que dice /s114/ ponle un valor más bajo.
Por último reduce todos los -57px que están debajo de las URLs de las imágenes.
¿Sería posible hacer que los cuadrados fueran círculos?
ResponderEliminarPS: se te echaba de menos por estos lares!
Claro, si quieres que sean redondos sólo agrega debajo de .social_bookmarks li { esto:
Eliminarborder-radius:77px;
PS: Yo también los echaba de menos :)
Disculpe las molestias jamas me respondiste mi pregunta ya la hice en la entrada correspondiente...
ResponderEliminarHola Adrian, la pregunta la respondí el día 28 de mayo en el comentario #859.1
EliminarTienes que dar click en el botón de abajo que dice "Cargar más", dale click hasta que el botón desaparezca, así podrás ver tu comentario y la respuesta que te he dejado.
Saludos.
Ahora lo ví jamas me percate del boton Cargar mas... gracias xD
EliminarMe encanta como quedan pero como hago para que aparezcan bajo cada entrada? ya lo he intentado moviendo el gadget de lugar pero no me resulta :/ gracias! :)
ResponderEliminarHola glowcher, estos no servirán para compartir las entradas, son únicamente para enlazar tus redes sociales. Si de cualquier manera quieres ponerlos debajo de los posts sólo pega el código debajo de la etiqueta <div class='post-footer'> estando en la Edición de HTML de tu plantilla.
EliminarToma en cuenta que esa etiqueta podrías tenerla dos veces, si no ves resultados pon el código también debajo de la línea repetida que encuentres. Saludos.
Muy bueno como siempre potro! Son de lo mas bonitos tus aportes.
ResponderEliminarTe hago una consulta xq veo que esta medio olvidado creo el tema este...estaba tentado de poner un botón para agregar a favoritos mi blog ( discografiasmega.blogspot )y vi que solo funcionan para algún navegador y depende de las versiones....hay algo tipo universal ( para todos los navegadores ) o sigo buscando opciones ?
Gracias!
Hola BaTo LoCo, estoy al igual que tú, sólo conozco esos, los que son para ciertos navegadores, pero ninguno que se aplique para todos.
EliminarMuchas gracias por tus trucos potro sin duda eres el mejor, sigo tu blog desde hace mucho y siempre que colocas algo nuevo es util para todos, gracias por tu tiempo.
ResponderEliminarTe queria preguntas algo me gusto muchisimo estos botones y los quiero para mi blog pero quiero la segunda opcion la de los 4 botones pero quiero reemplazar el primer boton atom por el de youtube para que me quede asi:
Youtube, Twitter, Facebook y Google Plus lo he intentado tocando todo pero no hay manera siempre me da algun error, espero me puedas ayudar cuanto tengas un poco de tiempo libre gracias
Gracias por tu comentario Howard. Mira el comentario #2.1, ahí lo he mencionado, es solo cambiar la URL de la imagen por otra que tú hagas, no hay que hacer más cambios.
EliminarMuchas gracias por tu respuesta y ayuda potro, al final he conseguido cambiar la imagen pero me queda el efecto mal no entiendo porque, me puedes ayudar un poco, te paso el enlace y las imagen de youtube que quiero.
Eliminarhttp://entraparanada.blogspot.com.es/2014/06/prueba-redes-sociales.html
Aqui la imagen pero no puedo
http://www.mainpre.net/images/YOUTUBE.png
a ver si me puedes orientar un poco porque me gusta mucho estos botones, muchas gracias
Está bien, lo que sucede es que tu imagen sprite no está muy bien alineada, es decir, si abres tu imagen verás que el logo de YouTube de abajo está más a la derecha (ligeramente en realidad) que la que está arriba, por eso al pasar el cursor se ve que hace como esa curvatura en la transición.
EliminarHoward me he creado esta imagen para el botón de Youtube https://lh3.googleusercontent.com/bM77Vt0GjkXcQFEnNGzhcAm4gLQVdX8jBN1bFR-qH18 puedes probar.
Eliminar¿sabes?, jaja, llevo desde que los vi queriéndotelo preguntar, pero ya sabes, me daba corte, jeje...¡Gracias! A mí me encantan así, en color gris.
ResponderEliminarMMMUAAA, jaja
(Ya lees hasta el pensamiento de los que te seguimos, Potro ;) XD
Infinitas gracias otra vez.
Otra vez yo, Potro, jeje, la pregunta de rigor. Ya los he puesto, he cambiado el botón del feed por el de la suscripción por correo, funcionan, pero no sé por qué no se ven los iconos del correo y de twitter. ¿te importa ayudarme, por favor?
ResponderEliminarPor lo demás, genial.
Muchas gracias, :)
Hola guapa, me gusta decir que leo el pensamiento pero la verdad es que esta vez fueron muchos usuarios los que me lo solicitaron y ya sabes que no me puedo negar :)
EliminarLo que ha sucedido con tus botones es que en esta parte del código has dejado pegado el código del color junto con la parte donde va la URL de la imagen:
.social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
Debe ser así, con un espacio entre los dos:
.social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
Eso es con el botón de Twitter. Con el de RSS la clase no es la correcta, tienes esto:
<li class="iconrssmail">
Y debe ser así:
<li class="iconrss">
En caso de que te haya confundido más, también puedes copiar y pegar el código de nuevo y todo saldrá bien ;)
¡Besos!
Siempre me pasan despistes de estos, no sé qué haría sin ti, mil infinitas gracias, Potro. Corrijo ahora.
EliminarUn beso.
Ya está arreglado, Potro. Muchas gracias. Ahora quisiera preguntarte si es posible cambiar el botón del feed por el de la suscripción por correo. Esta mañana me funcionaba la suscripción (cuando no funcionaba a la vista el botón) . Ahora he intentado cambiar todo lo que habría que cambiar de un código a otro...pero por favor, mira cómo ha quedado...ayyy, te he destrozado el botón!!...:(
Eliminar:)
Olvida lo anterior, por favor, voy a dejar lo del feed y cancelar la suscripción por correo, nunca me ha hecho mucha gracia, :)
EliminarCopio de nuevo tu código completo y dejo de toquetearlo.
Muchas gracias, Potro, infinitas de verdad.
Vale, pero si decides intentarlo de nuevo sabes que con gusto te ayudaré.
EliminarUn beso.
Hola potro. llevo mas de 4 años visitando tu blog. pues siempre publicas cosas muy interesantes. hoy solo te digo que es hora de que incies a publicar contenido sobre las vistas dinamicas de blogger como mejorarlas a nuestro gusto. tambien puede ser como hacer que nuestro tema sea responsive. esos temas me llaman mucho la atencion ya que actualmente la mayoria de trafico proviene de dispositivos moviles, y que mejor que tener nuestro sitio bien adaptado a estas nuevas tecnologias. saludos y gracias espero temitas asi por el estilo
ResponderEliminarGracias por tu comentario Ma levi. Con las Vistas Dinámicas no es que no tenga ganas de publicar sobre ellas, es que lamentablemente muy-muy poco se les puede hacer, no son plantillas personalizables, la mayoría de los códigos que se agregan dentro de su HTML no se ejecuta por lo que cambiar su aspecto y estructura está en chino. Pero hay una entrada sobre personalizar la cabecera, no sé si ya la habrás visto.
EliminarSobre el diseño responsive sí tengo contemplado publicar al respecto pues es algo ya casi obligado para cualquier webmaster debido a lo que bien has mencionado, la gran afluencia del tráfico que llega desde dispositivos móviles. Espero no tardar mucho en publicar sobre ello. Saludos.
quetal potro quisiera saber como puedo poner un logo a mi blog en la cabezera
ResponderEliminarHola Adrian, usa el gadget que viene por defecto, el de "Cabecera", ahí le das click (estando en Diseño) y verás la opción de subir una imagen.
EliminarComo haces para que el numero de comentarios te aparezca en la parte superior (con el fondito cuadrado)
ResponderEliminarSólo lo he cambiado del lugar poniéndolo en el área del post-header:
Eliminarhttp://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
Y luego he puesto estos estilos para darle un fondo, alinearlo a la derecha y darle un ligero borde redondeado:
.comment-link {
float:right;
background-color:#f1f1f1;
padding:2px 3px;
border-radius:2px;
}
Hola de nuevo Potro, me puedes ayudar a centrar las imagenes de youtube es que por mucho que la edito no consigo que quede iguales a las otras
ResponderEliminarhttp://entraparanada.blogspot.com.es/2014/06/botones-de-redes-sociales-ciudad-blogger.html
gracias por tu ayuda y aun no entiendo como has conseguido colocar todas las imagenes perfectamente centradas, o si tienes alguna imagen por ahi de youtube que me sirva te lo agradesco mucho, muchas gracias por tu tiempo un abrazo
Hola, yo por ahora no haré más imágenes de botones pues el tiempo que dispongo es muy corto. Si usas Photoshop habilita el "grid" para que te puedas guiar con las distancias de las imágenes: http://www.tutorial9.net/tutorials/photoshop-tutorials/tip-use-the-grid-in-photoshop/
EliminarY como conseguiste centrarlos (los botones sociales), lo he intentado con diferentes códigos de centrar pero no puedo
ResponderEliminarAl primero sólo le puse margin-left: 25%; debajo de .social_bookmarks_container {
EliminarAl segundo sólo lo encerré entre <center> y </center>
Hola Potro, gracias por los botones!!
ResponderEliminarNuevamente vengo con preguntas.
¿Como configuro el botón de suscripción por correo para que aparezca en español?
Cuando abro los botones en tu pagina abre una nueva pestaña, pero cuando abro los mios salgo de mi pagina. ¿Como hago para que las paginas se abran en nuevas pestañas? Gracias!!
Hola Facu, para que los enlaces se abran en otra pestaña mira esta entrada:
Eliminarhttp://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
Para que el idioma de la suscripción por correo esté en español, entra en tu cuenta de Feedburner, selecciona tu feed y luego da click en "Publicize", busca "Email Suscriptions" y en "Language" selecciona "Español".
Saludos.
Potro lo de las pestañas funciona de maravilla excepto en el de feedburner que además de abrirse en la misma pestaña dirige a una página con un montón de códigos. El gadget de suscripción por correo electrónico lo configuré en español pero sale en inglés, como en tu blog.
EliminarHola Facu, la configuración del idioma se hace en esa área, desconozco porqué no se aplique. En cuanto a lo primero que mencionas, necesitaría ver en cuál blog lo has puesto.
EliminarSolucioné lo del correo.
EliminarEn todos mis blogs coloqué los gadgets, pero en ninguno de ellos funciona el de feedburner. Gracias!
Sigo sin saber en cuál blog lo has puesto, así me es imposible saber cómo ayudarte :/
EliminarEn este: http://sirmoshis.blogspot.com/
EliminarGracias!
El icono del feed no tiene el atributo target="_blank", por eso no abre en otra ventana. Tu feed aún no lo tienes enlazado a Feedburner, en esta entrada puedes ver cómo enlazarlo, sólo te falta añadir la dirección de Feedburner en tu configuración de Blogger:
Eliminarhttp://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html
Hola Potro, el gadget de feedburner está funcionando, quiero colocarle target="_blank pero no se en que parte...También me gustaría cambiarle el idioma.
EliminarRespecto al aspecto, hay alguna forma de sacarle los guiones que aparecen sobre los iconos de twitter, google+, facebook y mail?? Mil Gracias!
Después de href='/atom.xml' deja un espacio y pone el target="_blank"
EliminarPara los bordes que aparecen ahí agrega estos estilos:
.widget ul li {
border-top: none !important;
}
El idioma, yo lo veo en español...
Potro, eres un genio, los bordes se han ido y abre en otra pestaña, además pude convertirlos en círculos gracias a tu comentario 10.1
EliminarMil Millones de Gracias :D !! No molesto más...
Hola potro dentro una duda que no tiene nada que ver con esta entrada, lo que pasa que tengo un blog pero quiero hacer mas ancho la parte del gadget de entradas populares, te dejo una imagen para que me entiendas,
ResponderEliminarhttp://imgur.com/uBLkDIx
Hola, la mayoría de los gadgets predeterminados de Blogger se adaptan al ancho de la sidebar. Si ese u otro gadget predeterminado lo quieres más ancho tienes que aumentar el ancho de tu sidebar.
EliminarHola Potro, tengo un problema con los botones de redes sociales. Quiero cambiar su tamaño manteniendo su apariencia, al menos un 50% mas pequeños, es posible?
ResponderEliminarLo he cambiado px pero achica el boton y se pierden las imagenes del interior en el achique.
Muchas gracias de antemano
Hola liquido, mira el comentario #8.1, ahí he explicado sobre lo que deseas.
EliminarHola Potro estan Buenisimos :D , una pregunga, no sabes algun script o algo, cuando copien el contenido de mi blog, osea subranyen algun texto y le den copy y despues paste en algun lugar, quede al final, Para mas Visita "Sitio Web" no se si me entiendes?
ResponderEliminarHola, hay un servicio que brinda esa opción:
Eliminarhttp://www.tynt.com/product_copypaste
Interesante, lo mejor de todo es que los sprites optimizan el sitio.
ResponderEliminarpotro tengo un terrible problema, en mi blog cuando entro a una entrada me aparecen todo desalineado y no aparece fondo en las entradas a qui podras visualizarlo: http://totalmetalnrock.blogspot.mx/2014/05/httprockandmetalcassic.html es una entrada de pruebas que había hecho ya tiempo.
ResponderEliminarGracias por tu ayuda.
Hola, en #content-wrapper tienes esto:
Eliminarbackground-color: #000000 repeat-x center bottom #000000;
Cámbialo por esto:
background: #000;
Saludos.
Muchas gracias maestro potro me funciono de maravilla eres el mejor
Eliminarsaludos.
Potro, tengo una duda fuera de éste tema (Sí, soy uno más de los que tienen dudas fuera de tema) ¿Es posible mostrar un texto o un gadget sólo en la versión web, y que en la versión móvil no aparezca o viceversa? He intentado buscando condicionales o algo por el estilo, pero no encuentro nada sobre éste tema.
ResponderEliminarHola Sergio, la forma más fácil y sencilla es que uses el atributo mobile="yes" o mobile="no" para que determines qué quieres mostrar en la versión móvil y qué no:
Eliminarhttp://ciudadblogger.com/2011/11/habilitar-las-plantillas-personalizadas.html
Perdona que te pregunte algo que no tiene relación con este post, pero es que no se cómo preguntarte desde otro sitio. Últimamente he estado viendo páginas web que enseñan su información con el estilo flipbook. ¿Sabes si se puede imitar o emular ese efecto de pase de páginas para un blog? Te dejo esta URL por si no me he expresado bien http://asp-es.secure-zone.net/v2/index.jsp?id=3/3075/6460&lng=es ¡Muchas gracias!
ResponderEliminar¿Para las entradas del blog? no que yo sepa :(
Eliminar1ero. Hola mi buen maestro Potro, desde hace años te sigo y has sido mi mentor y la persona que me impulso a hacer esto (mi mejor hobie) Te presumo una de mis ultimas paginas camaronpanzon.com gracias a tus lecciones. Mi pregunta es: encontré esta pagina http://www.gjelina.com/ puedes empujar los links, el movimiento de los botones que esta en javascript es genial y me encantaría poder jugar con esto en mis blogs. ¿Me podrías ayudar o guiarme por donde empezar? Gracias un saludo y un abrazo bro !!!
ResponderEliminarMuchas gracias por tu comentario Oiram-X :)
EliminarParece que usa Box2Djs, nunca lo he usado a decir verdad, pero hay algo similar, no es exactamente igual, pero también te permite mover y arrastrar elementos:
http://ciudadblogger.com/2010/05/arrastrar-imagenes-con-jquery.html
http://ciudadblogger.com/2009/12/hacer-que-las-imagenes-se-arrastren.html
http://ciudadblogger.com/2009/12/hacer-que-las-imagenes-se-arrastren-ii.html
Otro abrazo para ti.
Potro! Gracias! Sabes algo? Cuando volviste a la actividad aqui, vi esos botones y tenia unas ganas de pedírtelos! Pero no se, no quería como "robarte" tu #suaj (? Gracias de nuevo genio n.n
ResponderEliminarLos hubieras pedido, ya sabes que de vez en cuando tenemos la hora de las complacencias :)
EliminarPotro, una sugerencia fuera del tema. ahora como todos sabemos los blogs están bien visitados desde los móviles y la publicidad es mejor pagada desde un móvil, sería bueno que enseñes como crear plantillas optimizadas para celulares, mira acá te dejo un ejemplo, no es spam! http://www.milgifs.com/ mira desde la pc y luego del móvil, es excelente! Saludos!
ResponderEliminarSigo pendiente con el tema de las plantillas "responsive", ya después hablaremos de ello :)
EliminarPotro necesito de tu ayuda, quieero poner los botones para compartir de redes sociales en la parte superior de las entradas, pero a pesar de que he encontrado trucos y códigos no me lo permite y eso que he quitado los botones tradicionales, no sé si exista algun truco para dejar esos botones clásicos y poner otros como lo estoy señalando. Muchas gracias.
ResponderEliminarHola Abel, estos botones no son para compartir las entradas sino para que la gente ingrese a las páginas de tus redes sociales, por eso ponerlas en las entradas no tiene mucho sentido. Si de cualquier manera quieres hacerlo sólo pon el código debajo de <div class='post-header'> tomando en cuenta que esa línea podrías tenerla dos veces así que sino queda en una la pones en la otra.
Eliminar:v Me quedan mal... Me queda la iluminación cortada y la animación desde abajo izquierdo a arriba derecha..
ResponderEliminarPD: el blog es zhearunteam.blogspot.com.ar ... Fijate como me quedan :c (PD: Quiero el de 4, pero quiero cambiar el de Google+ por el de subscripción por mail, ¿cómo lo hago? Me mezclo con tanto código)
ResponderEliminarSi quieres el de 4 usa el otro código, no el primero. Y si quieres cambiar uno por otro sólo cambia la URL de la imagen correspondiente, en sí sólo es cambiar la imagen y el enlace a dónde enviará.
EliminarSi te quedas con el primero cambia el padding:0; que está dentro de .social_bookmarks li { cámbialo por padding:0 !important;
El problema que tengo es la animación. Están mal animados.
EliminarSupongo que has editado las imágenes, en esos casos deben estar perfectamente bien alineadas las imágenes del sprite para que no tengas ese problema.
Eliminarhola potro te queria pedir una ayuda me puedes Decir como regreso La fecha Abajo de la entrada? , esque ahorita la tengo arriba y ya no se que codigo tengo que mover :( me ayudas Porfa :D mi pagina es Mi name con el .org
ResponderEliminarHola, mira aquí:
Eliminarhttp://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html
Potro, buenas noches. Te pregunto amigo: ¿Ofreces el servicio de diseño de plantillas personalizadas?... estoy interesado en pagar por una plantilla premium, ojalá hecha por el maestro de maestros. Me cuentas.
ResponderEliminarHola Diego, no sé si el maestro de maestros haga plantillas, pero yo sí :)
EliminarTe dejo el correo de contacto para esos asuntos, sólo indícame el tipo de plantilla, gadgets, sidebars, elementos, diseño, etc. que quieres para tu plantilla (o si quieres emular la de otro blog/sitio web) y te hago un presupuesto.
Saludos.
ventas@ciudadblogger.com
Hola, Potro. Tengo una duda, ¿como agrego otra red social? Como instagram, tumblr o alguna otra página como wattpad.
ResponderEliminarBesos :*
Hola Clau, tienes que crear otra imagen con sprite tomando de muestra una de las que ya están en el código, luego, sube tu imagen a Picasaweb y agrega estos estilos:
Eliminar.social_bookmarks .iconinsta{background: #F1F1F1 url(URL de la imagen) top left no-repeat;}
.social_bookmarks .iconinsta:hover{background-position:center -57px; background-color: #37589b;}
Ahí deberás agregar la URL de tu imagen. De último agrega antes de </ul> lo siguiente:
<li class='iconinsta'>
<a href='URL de la red social'>
Red Social
</a>
</li>
¡Gracias! Pero me sale un pequeño problema, no tiene el fecto que hace los botones tan especiales y me salen en fila...
EliminarMira lo intente poner en mí blog y de pruebas y salio mal...
http://lavidaesbellacomouncaracol.blogspot.mx/
No los veo ahí Claudia :(
EliminarBuenas tardes. Hay un problema con el widget. Por alguna razón los cuadros están estirados, haciendo que se hagan dos filas y y que al posicionar el mouse, en vez de subir, la animación va en diagonal. ¿Qué podrá ser? Lo he puesto en un blog de ejemplo y allí está perfecto :(
ResponderEliminarMi blog es: http://reyedit.blogspot.com/
Hola Juan Carlos, es por los estilos de tu plantilla.
EliminarBusca el padding:0; que está dentro de .social_bookmarks li { y cámbialo por padding:0 !important;
Quizá también sea necesario que agregues estos estilos:
.social_bookmarks ul {
margin:0 !important;
padding:0 !important;
}
¡Muchísimas Gracias!
EliminarCon la primera recomendación logrué que los iconos recuperaran su tamaño original. La otra recomendación no lograba ningún cambio (al menos aparente). Puse ese atributo que me diste, el !important, en el margin:0 de .social_bookmarks y como por arte de mágia se ha metido dentro de la caja (antes estaba un poco salido). Y ya jugando con los el social_bookmar li he dado con algo que me convence jaja
Muchísimas Gracias (:
Excelente Juan Carlos, qué gusto que todo haya salido bien!
EliminarEl potro necesito que me ayudes.
ResponderEliminarEsoty queriendo insertar el gadget dentro de la pagina y no me salen los iconos de las redes sociales. Ya verifique no este pegado el código del color junto con la parte donde va la URL de la imagen:
.social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
Debe ser así, con un espacio entre los dos:
.social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
Ya lo hice, pero aun asi continua sin aparecer los iconos. No es un blogger donde lo quiero insertar sino una pagina web. No se si necesito un codigo javascript o una libreria en especial para ponerlo y me detecto los iconos ??? Ayudame urgente :(
Hola Gianrch, ¿en cuál página lo has puesto?
EliminarEs una pagina que recien estoy terminando de hacerla pero vi tu post y me gusto tu diseño segui los paso pero no se mestra los iconos :( porfavor ayudame sbes que puede ser ? :/
EliminarEs una pagina en puro HTML pero en la parte del footer lo queria poner las redes sociales pero no se porque motivo no se muestran solo se muestra la los cuadros y cuando los selecciono salen sus respectivo colores pero menos los iconos, es decir las imagenes.
Eliminaryaaaaaaaa Lo solucione :) Gracias de todos modos (Y)
EliminarEs necesario que pueda verlo, de lo contrario no puedo saber dónde está el error.
EliminarEl protro, lo que no he podido es insertar el sprite de "youtube" ayudame porfavor te lo agardecere mucho ..!!! :D
EliminarEn el comentario #38.1 verás las indicaciones para añadir un nuevo botón ;)
EliminarHola potro quisiera saber como hacer para que en vez de 4 botones queden 3 pero en manera de linea, mira como lo tengo en mi blog de prueba : http://readersface.blogspot.com/
ResponderEliminarEn de la version 1 osea los horizontales no logro que queden centrados por eso coloque los de 4 botoenes
Hola Samuel, entré y veo que ya lo has conseguido ;)
EliminarHola Potro, estoy intentando modificar el ancho de este gadget a 200px y mantener la altura a 57px y algo estoy haciendo mal. La imagen sin poner el cursor encima encaja a la perfección pero justo en el momento de poner el cursor encima desaparece no entiendo porqué. He estado viendo las anteriores respuestas y no consigo dar con una solución. Me podrías decir por favor que debo cambiar exactamente en el código para que funcione? Eres un crack compañero muchos saludos y muchas gracies por adelantado!
ResponderEliminarHola, siempre que pongas un menú en la cabecera de una plantilla original de Blogger debes seguir primeramente estos pasos:
Eliminarhttp://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html
Después de seguir esos pasos desaparecerá tu problema. Saludos.
Muchísimas gracias por la ayuda ahora ya está solucionado, mil gracias y un abrazo!
EliminarPotro, tengo una pequeña consulta, por que en mi Blog no aparece el último icono de Google+, me aparece el icono, pero no da el efecto de transición.
ResponderEliminarMira puedes revisar:
http://www.milutilidades.com/
Hola Nicolás, entré a tu blog pero no he visto puesto este gadget :/
EliminarHola potro!! jeje deberias agregarle el boton de instagram tambien es muy usado.jejejeje un saludo estan buenisimos los botones!! Gracias!!
ResponderEliminarhola potro con el fin de no comentar en otras entradas otros temas me vine hasta la entrada correspondiente, tengo esta duda puse los iconos de redes sociales los que pusiste aca arriba, la pregunta es esta: puedo poner los iconos dentro de este otro widget con todos sus efectos de transicion? este otro widget tambien tiene iconos de redes pero sin efectos en el caso se eliminarian y pondrian los tuyos pero dejando lo demas intacto.
ResponderEliminarla direccion es esta. el blog solo tiene esos 2 widgets
http://pruebasabchoy.b l o g s p o t.mx/
Supongo que se puede, sería cuestión que eliminaras los botones actuales y pegaras estos justo debajo de <div class='sidebar-subscribe-box-wrapper'>
EliminarHola de nuevo Potro! siento ser tan pesado. He añadido un nuevo icono (al primero de los estilos en horizontal) me funciona a la perfección, los enlaces y todo... pero tengo un problema: se alinea justo debajo del primero de los iconos... no sé que debo hacer para que se alinee con los otros a la misma altura y poder centrar después bien el menú... alguna idea??
ResponderEliminarEs que el ancho de todos los iconos en conjunto supera al ancho del blog, tienes que reducir los width que están dentro de .social_bookmarks li y .social_bookmarks li a para que todos quepan.
EliminarHola Potro, antes que nada aplausos para ti...!!!
ResponderEliminarDividí la cabecera en 2, inserté el gadget html en la derecha peeeero los íconos me salen totalmente arrimados a la derecha (al borde de la pantalla) ¿hay manera de centrarlos o de darles un margen para que no salgan tan a la derecha?
Intenté con margin-right: XXXpx; pero no lo he logrado, ¿puedes ayudarme?
(www.juancarlosmarrero.com)
Te anticipo las gracias!!!!
Gracias Juan Carlos. Entré a tu blog y veo los botones pero no los veo pegados al borde del contenedor ni de la ventana, supongo que has podido resolverlo. Buen fin de semana.
Eliminar¡Hola Potro! Genial cada uno de tus consejos. Consulta: en el que son cuatro los íconos, ¿se puede reemplazar por el FeedBunner por Tumblr?
ResponderEliminarPor supuesto F. D.P., mira el comentario #2.1
EliminarBuenas noches Potro!
ResponderEliminar1era vez consultándote por acá. Es imposible colocar estos botones para compartir en las diferentes redes sociales? en vez ir a las redes del blog que publicó el post.
Gracias!
Hola Kay Ad Líbitum, estos botones no son para compartir, únicamente son enlaces para que los usuarios ingresen a cada red social. Para compartir hay estas opciones:
Eliminarhttp://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html
http://ciudadblogger.com/2012/06/botones-para-compartir-que-se-detienen.html
http://ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html
http://ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html
Mira lo que he hecho con este código, le he adaptado un poco y me quedó genial, mira Potro http://www.dudasbecasmec.com (barra lateral izquierda)
ResponderEliminarHola Potro. Muy buenos los botones, tu explicación es excelente (Cosa que sirve a usuarios inexpertos como yo) y me sirvieron mucho estos botones. Pero mientras veía éste post me di cuenta de que la dirección que le pusiste a tu Twitter es twitter.ciudadblogger.com, y eso no se puede hacer simplemente poniendo tu usuario en medio de twitter y .com. Quizá ésta pregunta no esté muy relacionada con tu post, y capaz que no la queres responder. Pero es que me intrigo mucho. Saludos! :)
ResponderEliminarHola Lucas, la dirección twitter.ciudadblogger.com y Facebook.ciudadblogger.com son redirecciones:
Eliminarhttp://ciudadblogger.com/2012/02/crear-un-subdominio-para-facebook-y.html
Muchas gracias por tu rápida respuesta. Recién leí el otro post y lo entendí a la perfección, pero lástima que yo no tenga un dominio en name.com, GoDaddy, o CDmon. Saludos! :)
EliminarEn esa entrada yo menciono esos registrantes porque sé que ellos ofrecen el servicio de redirección, pero no son los únicos, así que es cuestión de que revises si tu proveedor ofrece esa herramienta ;)
EliminarPotro, agradecer tu regreso despues de un año. Se te extrañaba. En segundo lugar, habra un codigo mejorado de la Caja del FanBox de Face deslizante. Porque el de hace dos años, a veces funciona y otras NO... Y darle una mejor visualizacion...Muchas Gracias
ResponderEliminarGracias FROGELIO, de momento no habrá alguna actualización sobre ese gadget. El de jQuery a mí no me ha dado problema, si algunas veces no funciona quizá pueda ser por otro gadget que interfiere. Saludos.
EliminarHola, potro: ¿Sabes cual es el código para agregar tumblr a la opción de 5 botones en lugar de twitter?
ResponderEliminarHola, mira el comentario #2.1
EliminarHola Potro, Gracias por compartir esta opcion, lo habia estado buscando desde hace mucho tiempo y me es de mucha utilidad contar con tu entrada. Ya los puse y logre incluir mi nombre de ususario en tres de ellos pero no me funciona el de RSS, podria quitar ese boton? Y si fuera asi desde donde tendria que borrar? mi blog es: sweeteracupcakes.blogspot.com te agradezco de antemano.
ResponderEliminarHola Susy, he entrado a tu blog y sí que lo veo funcionando, pero si lo quieres quitar sólo elimina esta parte del código:
Eliminar<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
Buenas buenas!
ResponderEliminarDisculpen la molestia pero quería consulta como hago para que estos botones, cuando les doy click, se abran en una pestaña nueva? No quiero que al tocar el boton salgan del blog. Sino que continúen en el mismo y que la red social se abra en otra pestaña.
Espero ser claro con la pregunta.
Muy bueno tu blog Potro! Mis felicitaciones!!!
Un abrazo!
Hola, mira esta entrada, ahí verás cómo hacer que los enlaces se abran en otra pestaña:
Eliminarhttp://www.ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
No funciona para activar, mi cuenta de fb ... he escrito en nombre tanto junto y tambien repetando espacios ya que mi pagina de fb esta compuesta por tres palabras, pero no hay manera... como puedo agregar el instagram? gracias! :)
ResponderEliminarEn el comentario #38.1 he mencionado cómo sustituir alguno. Lo de Facebook no sé, quizá no estás poniendo correctamente el nombre de usuario.
EliminarHola Potro, soy yo de nuevo con otra pregunta.
ResponderEliminarHe puesto en mi web el widget de las redes sociales que tu tienes, pero le he aumentado el tamaño, los problemas son dos:
1º) Al aumentar el tamaño, la capa transparente que hay encima de cada icono, se ve pero de un tamaño más pequeño que el tamaño de la imagen del icono. Como pongo esa capa al mismo tamaño?
2º) De los 5 iconos, el 1º cuando pincho para comprobar si funciona, me dirige a una pagina que salen solo textos, números..etc. ¿Como hago para solucionar eso?
Gracias de antemano, y perdona por ser tan pesado.
Hola, en esta parte se encuentra la imagen semitransparente, si la quieres más grande tendrías que editarla:
Eliminar.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
}
Es posible que uses Chrome, por eso no ves el feed interpretado porque el navegador no puede leer esos códigos. Si lo miras en Firefox (por ejemplo) verás tu feed sin problema. Una opción es que uses Feedburner (busca aquí en el blog hay un tutorial sobre ello) para que Chrome pueda leerlo en un formato diferente.
Y a en ese widget, como podría quitarle el marco que lo bordea, o que no se viera?
Eliminar¿Te refieres al borde blanco? Ese es el fondo del gadget de tu plantilla. Si quieres quitárselo sólo a ese gadget prueba con estos estilos:
Eliminar#HTML1 .sidebar .widget {
background: transparent !important
}
Potro, he puesto en mi web el widget de las entradas populares, pero no me aparece ninguna entrada como popular.
EliminarA que se debe? como puedo arreglarlo?
Es porque tu blog es muy nuevo y aún no hay suficientes entradas, conforme tengas más publicaciones y visitas el gadget podrá recopilar información.
EliminarHola potro espero que me puedas ayudar he puesto el codigo de la segunda version la de 4botones pero me quedaron mal alineados http://tugameloftzone.blogspot.com/
ResponderEliminarHola Diego, dentro de .social_bookmarks li verás un padding:0; cámbialo por padding:0 !important;
EliminarPotro era eso ahora funciona bien gracias por tu ayuda
Eliminarhola en blogspot no hay NADA de diseño no se si sera algo antiguo no lo se
ResponderEliminarporfs respondeeeeeeeeeeeeeeeeeeeee
ResponderEliminarSí lo hay: http://oi59.tinypic.com/1zbw1vs.jpg
EliminarExcelente. Muy útil, práctico y con aspecto dinámico.
ResponderEliminarHola Kal, en esta parte de los estilos:
ResponderEliminar.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
Ahí verás varios background-position, cambia esos valores (-57px) por otro hasta que se adapte al tamaño que has elegido.
Buenas Me gustaria tener la barra grande pero no quiero rss podria ponerme instagram?¿ Grtacias saludos!
ResponderEliminarHola, mira el comentario #2.1
EliminarHola potro, en mi blog tengo puesto la segunda opcion que son tan solo cuatro. No sé si se podría cambiar el primero de la izquierda (que es naranja) por uno de youtube. ¿Sabes si se puede hacer? Gracias
ResponderEliminarHola, mira el comentario #2.1
EliminarHola Potro tengo un problema con la transicion la parte del Logo no sube del todo y por lo tanto no llega a la mitad del contenedor En estos momentos tengo los valores de ancho y alto puedes observar abajo. Te dejo el Blog http://cursodecadd2d.blogspot.com/ .
ResponderEliminarPor otra me gustraría abrir el Link en otra ventana nueva ya q actualmente esta habriendo en la misma pagina como podría solucionarlo. Gracias de antemano. Saludos
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:41px;
--------------------------------------
Tengo como valor -57px
.social_bookmarks .iconfacebook:hover{background-position:center -57px;
background-color: #37589b;}
Hola Robert, no he encontrado estos botones en tu blog.
EliminarBuenos días. Buen efecto, sin duda. Gracias. Pero ¿cómo implemento estos botones en mi web en lugar del blog? GRACIAS
ResponderEliminarHola lilolaleilo, los estilos ponlos en tu archivo CSS, y la estructura HTML dentro del BODY de tu página.
Eliminaramigo mil gracias, quedó hermoso
ResponderEliminarMe alegro que te haya gustado tanto como a mí :)
EliminarSimplemente magnífico!!
ResponderEliminarMuchas gracias.
Gracias Potro muy util, soy nuevo en el mundo blogger, gracias por tu aporte
ResponderEliminarHola amigo, excelentes botones pero no me funcionan en mi pagina web, ésta no esta online todavia y esta hecha con html5 css3 responsive, lo menciono porque podria ser eso o por no estar en linea.
ResponderEliminarLo coloqué en varios lugares y nada sale incompleto. Lo probe en blogger y perfecto
Espero tu ayuda. Gracias
Habría que verlo puesto para saber cuál es la razón por la que no te funcionan.
EliminarHola una consula, quisiera saber como haz puesto los botones de redes sociales: Facebook, twiter y google + debajo de tus entradas, no se si me puedes explicar o indicarme en donde lo puedo encontrar la publicación, pq no lo encuentro
ResponderEliminarespero q me puedas ayudar, gracias por anticipado
No tengo una entrada sobre ello pero puedes poner el código de cada botón en el post-footer de tus entradas.
EliminarPor cierto, aquí hay un par de opciones:
Eliminarhttp://www.ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html
http://www.ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html
Hola, una consulta, al intentar hacer el procedimiento tal cual, me marca que Debe contener como máximo 2,083 caracteres y me pide corregir un error.
ResponderEliminarGracias, Saludos.
Hola, ¿cuál es exactamente el error que te aparece?
EliminarHola potro me gustaria saber si existe algun lugar donde pueda sacar mas iconos digamos no quiero el de twiter y me gustaria ponerle linkedin pero deseo que sea de la misma familia de botones ya le he dado vueltas y no encuentro el boton que sea similar
ResponderEliminarIdénticos a estos no sé, si quieres date una vuelta por iconfinder, pero lo más seguro es que si quieres que todos tengan el mismo diseño entonces tendrás que apoyarte de un programa de edición de imágenes como Photoshop.
EliminarHola Potro gracias porel aporte pero al colocar el codigo se inserta bien pero queda uno montado arriba de otro, de echo ya reduci la cantidad de botones dejando solo 3 que son los que me interesan pero no se que hacer para que vayan alineados hacia el lado. Gracias.
ResponderEliminarPodrían ser varias causas, ya sea un error de los estilos, o el ancho de la columna donde se coloca, o alguna modificación que hayas hecho en ellos... habría que ver para saber la causa exacta y su posible solución.
EliminarHola!, me parece una buena opción pero la que busco es la que tu tienes en el lateral derecho , ese de Síguenos en las redes sociales, ¿lo tienes posteado en el blog? Si no es asi ¿donde lo coseguistes?
ResponderEliminarGracias, Eimi Romane
Hola Potro,
Eliminarme uno a la petición de Eimi.
Muchas gracias,
Saludos!!
Este comentario ha sido eliminado por el autor.
Eliminarese no es un gadget como tal, lo que se hace es crear una caja contenedora con pestañas desde tu plantilla html y luego en la sección de diseño aparecen los apartados pestaña 1, 2 y 3 donde colocan los 3 gadgets (facebook, google+ y el de blogger), es un poco complejo y largo de explicar, pero creo que hay entienden +o- por donde va la cosa, no les digo donde lo encuentran por que no se en que pagina haya un tutorial para hacerlo.
EliminarMuchas gracias, KeHu León!!! Encontré la entrada donde Potro explica cómo hacerlo (http://www.ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html), pero ahora tengo dos preguntas:
Eliminar1. (la principal) señala que hay varios métodos para hacerlo, no me queda claro cuál usa él ¿ jQuery?, y
2) (secundaria) ¿se podría poner en las pestañas de la caja imágenes en vez de texto?
Muchísimas gracias!!!
Hola, la caja de pestañas que uso es esta:
Eliminarhttp://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html
¡Saludos!
Esta muy bueno esto, pero me queda una duda, como hago para que al oprimir el botón se abra en una nueva pestaña y no en la misma de mi blog, gracias por tu aporte
ResponderEliminarYa lo eh solucionado
Eliminarhola como podria ponerlos de manera vertical y fija en mi pagina?
ResponderEliminarsaludos
Excelente blog, muchisimas gracias por compartir tus conocimientos. sigue adelante con tu esfuerzo. gracias de nuevo
ResponderEliminarhola un consulta como puedes agregar otro botón de red social como el youtube, lo intente, pero no me bota la imagen, como es que ppuedo hacer que se muestre la imagen, el link del que jalo la imagen es del dropbox pero nada, haber si me puedes ayudar
ResponderEliminarNo estaría de mas poner como añadir un botón por ejemplo a YouTube o Vimeo
ResponderEliminarBuen día, saludos amigo. La verdad quiero felicitarlo por su aporte y desearle muchos éxitos, yo no conozco casi nada de programación pero si hago algunas cosas, logre cambiar el icono para la que necesito, pero quería preguntarle en el caso que yo quisiera que los iconos no estén tan pegados o separarlos un poco más cada uno, que debería de hacer, porque el espacio que quiero que llenen es de aproximadamente 650px a 700 px que es la zona horizontal donde van las noticias y cosas así. entonces quería hacer que todos se distribuyan a esa medida o es decir ir alejando uno de otro hacia el lado derecho como unos 10px. La verdad me agradaría muchísimo su pronta ayuda a esto, y como dije antes lo felicito porque de esta manera apoya y ayuda a muchos que están iniciándose en este campo.
ResponderEliminarHola! Seguí tus pasos y guardé los cambios, sin embargo no aparecen los íconos en mi blog. Cuando reviso en el diseño aparece el gadget configurado, pero cuando abro el blog no están ahí, es como si no se activaran, qué hago?
ResponderEliminarhola tengo esto .ico_download {
ResponderEliminardisplay: inline-block;
background-image: url(spritebox-sprite.png);
background-repeat: no-repeat
}
.ico_download {
background-position: -0px -0px;
height: 118px;
width: 118px
}
como lo incorporo a el código gracias
Donde se encuentra mas link de iconos para agregar como tumblr, instagram.
ResponderEliminarBuenas.
ResponderEliminarConsulta, como hago parar que se vea en mi pagina html?.
Saludos
Super buenos estos botones, gracias.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEra lo que estaba buscando! Me quedó espectacular en un mix con esta entrada: http://www.ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html
ResponderEliminarAsí me quedó: https://adictos-enserie.blogspot.com.ar/
Saludos!!
Cómo hago para tener en la primera opción los botones de Twitter, Instagram, Google + y para enviarme un nuevo correo?? Gracias, mi blog es A Blue Bookmark :)!
ResponderEliminar