Hoy les brindo un código con el cual vamos a hacer que los botones con enlaces hacia nuestras redes sociales para que los visitantes de nuestro sitio se hagan nuestros seguidores floten en un lado de nuestro sitio puede ser en el lado derecho o izquierdo a gusto de cada cual este código lo hice para que todo vaya en un mismo lugar,para no tener que tocar nuestra plantilla el código tiene para facebook,twitter,feedburner,google+,añadir a favorito y linkedin puedes añadir todos los que quieras como también podemos modificar el tamaño la distancia de arriba hacia abajo y mucho mas.
Para implementarlo es muy sencillo simplemente lo añadimos en cualquier gadget lo mismo de arriba que de abajo que de un costado para hacerlo vamos a diseño > añadir un gadget > HTML/Javascript Añadir y pegamos el siguiente código:
<div style="position: fixed; top: 30%; right: 0;" text-align: left; margin: 0 0 0px;">
<br />
<a target="_blank" href="http://facebook.com/tubetrucos" title="sigueme en facebook"><img src="http://dl.dropbox.com/u/25944020/para%20tube%20facebook.png" alt="sigueme en facebook" width="35" height="35" /></a>
<br />
<a target="_blank" href="http://twitter.com/TubeTrucos" title="sigueme en twitter"><img src="http://dl.dropbox.com/u/25944020/para%20tube%20twitter.png" alt="sigueme en Twitter" width="35" height="35" /></a>
<br />
<a target="_blank" href="http://www.youtube.com/user/jorge79357?feature=mhsn" title="sigueme en youtube"><img src="http://dl.dropbox.com/u/25944020/para%20tube%20youtube.png" alt="sigueme en youtube" width="35" height="35" /></a>
<br />
<a target="_blank" href="https://plus.google.com/u/0/106414615628908973724/posts?hl=es" title="sigueme en google+"><img src="http://dl.dropbox.com/u/25944020/google%2B1%20tube).gif" alt="sigueme en google+" width="35" height="35" /></a>
<br />
<script type="text/javascript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://www.tubetrucos.com/";
var titulo="tube trucos";
window.external.AddFavorite(url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presione Ctrl+D para agregar esta pagina en sus Marcadores");
}
}
</script>
<a href="javascript:agregar()" title="Añadir a favoritos"><img src="http://dl.dropbox.com/u/25944020/favoritostube.gif" alt="Añadir a favoritos" width="35" height="35" /></a>
<br />
<a target="_blank" href="http://feeds.feedburner.com/tubetrucos" title="sigueme en feedburner"><img src="http://dl.dropbox.com/u/25944020/feedburnertubegif" alt="sigueme en feedburner" width="35" height="35" /></a>
<br />
<a target="_blank" href="http://uy.linkedin.com/home?trk=hb_logo" title="sigueme en linkedin"><img src="http://dl.dropbox.com/u/25944020/intubetrucosgif" alt="sigueme en linkedin" width="35" height="35" /></a>
<br />
</div></div>
Un ejemplo de como quedaria:
Les marque lo que deben de cambiar y modificar
Lo que esta en rojo
position: fixed; top: 30%; right: 0 es la distancia de harriba hacia abajo y separacion del borde como esta en la imagen esta en 0
title="sigueme en facebook" alt="sigueme en facebook" Titulo de la imagen y cuando el cursor pase por encima de esa imagen les va a decir en este caso sigueme en facebook
<img src="http://dl.dropbox.com/u/25944020/para%20tube%20facebook.png" esta es la imagen a mostrar la cual si quieren la pueden cambiar o pueden mantenerla como quieran yo la tengo alojada en dropbox
width="35" height="35" esto es el ancho y la altura de la imagen
y esas mismas opciones con las demas .
en el caso de añadir a favorito este texto lo pueden cambiar a sus gustos:
alert ("Presione Ctrl+D para agregar esta pagina en sus Marcadores
Lo que esta en naranja
href="http://facebook.com/tubetrucos" es la url correspondiente a la imagen con los demas es lo mismo deben cambiarlo por sus url
en el caso de favoritos
var url="http://www.tubetrucos.com/"; la url de su sitio web o blog
var titulo="tube trucos";el titulo de su web o blog
Bueno una ves copiado y puesto el codigo en el lugar correspondiente y hecho los cambios debidos guardamos y es todo, espero y les haya servido de halgo.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
y si quiero poner arriba la barra como lo hago?
ResponderEliminarAnónimo:Hola,gracias por tu visita si te refieres a la parte superior y no la barra lateral.pues es facíl en el codigo donde dice fixed; top: 30%
ResponderEliminareliminas el 3 Y eliminas todos los br/
El resultado sera horizontal arriba a la derecha
Para controlar la distancia de una esquina a otra es
donde dice right: 0; el cero cambialo por el numero que quieras hasta que te guste el lugar donde queda.facíl verdad? bueno cualquier duda puedes preguntarme .saludos
Muy buen post, y para dejar los botones de forma horizontal como en la barra lateral de tubetrucos, que parte del codigo debo modificar?
ResponderEliminarde antemano muchas gracias
saludos
David
...los botones horizontales en la barra lateral, como propone el post
ResponderEliminarsaludos!
David
Hola David los botones que estan en la sidebar,barra lateral como le dices son con un codigo diferente es muy sencillo de inplementar tambien lo que voy a hacer es crear una entrada para poder explicarte mejor hoy mismo la puedes ver y ahí me dices que tal te resulto.saludos :-(
ResponderEliminarmuchísimas gracias! estaré atento
ResponderEliminarsaludos
David
David ya esta publicada la entrada la puedes ver aquí espero y te ayude cualquier cosa ahí me haces saber.
ResponderEliminarhttp://www.tubetrucos.com/2012/02/colocar-los-botones-de-redes-sociales.html
buenísimo muchas gracias
ResponderEliminarQue bueno que te haya gustado gracias por tu visita y comentario.saludos
Eliminar