Barras deslizantes de Facebook, Twitter e Informaciones

 

¡Que tal jimderos!, en ésta oportunidad les traigo una barra deslizante con 3 contenedores/box, que están compuesto por Facebook: contenedor de fanspage. Twitter: contenedor de perfil más seguidores. Informaciones: contenedor para allí poner mensajes/info para los visitantes. Algo nunca antes visto en Jimdo ;-) 


Paso 1: Instalar código en head


<link href='http://cirtdesign-host.blogcindario.com/ficheros/barras_deslizantes2013/estilo.css' rel='stylesheet' type='text/css' id='CirtDesign_Barra2013' />

Paso 2: Instalar código en un Widget/HTML


<div id='barra_s1' class="BARRA-FACEBOOK">
<img src='http://cirtdesign-host.blogcindario.com/ficheros/barras_deslizantes2013/fb.png' style='float:left;' alt="" />
<div style='background: #3c5a98; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<div class='contenido_box'><iframe src= "//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCirtDesign&amp;width=238&amp;height=328&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:238px; height:328px;"></iframe>
</div></div></div>

<div id='barra_s2' class="BARRA-TWITTER">
<img src='http://cirtdesign-host.blogcindario.com/ficheros/barras_deslizantes2013/tw.png' style='float:left;' alt="" />
<div style='background: #00a0e8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<div class='contenido_box'>
<div class="textwidget"> <script type="text/javascript" src="http://cirtdesign-host.blogcindario.com/ficheros/barras_deslizantes2013/twitterJS.js"></script> <div id="twitterfanbox">
<script type="text/javascript">
//<![CDATA[
fanbox_init("CirtDesign");
//]]>
</script> </div> </div> </div> </div> </div> </div>

<div id='barra_s3' class="BARRA-INFORMACIONES">
<img src='http://cirtdesign-host.blogcindario.com/ficheros/barras_deslizantes2013/i.png' style='float:left;' alt="" />
<div style='background: #7390b8; height:325px; margin-left:38px;padding: 8px 5px 0pt 50px;border-radius: 0px 0px 0px 10px;'>
<div class='contenido_box'>
<h1 style="background-color:#7390b8; width:auto; color: white; text-align: center;">
Informaciones</h1>
<!-- Info 1 -->
<div class="message-info">
<strong>Info 1:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<!-- Info 2 -->
<div class="message-info">
<strong>Info 2:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<!-- Info 3 -->
<div class="message-info">
<strong>Info 3:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<!-- Info 4 -->
<div class="message-info">
<strong>Info 4:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<!-- End -->
</div></div></div>

Información

En los elementos coloreados/destacados con color gris, es donde deben sustituir por sus nombres se usuarios.

Última actualización: 23 de Abril del 2013

Escribir comentario

Comentarios: 14
  • #1

    Mundo DN (jueves, 18 abril 2013 23:02)

    Excelente Tutorial, @DanielCadaRuiz

  • #2

    CirtDesign! Expertos y hábiles en Jimdo (jueves, 18 abril 2013 23:04)

    Muchas Gracias @MundoDN, @DanielCadaRuiz!!, siempre siguiendo nuestra web, muchas gracias :-D

  • #3

    Jhoseph Guaraco (viernes, 19 abril 2013 10:38)

    Gracias me sirvio de mucho pasate por mi WEB me encanto eso es lo que necesitaba...

  • #4

    CirtDesign! Expertos y hábiles en Jimdo (viernes, 19 abril 2013 15:00)

    Gracias @Jhoseph Guaraco! se te ve muy bien.

  • #5

    L-F (domingo, 21 abril 2013 22:00)

    Muy bueno!!! pero no me sirve el de twitter....

  • #6

    Nitrogendesign (lunes, 22 abril 2013 23:58)

    oye chico cojones esto está buenísimo muy bien te felicito

  • #7

    CirtDesign! Expertos y hábiles en Jimdo (martes, 23 abril 2013 16:16)

    Hola! @L-F, sí muchas gracias por avisar, ya está solucionado el problema solo copia el código nuevamente.

  • #8

    CirtDesign! Expertos y hábiles en Jimdo (martes, 23 abril 2013 16:18)

    Hola! @Nitrogendesign, Muchísimas gracias por tu comentario.

  • #9

    L-F (martes, 23 abril 2013 19:32)

    Gracias CirtDesign un saludo!!

  • #10

    edinson (jueves, 09 mayo 2013 20:08)

    Este codigo esta Muy Exelente @CirtDesign te felicito un saludo para ti de parte de Up!

  • #11

    alisonnet (domingo, 11 agosto 2013 22:08)

    Felicidades sos un Genio sin dudas...

  • #12

    CirtDesign, Expertos & hábiles en Jimdo (lunes, 12 agosto 2013 21:19)

    Hola! @edinson y @alisonnet Muchísimas gracias por su apoyo! ;-)

  • #13

    mundogsye (viernes, 11 octubre 2013 10:11)

    Tengo una inquietud: en la parte de los elementos coloreados/destacados con color gris, es donde deben sustituir por sus nombres se usuarios. Pero solo veo el de twitter. Ademas de ello, se debe colocar el enlace de la cuenta de twitter, o el nombre de la cuenta de twitter y si es asi, hay que anteponerle el @?
    Por otra parte, como se hace con la parte de facebook?

  • #14

    CirtDesign, Expertos & hábiles en Jimdo (sábado, 12 octubre 2013 16:28)

    Hola! @mundogsye, Solamente se requiere el nombre de usuario, y no hay que incluir el @.-