9 de febrero de 2013

Cajas deslizantes laterales de Facebook,Twitter y Blogger.

A pedido de un visitante es que decidí elaborar esta entrada. Si se fijan bien a la derecha de este blog vamos a encontrar dos cajas que al hacer hover sobre ellas se abre una caja de Facebook y también de Twitter. En este caso les voy a enseñar a colocarlas en el blog de ustedes y además también la de Blogger para obtener seguidores ahí también.
Es muy sencillo de implementarlo, simplemente presten atención a los pasos y en pocos minutos lo van a tener en sus blogs.

El primer paso es ir a nuestra plantilla HTML, apretamos Ctrl+F y abrimos el buscador del navegadores y buscamos lo siguiente: ]]></b:skin>

Arriba de eso colocamos los siguientes estilos:


* Seguidores Blogger */
.barrightblogger { background: url('http://3.bp.blogspot.com/-M5A-TLdB58E/TpOxL5GAReI/AAAAAAAAAN0/gEa0HRqhX4k/s1600/bl_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}
.barrightbloggerc { background: url('http://3.bp.blogspot.com/-gQ9PACjKc2I/TpOxMv4CyiI/AAAAAAAAAN8/FyEncEGNCbM/s1600/bl_cg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:50px; z-index:1100;}
.barconteblogger {margin:12px 0 0 47px}

/* Twitter */
.barrighttwitter { background: url('http://2.bp.blogspot.com/--gRMUITrjwM/TpOxLpClllI/AAAAAAAAANs/l88iteOo244/s1600/tw_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:210px; z-index:1000;}
.barrighttwitterc { background: url('http://2.bp.blogspot.com/-B97DZMK7wus/TpOxNSwRhPI/AAAAAAAAAOU/A-RjcC6WYjk/s1600/tw_ag.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:120px; z-index:1100;}
.barcontetwitter {margin:0 0 0 47px}

/* Facebook */
.barrightfacebook { background: url('http://3.bp.blogspot.com/-3xq-Se4UF9w/TpOxNLDMYmI/AAAAAAAAAOM/yaPj4IUjnQ0/s1600/fb_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:370px; z-index:1000;}
.barrightfacebookc { background: url('http://2.bp.blogspot.com/-Cum28YwF4d8/TpOxM_lUKMI/AAAAAAAAAOE/L4pJ91PTVz4/s1600/fb_bg.png');background-repeat: no-repeat; width:288px; height:345px; position:fixed; right:0px; top:185px; z-index:1100;}
.barcontefacebook {margin:12px 0 0 47px}



En Rojo les dejé marcado dónde comenzaría el código de estilos de cada red social y luego en azul el enlace de las imágenes que puedan subirlas a sus propios servidores y reemplazarlas ahí mismo.

Bien, ahora buscamos lo siguiente en nuestra plantilla HTML (recuerden de abrir el buscador del navegador apretando control+F):  </body> y ARRIBA de esa etiqueta pegamos lo siguiente:


<!-- SEGUIDORES BLOGGER -->

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3082905992843096175" style="width:240px;border:0px solid #ffffff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '6';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-3082905992843096175',
site: '00286525615627339881' },
skin);
</script>
</div></div>
<!-- FIN SEGUIDORES BLOGGER -->

<!-- TWITTER -->

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 30000,
width: 240,
height: 250,
theme: {
shell: {
background: '#33ccff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#33ccff'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('Hogardelblogger').start();
</script>
</div></div>
<!-- FIN TWITTER -->

<!-- FACEBOOK -->

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ElHogarDelBlogger&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320" style="border: none; height: 320px; overflow: hidden; width: 240px;background: #fff;"></iframe>
</div></div>
<!-- FIN FACEBOOK -->




Bien, ahora sólo nos toca reemplazar. Lo que está en color violeta lo reemplazamos por la ID nuestra de blogger.
Lo que dice rpp: 3 modificamos el número 3 por la cantidad de comentarios que queremos que muestre la caja de twitter al abrirla.
Lo que dice Hogardelblogger lo reemplazamos por nuestro usuario de Twitter.
Y, por último, lo que dice http://www.facebook.com/ElHogarDelBlogger , lo reemplazamos por nuestra url de la fanpage de Facebook.


Espero que les haya gustado y les haya quedado bien. ¡Saludos!

14 comentarios:

  1. hola esto esta bien , pero como hago con un problema de pajina estatica que tengo

    ResponderEliminar
    Respuestas
    1. Hola Juan, a qué te referís específicamente? No entiendo tu pregunta :/

      Eliminar
  2. Muchas Gracias Amigo eres un genio me sirvio exelente solo una pregunta sino quiero usar el de blooger y lo quiero reemplazar por mi chat cambio el codigo de blogger por el del chat y la imagen sierto???

    ResponderEliminar
    Respuestas
    1. Vos querés poner el chat ahí dentro? Creo que va a ser complicado por las dimensiones de los chats, pero uno bien diminuto se podría, es decir, uno puede poner cualquier cosa dentro de los contenedores, para que, al pasar el mouse por sobre la imágen se deslice la caja y se vea el contenido que agregamos. Tendrías que reemplazar la imágen de Blogger de la pestaña por algo que dice "Chat" o lo que desees y colocar el código del chat dentro de la caja con las medidas justas para que quede encuadrado.

      Eliminar
    2. si a eso me referia por que alos chats le puedo cambiar las dimensiones igual entonces le cambio la imagen de blogger y todo el codigo de blogger desde el color rojo le pongo en codigo del chat cierto?????

      Eliminar
    3. Del último código, que es el contenido, en vez de poner el de Blogger ponés el de tu chat y listo, ajustalo para que quede bien

      Eliminar
  3. hola amigo podrías hacer un tutorial de como poner lo de like y eso de twitter dentro de las cajas deslizantes es que soy nuevo y no se como

    ResponderEliminar
    Respuestas
    1. Hola Ernesto! A qué te referís específicamente? A lo que está dentro de este blog o a otra cosa?

      Eliminar
  4. esta una chingadera, un favor podrias hacer videos tutoriales de ese tema de los botones flotantes por fa tal vez con eso me ayudarias y te agradecia de antemano...

    ResponderEliminar
    Respuestas
    1. Creo que me preguntaste por facebook y te referías a las cajas que están en el lateral derecho de este blog cierto?

      Eliminar
    2. sip, asi es, intentare hacer como me sale... y gracias x la imformacion de verdad toy agradecido, ahora le hare como sale... jejejjejej

      Eliminar
    3. Que tengas éxito, cualquier cosa, ya sabes :)

      Eliminar
  5. a mi la de facebook se me queda en blanco no se porque, la he repasado una y mil veces y esta tal y como tu lo explicas pero sique saliendo en blanco

    ResponderEliminar
    Respuestas
    1. Hola Fernando! Fijate bien, estoy seguro que estás fallando en el último paso, donde tienes que reemplazar la url mia por la url de tu fanpage, a lo mejor se agregan algunso caracteres y no tienes que borrar nada de más. Tienes el blog para que yo pueda verlo?

      Eliminar