Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:
Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:
/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}
Luego SIN expandir los artilugios busca esta línea:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>Arriba de ella agrega la estructura:
<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfMw59Brbj-qQhg6DeaoxN9DVF1hP0eOkTFnVK25DE-d1ZLrQ7utm3_CvVWGRSN3lU6M1jgtejUroOXblmBlCCyuNGfxTLH4t6J09yi9yiZj4mHZDU6pqpQ9iL0K18P18Z8P37oYfiKg/s36/social-facebook.png'/></a></li>
<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPrZE4jS-sx0HZL8xZtIYPJMEytNO2LFwEYyj7B2u3qgG54lOc483Bm6rpQ29w0_JPX0sXfQbqDbTBhprcWrHHVtmJDYvlEnxMtV33_iIKGb20HTPkTE7wRhKz0zWjIWbdC56NGsnP7I/s36/social-twitter.png'/></a></li>
<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLZ2NLQL1cdzjF4Yo051-ADCbworft2twlhDu9UqGBkQN9454vuo9YDDY_4OBQkGKbhyneAuFbByR2H2QpgW0JBHl8G4F5cSBEApfog1g8CHkKwbgWcxTxPVPS4gxBTCZScju-LPpxL0g/s36/social-googleplus.png'/></a></li>
<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPtRAYhq5fdNPQ5TLtSx6vWG7v92lBrzy20Jq3rLNFJiVMuQKdmnyj6q8lWpFh_-sw8EzUJhzcAgkrRoeyxTGTg64ITdKiTWcYU1EQE_C-_iEmgR4pNPRajyb-796LvmBD_KO9kLZla0Q/s36/social-rss.png'/></a></li>
</ul></div>
Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.
Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:
Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.
El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.
Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:
<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>
Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.
El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.
Uy! Soy la primera! que buen post Potro como siempre! Genial! :D
ResponderEliminarGracias por estar al pendiente Antonella :)
EliminarQUE TAL POTRO SOY NUEVA EN ESTO, HICE TODO PARA COLOCAR LOS ICONOS SOCIALES EN MI BLOG, Y ME SALIO CASI BIEN SOLO SOS DETALLES QUE NO ME GUSTAN PRIMERO QUE LOS ICONOS NO SE MUEVEN Y SEGUNDO ARRIBA ME SALE ESTO Y NO SE COMO QUITARLO....AUXILIOOOOOOO
EliminarCOMO QUITO ESTO DE MI BLOG APARECIO LUEGO QUE COLOCARA LOS ICONOS ? /* Iconos de redes sociales ----------------------------------------------- */ #social-iconos { width:100%; height:50px; margin-bottom:10px; display:block; clear:both; } .social-icons{display:table} .social-icons ul { list-style-image:none; list-style-position:outside; list-style-type:none; text-align:right; padding:5px 5px 0 0 } .social-icons ul { padding:0; float:right; margin-bottom:0; } .social-icons li.social_icon { background:none !important; padding-left:0 !important; display:inline; float:left; margin-left:6px; } .social-icons li:hover { -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(-360deg); }
EliminarTienes que poner el código justo en el lugar donde se indica, hay una etiqueta similar a esa pero no es la misma. Debe ser en la que se menciona en la entrada.
EliminarInteresante y bonito de ver, me lo guardo ;)
ResponderEliminarGracias Potro.
Vale, vale, si luego lo pones nos lo presumes ;)
EliminarHola, que genial este aporte... me encanta, aunque no logre ponerlos arriba, quedaron geniales como elementos HTML/Javascript... mil gracias... :)
ResponderEliminarTambién se puede dividir la cabecera del blog, y luego ahí ponerlos, eso en el caso de que les dé problema ponerlo como se explica en la entrada.
EliminarSaludos!
:O Orale, tienes de todo aquí, esta genial la idea... gracias, estupendo :)
EliminarPotro, como siempre genial !!
ResponderEliminarAbrazos
Gracias victor.
EliminarMuy bueno, da un sabor de elegancia con un toque minimalistico.
ResponderEliminarYo no los veo tan minimalistas, pero si cambian los íconos por unos con colores más sobrios seguro que sí se verán de esa forma.
Eliminarbuenísimo! ya tengo botones parecidos para compartir en mi blog, pero genial el post. Saludos!
ResponderEliminarOjo que estos no son para compartir, son sólo para enlazar a las redes sociales y el feed ;)
EliminarEs una excelente idea, saludos
ResponderEliminarGracias y saludos.
Eliminar... genial, pero a mi se me quedaron vertical, no horizontal ¿por qué?
ResponderEliminarSaludos
Es que has omitido el primer paso, el de los estilos.
EliminarAyyy qué tonta, mil gracias por la aclaración y la aportación !!!
EliminarSaludos
Quería darte las gracias por tu gran web. Acabo de abrir un nuevo blog en blogger y me han venido muy bien varios de tus posts para personalizar la plantilla.
ResponderEliminarSaludos!
Gracias a ti, qué gusto que estés encontrando aquí cosas para tu blog :)
EliminarPotro: una duda.
ResponderEliminar¿Tienes el enlace al "paquete" de íconos sociales puesto que, para agregar otros, sería interesante contar con el pack completo.
¡Saludos! y gracias.
Ayer tenía en mente ponerlo y lo olvidé por completo Miguel, pero ya lo he puesto en la entrada aunque no son muchos en realidad.
EliminarGracias por recordármelo :)
Gracias Potro y sí, una pena que sean pocos aunque de resaltar el hecho de que hayas diseñado el de G+ haciéndolo ver como parte de un único pack.
EliminarSaludos =).
Muy buena potro justo lo que necesitaba para ponerlo en mi blog.
ResponderEliminarMuy buena Potro es lo que necesito para agregarlo en mi blog. Gracias.
ResponderEliminarQué gusto que lo hayas encontrado útil.
Eliminarmagnífico post como siempre .Ahora mismo lo pruebo y ya os contaré.Gracias potro
ResponderEliminarGracias por el tutorial, es muy bueno como todos y quería un poco de ayuda.Donde pongo el nombre de mi blog para el feed parece que no lo pongo bien porque me sale luego al pinchar el icono un código fuente.
ResponderEliminarA ver si alguien me ayuda.Lo segundo, si alguien ve mi blog me gustaria ponerlo debajo de las pestañas de la barra lateral izda y no se como hacerlo.
MI blog es http://elbesosalado.blogspot.com
gracias amigos.
El feed está bien Jesús, lo que sucede es que Chrome no muestra el feed interpretado sino que lo muestra como si lo leyera el robot. Si entradas desde Firefox sí podrás verlo.
EliminarLo segundo que preguntas, el último código pégalo en un elemento HTML/Javascript y ese gadget arrástralo hasta donde desees.
Gracias potro, un placer como siempre y agradezco de corazón tu ayuda.Es un blog muy importante para mi.Saludos y uN abrazo.
EliminarComo es de bien nacidos ser agradecidos, aprovecho esta misma entrada como podría haber usado cualquier otra para felicitarte por los tutoriales y trucos que muestras; como copista que no crea gracias a tu trabajo, (y otros en español) voy consiguiendo dejar el blog como me gusta.
ResponderEliminarGracias.
Eres muy amable lnrs, gracias a ti por tomarte el tiempo para agradecer :)
EliminarMuy bueno Potro. Como yo ya tenía los iconos instalados simplemente le agregué las transiciones que indicas en .social-icons li:hover y anda perfecto.
ResponderEliminarUn abrazo.
Bien pensado OPin :)
EliminarHola Potro, muy buen truco XD
ResponderEliminarUna pregunta, como puedo hacer para que haiga un espacio entre los botones y la foto de la portada.
http://2.bp.blogspot.com/-9YYI_0-Jg0E/UKP8zBBjTkI/AAAAAAAAA3A/dC3WiiET8OA/s1600/Sin+t%C3%ADtulo.png
Hola Nicolay, cambia el width:100%; por un valor más bajo, por ejemplo 96%
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarExactamente no sé Calet, según parece tienes que modificar los dos 668px que aparecen en la plantilla, y posiblemente tengas que eliminar el background de .border_textured y de a.read_more
EliminarPara centrarlo tendrías que agregar un margen izquierdo dentro de .thumbnail por ejemplo:
margin-left: 70px;
Pd. He tenido que eliminar el comentario por el aviso que está al final.
Saludos.
Muchas gracias ya lo modifique, y si tenías razón con lo de eliminar los backgrounds ya que me permitió centrar y ajustar las imágenes...Desearía ponerle un borde a las imágenes en la portada, para que la estética no se vea alterada ¿¿se podrá??
EliminarDe todas maneras gracias, como siempre el mejor!!!
Sí, sí se puede:
Eliminar.post-body img {
border: 10px solid #000;
}
Genial, ahora si queda mejor!!!
EliminarMuchas Gracias Potro...como siempre excelentes tutoriales y ayuda!!!
Como siempre, estupendo...pero una cosa....tendrías el icono del mail de la misma linea de iconos ?
ResponderEliminarGracias y un saludo
Jeje, curiosamente sí, el set de íconos no lo trae, pero había hecho uno que al final no me gustó y decidí no incluirlo. Te lo dejo de todas formas por si te sirve:
Eliminarhttp://lh6.googleusercontent.com/-JdYEOXFhJYY/UKRhwVvYl3I/AAAAAAAADWo/cGvAhLrf1M0/s36/social-mail.png
Potro ,como puedo insertar los iconos sociales en mi sitio web.
ResponderEliminarSi con sitio web te refieres a tu blog entonces sigue las indicaciones de la entrada.
EliminarYo me refiero literalmente en una pagina de Internet la cual no es un blog
EliminarDepende de la plataforma, básicamente es poner los estilos en tu archivo .CSS y la estructura dentro del <body>
EliminarComo siempre todo lo que nos compartes es excelente,gracias Potro, tenía tiempo que no pasaba por aquí voy a dar un vistazo para enterarme de lo que me perdí, un abrazo desde Lima Perú
ResponderEliminarQué gusto poder leerte de nuevo Silvia, un abrazo!
EliminarMuy bueno su blog!
ResponderEliminarMe gustaria ver sus publicaciones en Hogar del Ocio.
Saludos
Hola!!! Adjunto dirección del blog para ver que los iconos quedan por encima de la navbar y me gustaría que quedara por debajo....
ResponderEliminarhttp://onegraphicgirl.blogspot.com.es
Muchas gracias!! ;)
No veo la navbar en ese blog anna, supongo que decidiste ocultarla. Si después muestras la navbar otra vez sólo agrega debajo de #social-iconos { un margen superior:
Eliminarmargin-top:40px;
Sí, al final la desactivé porque no me gustaba nada...
EliminarMuchas Gracias!!! Si vuelvo a activarla, lo haré!! ;)
Muy hermoso y delicado, es más me encanto, veré de como aplicarlo ah! y no tienes por ahí a youtube escondido?
ResponderEliminarGracias potro, hermoso aporte!!
Nou :( Pero es casi seguro que en la red (o hasta en Iconfinder) encuentras algún set mucho más completo que este y que contenga los iconos que quieres ;)
EliminarTengo un problema que ya vi de otro usuario, los iconos me salen en vertical y no giran, si realice el primer paso, estilos, pero no me resulta. Una ayuda por favor y gracias por la ayuda
ResponderEliminar¿En cuál blog lo has puesto Henrry?
EliminarHola Potro.
ResponderEliminarSe que este comentario no va aqui pero no se donde ponertelo el caso que no se como hacer que al poner un codigo de un chat como el de Xat, en el codigo que te dan como hacer que solo salga en el inicio y cuando pulses en una entrada o algo no aparezca si se puede... me puede ayudar?
Un saludo.
Hola Afm, usa condicionales:
Eliminarhttp://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
Muchas gracias Potro tenia guardado en mis marcadores las condicionales pero no me acordaba de veras que hariamos los bloggeros sin ti =) (NADA).
EliminarUn saludo Potro
Como siempre genial. Muchas gracias Potro ;)
ResponderEliminarPor nada Olmo.
EliminarComo personalizar el botón de búsqueda del blog para que al buscar el contenido se vea como el tuyo, pero con el icono de mi blog?
ResponderEliminarEl buscador que yo tengo es el de AdSense, pero es casi igual a este:
Eliminarhttp://ciudadblogger.com/2009/11/motor-de-busqueda-personalizada-de.html
En los comentarios de esa entrada verás lo del logotipo.
Hola! Me da un poco de miedo tocar el código HTML de mi blog... si me equivoco, puedo liarla mucho, no??
ResponderEliminarOtra pregunta, puedo poner sólo el icono de Facebook? O los códigos van todos juntitos?
Perdonad la ignorancia, soy muy nueva en este mundillo!
Gracias por vuestros posts!!
Hay que perderle el miedo Eva, sólo son códigos ;)
EliminarDe todas formas puedes practicar primero en un blog de pruebas, y siempre antes de guardar usar la Vista Previa.
Puedes quitar los demás si lo deseas, sólo localiza el código correspondiente a cada uno y elimínalos.
¡Saludos!
Potro muchas gracias por el tutorial! Justo lo que necesitábamos! Un saludo
ResponderEliminarPotro solo comentarte que al poner otros iconos de iconfinder, y al subirlos en imageshack se nos corta mitad del título. (que tenemos situados a la derecha) si entras en el blog no lo verás ya que al poner los que has puesto por defecto en la entrada todo sale bien. Alguna idea de porque pasa esto? Gracias
ResponderEliminarTendría que verlos puestos para saber porqué ocurre lo que mencionas, ponlos y me avisas para revisar.
EliminarHola Potro, mira cómo me aparecen: http://akimiopinion.blogspot.com.es/
ResponderEliminarCómo podría hacer para que aparecieran a la derecha, debajo del cuadro de búsqueda y que no me desplace el título del blog hacia abajo¿? Gracias!
Hola Ash_Teleco, no veo puestos los botones en ese blog, pero si los quieres ahí quizá tengas que ponerlos arriba de <!-- Top Menu -->
EliminarMuchas gracias, he probado donde me has dicho pero me queda mucho hueco entre hasta el menú de página así que lo he puesto en otro sitio y me gusta (ya cambiaré los iconos) lo que pasa que ahora me salen donde quiero, pero me no me aparecen las páginas (tenía Inicio y Contacto). ¿Sabes por qué pasa? Gracias.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola Feed, tendrías que conseguir una plantilla que tenga esa característica, no es fácil adaptarle esa opción.
EliminarPd. He eliminado el comentario por el aviso que está al final.
Saludos.
Hola, he comentado antes, no se si lo has visto. No consigo poner los iconos debajo del cuadro de búsqueda: akimiopinion.blogspot.com
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola, entré pero no veo puestos los botones.
EliminarPd. He eliminado el comentario por el aviso que está al final.
Saludos.
Por cierto, revisa que el problema no sea que hayas eliminado una llave de cierre en los estilos:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
y como hago para agregarlo en un sitio que no esté creado con blogger???
ResponderEliminarcon wordpress, por ejemplo.
Sólo doy soporte para Blogger.
EliminarSaludos.
Hola potro.
ResponderEliminarUna preguntaa, como subir el contenido de una pagina estatica_???
Es decir, que entre la cabecera y el contenido haya menos espacio.
Localiza el ID del contenedor de las entradas y aplícale un margen superior negativo, por ejemplo margin-top:-10px;
EliminarEsos estilos deberán ir en una condicional.
http://ciudadblogger.com/2010/03/condicionales-de-blogger.html
A vale ya lo entendi.) Gracias.
EliminarHola Potro! solucionado...(a medias) era un problema con las medidas de los botones, hemos puesto la medida de los que tienes en la entrada y funciona. Te escribo en la entrada de orbit slider, para un pequeño inconveniente. Un saludo
ResponderEliminarSaludos Potro, como puedo ponerlos abajo del todo?
ResponderEliminar¿De todo el blog? Antes de </body>
EliminarYa lo he probado y, me gustaria saber como ponerlo encima de lo que para ti seria 2012 © Ciudad Blogger. Otra duda que tengo es que, la barra de abajo, (en la tuya pone 2012 © Ciudad Blogger) hay un espacio en el que se ve el fondo del blog y, queda mal, como lo soluciono?
EliminarLocaliza tú mismo el área en tu plantilla, no sé qué elementos tengas ahí, pero puedes ponerlo arriba de lo que tengas, das Vista Previa y ves si es el lugar adecuado.
EliminarPara lo otro puedes aplicar un margen negativo a ese contenedor, a sus estilos, por ejemplo:
margin-bottom: -40px;
antes de que se me olvide, como diferencio el margin-bottom? me aparecen varios y pruebo con todos pero, sigue sin verse bien. Aunque, de todos modos, gracias
EliminarDebes localizar el ID de tu contenedor donde tienes la barra, si a ese contenedor ya le habías aplicado estilos entonces ahí es donde debes poner ese margen.
EliminarHola Potro, al final he puesto los iconos en otro lugar, pero ahora tengo una duda. Si entras a mi blog, verás en la sidebar (al final del todo) los iconos de redes sociales. Si te fijas justo debajo aparece una línea debajo de cada uno. Eso lo hace con cada nuevo widget la plantilla con esta instrucción:
ResponderEliminar#sidebar .widget ul li {
color: #aaa;
border-bottom: 1px solid #eee;
padding: 8px 0 8px 5px;
list-style: none;
}
Donde pone bottom 1px pues me lo pone a cada uno. Mi duda es como hacer que los demás widgets lo mantengan, pero quitárselo al de las dos imágenes de las redes sociales. Gracias.
Un saludo!
Hola de nuevo, he entrado pero no veo que los íconos tengan algún borde.
EliminarSaludos.
Al final he quitado la línea que aparecía debajo de cada widget, me gusta más así. Gracias de todas formas. Una última duda si no es mucho pedir, habría alguna posibilidad de aumentar el texto de las entradas por píxeles y no solo entre 'normal', 'grande', 'la más grande'...¿? Gracias!
EliminarDesde el editor de entradas no, desde la plantilla sí, puedes establecer que la fuente de las entradas sea de mayor o menor tamaño, con estos estilos:
Eliminar.entry-content {
font-size:15px;
}
Muchas gracias! Eres un crack! :-)
EliminarSuper chevere el post amigo y gracias por compartir tanta info...!!! Que tengas un buen fin de semana...!!! :D
ResponderEliminarGracias Pepe, igualmente!
EliminarMuchisimas gracias por estos iconos tan geniales! Es justo lo que quería y posicionados dónde yo quería. Al principio también pensé que se trataba de botones de compartir y lo usé como por ensayar, pero al ver cómo quedo me pareció lo máximo. Y además que el proceso que pusiste para hacerlo es muy fácil. Gracias de verdad!
ResponderEliminarQué gusto que hayan sido de tu agrado, ojalá pueda serle de utilidad a más personas.
EliminarBuen fin de semana!
Hola muy bueno toda la página les quisiera hacer una pregunta no va referido a esto quizas me puedan ayudar!
ResponderEliminarEstaba buscando algún código o cualquier cosa para poner varios videos dentro de una caja no se si me especifico , si me entendieron necesito ayuda!...
No me queda claro lo que buscas, pero aquí hay una galería de videos que quizá te pueda servir:
Eliminarhttp://ciudadblogger.com/2012/10/galeria-de-videos-para-el-blog.html
Potro me podrías explicar como los coloco en un gadget ???
ResponderEliminarGracias
Diseño > Añadir un gadget > HTML/Javascript, ahí pega el último código.
EliminarSaludos.
Potro mira me esta sucediendo algo muy raro..
ResponderEliminarEntro a mi categoria de "Gadgets y Widgets" y me sale el siguiente cartel:
http://bloggerblogwidgets.googlecode.com está solicitando un nombre de usuario y una contraseña. El sitio dice: "Google Code Subversion Repository"
Y me pide contraseña y eso, lo mas raro es que solo me aparece en la categoria que te digo:
http://www.miltrucosblogger.info/search/label/Gadgets%20y%20Widgets
Y hay un hilo abierto en el foro de blogger sobre este mismo tema y segun he leido a varios les ha pasado esto, tal ves tu sepas la solucion a este problema
Hola Juvinao, sí he visto que algunos scripts alojados en Google Code están pidiendo autorización, no sé si los autores de esos scripts hayan modificado algún permiso, o si Google Code esté teniendo algún problema. Si puedes busca el script para descargar y alójalo tú mismo, de preferencia en la plantilla, así no dependerás de ningún servidor que no sea blogspot.
EliminarLocalice el script y lo elimine pero me sigue apareciendo ese cartel, la verdad no se que hacer.
EliminarYo he entrado a esa etiqueta y no me aparece ningún cartel Juvinao.
Eliminarpotro soy muy olvidadiso y no se lo que hice ahora no se porque me sale el mismo mensaje soy novato me puede explicar como hacerlo detalladamente ese cartel sale cada vez que entro al blog por faor ayudame
Eliminarpotro soy muy olvidadiso y no se lo que hice ahora no se porque me sale el mismo mensaje soy novato me puede explicar como hacerlo detalladamente ese cartel sale cada vez que entro al blog
Eliminarme sigue saliendo ese cartel potro ayuda
EliminarHola josebna, no mencionas en cuál blog tienes el problema, pero mira la URL que aparece en el mensaje, busca esa URL en tu plantilla (con las teclas CRTL+F) y elimina esa URL, es un script, así que seguramente algo de tu plantilla que requiere ese script dejará de funcionar.
EliminarHola El Potro! muy buenos los iconos!! ahora te hago una pregunta, como podria hacer para usarlos para compartir en facebook, twitter y google +?
ResponderEliminarOtra pregunta: ¿Qué es el feed del blog?
Hola El Potro! muy buenos los iconos!! ahora te hago una pregunta, como podria hacer para usarlos para compartir en facebook, twitter y google +?
ResponderEliminarOtra pregunta: ¿Qué es el feed del blog?
Muchas gracias!
Hola Pato, mira en la categoría "Facebook", ahí verás otras opciones que sí son para compartir. Respecto a tu otra pregunta, esto es el feed del blog.
EliminarGenial, me ha venido estupendo !!
ResponderEliminarConcha
http://birlocha.blogspot.com.es/
Hola Potro, he agregado la caja de comentarios de FB a mi blog, y ahora por mas que he eliminado los códigos que usé para que apareciera la caja sigue apareciendo, que crees que puede ser?
ResponderEliminarHola Hockster, si aparecen en el blog es porque ahí debe haber alguno todavía, revisa bien.
EliminarCualquier otra duda sobre ese tema deja la pregunta en esa entrada para no desviarnos del tema principal de este post.
Saludos.
¡Queda perfecto! Me recuerda a la camiseta que tienes en la cabecera.
ResponderEliminarHe diseñado unos más: https://www.dropbox.com/home/Public/Iconos%20sociales
Genial, aunque no pude ver las imágenes pero seguro te quedaron de lujo :)
EliminarLos puedes ver en www.vvalcoi.com, es uno de Bitácoras y otro de los premios 20 blogs
EliminarAhora sí :)
EliminarHola Potro, tengo una pregunta aunque no esta relacionada con esta entrada.
ResponderEliminarComo puedo borrar los estilos de los comentarios añadidos de mi blog para poder añadir estos "http://www.miltrucosblogger.info/2012/05/estilos-para-los-comentarios-anidados.html" u otros cualquiera?
Esque para poder poner esos primero necesito borrar los que ya tengo.
Este es el blog donde quiero hacer el cambio: http://www.proyectovhila.com/
Muchas gracias de antemano.
Hola Vhila, no es aquí donde debes preguntar, sino en ese blog ;)
EliminarY podrias decirme como poner los mismos estilos que tengo en los comentarios ponerlos tambien en los añadidos?
EliminarEsque por más que lo intento no doy.
Gracias
Yo aún no tengo ninguna entrada sobre los estilos de los comentarios anidados Vhila, en Vagabundia hay dos entradas sobre ese tema:
Eliminarhttp://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso.html
http://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso_19.html
Gracias, aver si lo arreglo ^^
EliminarHola Potro, disculpam que te moleste, no tiene nada que ver con la Entrada pero te pregunto xq es importante, se me cayo mi blog, lo tenia con el dominio co.cc
ResponderEliminarNo sé qué ha pasado con esos dominios, pero desde hace como 4 o 5 días dejaron de funcionar, incluso no se puede ingresar a la página del sitio.
EliminarHola Potro de tiempos. Mi comentario no tiene q ver con el post.
ResponderEliminarTengo un blog: http://ojoderojas.blogspot.com/ en el cual no se porq a dejado de funcionar un botón q antes funcionaba abriendo una ventana emergente a mi correo. Si entras a cualquiera de las entradas te darás cuenta lo q digo. El botÓn es y está al final de cada entrada, y es "CORREGIR ORTOGRAFIA". Haber si lo revisas y me das el diagnóstico, de antemano gracias.
A mí me funciona bien efrain, he dado click y me abre la aplicación de correo que uso, en mi caso Mail para Mac.
Eliminarno tienes algo similar a esto: www(punto)segelsoft(punto)com
ResponderEliminarsaludos y gracias por tu post!
No Fercol, aún no.
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola F3, el dominio no tiene nada que ver. Si quieres ocultar la sidebar en una entrada sigue los pasos de este post:
Eliminarhttp://ciudadblogger.com/2010/10/ocultar-sidebar-en-las-paginas.html
Pero cambia esta línea:
<b:if cond='data:blog.pageType == "static_page"'>
Por esta:
<b:if cond='data:blog.url == "URL de la entrada"'>
Estas dos entradas también te servirán:
http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
http://ciudadblogger.com/2012/05/las-condicionales-de-blogger-y-las.html
Mil gracias potro! era lo que buscaba. Potro sos un Dios sabelo!
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarHola, mira lo que yo quiero hacer es quitar el sombreado del cuerpo de mi blog asi queda todo blanco. mi blog es http://www.trucosmundogaturro.com.ar
ResponderEliminarHola Franco, agrega estos estilos:
Eliminar.content-outer {
-moz-box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
-webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
-goog-ms-box-shadow: 0 0 00px #333333 !important;
box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
}
Todas las preguntas son respondidas LegacyManga, incluyendo las tuyas. Recuerda que si ves el botón "Cargar más" debes darle click para que te muestre todos los comentarios.
ResponderEliminarpotro una pregunta dicen que la pagina http://vk.com no permite videos pornograficos pero hay miles almacenados y segun tengo entendido es una red social si estoy equibocado disculpa.
ResponderEliminarNo conozco ese sitio, de hecho es la primera vez que sé de él, pero por ahí tiene su página de términos, ahí te enterarás qué se puede y qué no.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminar¿A qué te refieres Martin? es que no veo algún otro comentario tuyo en esta entrada.
EliminarHola potro de tiempos. una consulta q no es sobre el post en cuestión.
ResponderEliminarEn mi blog (ojoderojas.blogspot.com) hace tiempo cree y puse un botón al final de cada entrada (gracias a ti) que era para q los lectores q encontraran un error ortográfico le pincharan para q automáticamente el enlace del botón les llevara a mi correo. Ahora no se porque a dejado de funcionar ese botón: "CORREGIR ORTOGRAFíA". Para q veas ese botón tienes q entrar a una entrada. Te dejaría el código html para q me digas q está mal, pero lastimosamente no sale aquí
De antemano gracias por la respuesta (halla o no halla solución).
Hola efrain, ya te he respondido esa pregunta, mira más arriba.
EliminarHola Potro! Tanto tiempo....jaja tengo la siguiente inquietud: en el blog de asesoramientoconsorcios, están los botones para recomendar el blog arriba y me pasa que me gustaría resaltarlos de alguna manera, se puede poner como un cartelito al lado que diga "Recomendanos!" o algo así??? si los pongo como botones flotantes del lado izquierdo, quedará bien?? o quizá con la entrada que hiciste de efecto página doblada ahí se pueden poner los botones y poner eso....no sé....qué me recomendás??? Saludos!!!!
ResponderEliminarLa verdad es que así como están yo los veo bien, con el page peel no quedará pues ahí lo que se le pone es una imagen, pero insisto, al menos yo los veo bien ahí.
EliminarSaludos.
Hola Pozo+10™, quizá necesites agregar metas para Facebook, y ya de paso agregar microdatos:
ResponderEliminarhttp://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html
Hola Potro,
ResponderEliminarhe puestp estos iconos en mi blog pero quedán muy al margen, yo queria que estuviesen encima del cuadro de busqueda, sabes como hacerlo??
Gracias
Potro una pregunta si subo mis fotos a http://imgbox.com/ y despues pego los cogidos para una entrada en mi blog no hay problemas con blogger o lo toma como spam.
ResponderEliminarComo SPAM no (a menos que las imágenes inserten publicidad), pero siempre es mejor subir las imágenes desde Blogger, para que no tengas límite de tráfico, y para que siempre tengas las imágenes disponibles.
EliminarYa está, he decidido ponerlos en otro sitio, ahí me gustan más. Muchas gracias ^^
ResponderEliminarNo encuentro dicha línea...
ResponderEliminarTengo una plantilla dinámica puede ser por eso?
Sí, es por eso. En esas plantillas no he probado poner nada de esto porque la mayoría de las veces no funciona ahí.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarLo que sucede es que tienes la cabecera dividida, por eso se ve ese espacio del otro extremo. Lo que puedes hacer es ponerle una imagen de fondo a esa área después de #header2{ por ejemplo:
Eliminarbackground:url(URL de la imagen);
Hola el potro quisiera saber si se puede agregar usuarios con contraseñas a un blog como facebook o las redes sociales.
ResponderEliminarGracias
En Blogger no Cristina :(
Eliminarhola Potro, tengo un lio.
ResponderEliminarInstalo los miconos y quedan muy bien, pero a la hora de pinchar en ellos, me dice que la página no existe...en todos y cada uno de ellos, facebook, twitter, google+....no consigo entender por que, puedes ayudarme???
El blog es: http://misdeliciosascomiditas.blogspot.com.es/
muchas gracias!!!
vale, olvida mi pregunta, puse mal los nombres de usuario...solucionado!!, gracias
ResponderEliminarMe alegra que lo hayas resuelto :)
EliminarHEY MEN ES BREVE COMUNÍCATE CONMIGO, OK kestmolg10@hotmail.es
ResponderEliminarTodas las consultas sobre el blog se hacen por este medio.
EliminarSaludos.
Me gusta tu blog, Felicidades. :)
ResponderEliminarDejo un enlace de mi blog si no molesta. Un saludo.
http://blog.dagamaweb.com
Sería posible ubicar los iconos a la izquierda de la página en vez de a la derecha??
ResponderEliminarCuál sería el cambio de script???
Muchas gracias por tus consejos El Potro!
Para ponerlo del lado izquierdo cambia el text-align:right; por text-align:left; y el float:right; por float:left;
EliminarSaludos.
Gracias :D
EliminarBuenas,
ResponderEliminarhe puesto los iconos en mi blog de las redes sociales de tuiter y facebook y me salen en vertical me podrias explicar como ponerlas en horizontal y que tengo que poner? muchas gracias
Sin ver el blog donde lo has puesto me es imposible saber la causa del porqué te aparece así, pero quizá sea por esto:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
No entiendo el primer paso :( ayudame protico
ResponderEliminarSólo tienes que pegar esos códigos donde se indica, la Edición de HTML está dentro de la sección "Plantilla".
EliminarAmigo, tengo una pregunta ¿como hago para centrar los iconos?
ResponderEliminarPara centrarlos cambia el width:100%; por un valor más bajo hasta que quede al centro, por ejemplo 40%
EliminarBuenas. En primer lugar darte la enhorabuena por la pagina. Respecto a la duda: ¿Como puedo cambiar la posicion de los botones para que queden justo debajo de "Buscar" y a la derecha del slideshow que hice con algunos de tus tutoriales? http://tusaquedepuerta.blogspot.com.es/
ResponderEliminarGracias jose luis, tendrías que ponerlos en un gadget y arrastrar ese gadget debajo del menú.
EliminarChe Potro probe con lo que me dijiste pero nada no aparecio ninguna imagen quedo como antes
ResponderEliminarNo veo que tengas puesto el código del fondo en esa cabecera como te indiqué :/
EliminarNo entiendo mucho de esto me podrias explicar un poco mejor :D
EliminarNo entiendo mucho de esto me podrias explicar un poco mejor :D
EliminarEs la manera más sencilla que lo puedo explicar :(
Eliminar¡Hola Potro! Soy muy fan de tus tutoriales ya que me están ayudando mucho a crear mi blog :) Ya coloqué este tutorial y me encanta como queda aunque me gustaría saber si es posible moverlos de sitio y en vez de que queden arriba a la derecha quedasen debajo del "Blueli" de mi cabecera. (http://callmeblueli.blogspot.com) Estuve tocando los códigos pero no conseguí moverlo... ¿Es posible? ¡Gracias de antemano!
ResponderEliminarGracias por tu comentario Blueli♥ :)
EliminarPuedes poner el código de los iconos arriba de
<div class='main-outer'>
¡Saludos!
Potro a mi me pasa exactamente lo mismo que a varios que he visto por aquí, al ponerlos en mi blog me salen en vertical y no se me animan, me pasa exactamente lo mismo con los slider no me salen y no se porque. ¿Tal vez sea porque eliminé los class:tabs al colocar el menu horizontal? Nose..
ResponderEliminarte dejo el blog para que mires como me sale http://elretoalbienestar.blogspot.com.es/
ResponderEliminarYo los veo perfectamente horizontales :)
EliminarHola Potro.
ResponderEliminarMe gustaria poner los botones en el menu que tengo con las paginas adecuadas ya que quedaria mejor pero he probado con todo y nada nose porfavor necesito ayuda.
Un saludo.
Direccion del Blog ---> http://ata-systeem.blogspot.com.es/
No he podido verlo, dice que se ha eliminado el blog.
EliminarEste comentario ha sido eliminado por un administrador del blog.
EliminarSe me ocurre que puedes subirlos añadiendo debajo de #social-iconos { esto:
Eliminarfloat: right;
margin-top: -50px;
margin-bottom: 60px;
Perfecto Potro eres un crack de verdad muchas gracias y felices reyes! :)
EliminarBuen tuto Potro! Me sirvió!
ResponderEliminar¡Saludos!
Hola Potro. Para un "analogico" como yo es una delicia encontrar una joya de ayuda como la que tu prestas. he de decirte que he usado muchas de tus "propuestas", entre ellas esta de los iconos de redes sociales (magnifica). A tu "sugerencia" de agregar mas botones no me pude resistir. Así lo hice pero me surgió el problema de que me corta un poco (poquísimo) la imagen de la cabecera del blog. Soy muy cabezota y me gusta resolver los rompecabezas por mi mismo pero tengo que sucumbir pues he ido probando todo...o al menos eso creo. ¿Podrías decirme que medida debería modificar? Muchísimas gracias y como decía Woody a Buzz Lightyear, ¡Hay un amigo en mi!
ResponderEliminarMuchas gracias por tu comentario MALDIA, ¿en cuál blog los has puesto?
EliminarHola Potro, gracias por responder. Como te dije, soy muy cabezota y he conseguido arreglarlo aunque no ha sido desplazando los iconos, si no utilizando unos mas pequeños, Aun así me gustaría saber que parámetro debería modificar para desplazarlos horizontalmente, por si incluyo alguno mas. El blog es: kalikafilmstv.blogspot.com.es . Como veras, el blog está un poco saturadillo de entradas, pero es de un amigo y el lo quiere así . Y ya que estoy aquí :ºD ¿se podrían poner en el mismo lado derecho pero por debajo de la linea de la cabecera?.
EliminarLo dicho, admiro tu trabajo, no solo el de las entradas, también el de las respuestas a nuestros comentarios. Un saludo.
Pues sería cuestión de que ubiques en tu plantilla el área donde lo quieras poner y ahí los coloques, puedes apoyarte con la Vista Previa siempre para ver si es el lugar indicado.
EliminarPara recorrer los botones puedes reducir el width de los estilos, bajar el 100% por otro valor más pequeño.
Lindos botones para el blog, sencillos y atractivos, saludos.
ResponderEliminarme salen verticales como hago
ResponderEliminar