El código de este post, es un código de ciudad blogger, al cual simplemente le he añadido la propiedad width:px; para ajustar el botón y que este no tape los bordes de nuestro blog. Para este post utilizaré una imagen de Facebook ustedes pueden poner la imagen de su red social favorita.
Para añadirlo a tu blog ve a Diseño > Edición de HTML > con la ayuda del buscador de tu navegador (Ctrl + F) busca la etiqueta </body> y justo antes pega el siguiente código:
<a href='http://www.facebook.com/usuario' target='_blank' title='Sígueme en Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdMuB8I5stF2uDfdtVdD70WHbb4kylz7xALamtqwY32S5bb4Rt_ZD3fLc0EKnYFMOp6_vxEpBDqcp6ohO_s8qb_9j7jAylzjCXhhDhE_tDkUmaL6edpSn04AwOCQhbUrEQLoJNI3VcPA/s320/Facebook-2.jpg" style="width:30px; display:scroll;position:fixed;bottom:225px;right:0px" /></a>
Lo que está en color azul cámbialo por la dirección de tu Facebook, Twitter, Icono RSS, etcétera. En este caso tenemos facebook.
Si quieres poner tu propia imagen, cambia lo que está en color rojo por la url de tu imagen.
Lo que está en color celeste cámbienlo por el texto que ustedes quieran.
Si el botón te tapa parte del borde de tu plantilla ajusta los pixeles en width:30px se los dejo en color amarillo.
También pueden ajustar la altura a la que se verá el botón en bottom:225px y la alineación si lo quieren al lado izquierdo cambien right por left.
Vía | Ciudad Blogger
27 comentarios:
Genial! Hace semanas que andaba buscando, pero ningún codigo me funcionaba bien... ^^
Como agradecimiento, te pincho en la publi! jajaja
Me alegra saber que lo has encontrado en este blog...
Un saludo y gracias por comentar!
Muchas gracias por el código, a mi me funcionó de perlas
Excelente, muchas graciasss!!!
Muchas gracias, me has solucionado el problema del botón flotante de Twitter. Saludos. http://jorgefabianvillalba.blogspot.com
Hola Jorge F. Villalba, que bueno que te ha servido el post, me he pasado por tu blog y se ve perfecto.
Saludos!
oye muchas gracias por todo, pero tengo una pregunta, como hacer para que tambien aparezca en las paginas???
Hola Mauricio Rangel, para ponerlo al final de cada artículo, busca en en tu plantilla la siguiente línea de código:
<p class='post-footer-line post-footer-line-3'/>
Justo antes pega este código:
<a href="URL-DE-TU-ENLACE" target="_blank"><img src="http://3.bp.blogspot.com/_CJgyaq5cULk/S4J4hcZFYWI/AAAAAAAAArM/dIqF5xgzQdU/s320/Facebook-2.jpg" title="Sígueme en Facebook" /></a>
Guardas los cambios y el botón tiene que aparecerte al final de cada post.
Saludos!
hola junto con saludarte, como poner mas iconos deslizantes junto con el de facebook , asi como va este?, gracias por tu buena voluntad
Hola Melosoman, pues solo tienes que volver a pegar el mismo código más abajo, y cambiar los valores en la posición del icono,fíjate en el código de arriba donde dice display:scroll;position:fixed;bottom:225px;right:0px" /></a> cámbiale el valor 225px por 350 por ejemplo para que el nuevo icono aparezca a 125 píxeles al lado del otro.
Un saludo!
me ha servido a la perfección!! pero hay manera de que se minimice después de la primera vista??
Hola Aliorrala18, no lo se si habrá manera, pero si buscaré la manera de hacerlo ya que sería interesante que después de la primera vista se minimizará el botón, si tengo resultado lo posteare en este blog.
Un saludo!
Hermano , ayuda,, me sale 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 "body" must be terminated by the matching end-tag ""
no se pq, hago lo q me dices.. ayudame si.. Saludos desde Nicaragua...
Hola Frank HH, no se que decirte, ya que el código está funcionando perfectamente. Déjame la URL de tu blog para ver el código de afuera. Saludos!
Gracias, miles de gracias, me has ayudado muchísimo...areka-crafts-manualidades.blogspot.com
Hola Areka, gracias por tu comentario, y que bueno que ta a sido de ayuda. Saludos!
Excelente! Me sirvio! DTB.
gracias :D eres el unico al que le entendi XD
oye XD y no hay forma de que el boton flotante no este pegado a la orilla?? si no que pues >_> este flotando XD saludos :D
SUTRACREZ, que bueno que te a servido.
susei, me alegra saber que encontraste la solución en este blog. Tienes que ajustar el valor width:30px por 20px o 10px dependiendo de la distancia que quieres que tenga. Saludos!
gracias man se sirvio de muchos saludos y un abrazo. ====== alien2309
muy buena paginas...!!! me ayudo de mucho... gracias no se como agradecerles... es lo q estaba buscando :D me alegra q haya aportes asi como este ;)
saludos...
hola, necesito tu ayuda, de esto no se nada,, quisiera que mis etiquetas fueran rectangulos con bordes, y no se si se puede y hay que hacer un menu lateral (que de todas formaslo quisiera con el mimo formato que te hablé antes y no se como hacerlo, ademas me gustaria mi inicio fijo y las actualizaciones a continuación.
Ayudame porfa
gracias de antemano
Muy sencillo de aplicar.. Gracias lo estaba buscando..
Justo lo que estaba necesitando para mi web, ya tenia montado la pestaña para el livechat y ahora gracias al codigo de este blog tengo la pestaña del facebook, twitter y youtube, sigan asi, excelente sitio.
gracias fue de mucha ayuda
Quieres Comentar
Todos los comentarios están siendo leídos y moderados.
- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible
¿NO PUEDES COMENTAR?
¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!
NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS