Seguidores Blogger, Twitter y Facebook – Flotantes con efecto deslizante (Editado)

Hola !! Saludos a todos los seguidores de este magnifico blog, hoy comparto con ustedes este fanbox que quizás lo hayan visto publicado de otra manera pero en esta ocacion les aseguro que es diferente. 

El truco parecerá un poco largo pero es relativamente facil si lo siguen paso a paso. No te preocupes que son pasos para que cualquier principiante pueda llevarlos a cabo, porque es simplemente copiar la ID de tu facebook o twitter, luego colocarlos dentro de los estilos y demás, pero continua leyendo y verás.
 
 
Hace un tiempo Ciudad Blogger publicaba una entrada de cómo se hace El Fanbox de Facebook, flotante y con efecto deslizante. Luego también fue publicado aquí en Miltrucosblogger, de esta manera:
Me gusto mucho la forma que se mostraba flotando, pero lo que no me gusto es que para darle el efecto hay que utilizar una librería, la cual enlentece la carga en un blog (mientras no la utilizamos para otra cosa), y en lo personal el efecto no es algo que me llame mucho la atención.
 
Luego encontré otra forma de utilizar este mismo fanbox pero con un diseño diferente,
 y el resultado final fue el siguiente:
 
Vamos a mostrar los Seguidores de Blogger, Comentarios de Twitter y el Fanbox de facebook.
Se muestra solo una pestaña fija a la derecha, y al pasar el cursor se abre mostrando el gadget.
¿Cómo se hace…?

-Para los seguidores de Blogger vamos a: Google friend connect

-Estando conectados con la cuenta de Gmail asociada a nuestro blog.
-Ahí vemos que nuestro blog este seleccionado:

-Si tenemos varios blog lo seleccionamos mas abajo:
Ya seleccionado hacemos clic en: Añadir el gadget de miembros
 
– Lo podemos personalizar o dejamos así ya que lo único que necesitamos es la ID.
 
-La ID la tenemos que copiar ya que la vamos a utilizar mas abajo.

-Es necesario ya que cada blog tiene una ID distinta.

-La vemos en la barra de dirección:


O al darle al botón Generar código:
 
(Click en la imagen para agrandar)
-Ahora con la ID copiada podemos cerrar la página.
 
-Recomiendo pegar la ID en el bloc de notas.
 
Ahora vamos a hacer lo Nuestro……
 
-Nos vamos al escritorio de Blogger.
 
Ir a  PlantillaEdición de HTML
 
Y justo antes de ]]></b:skin> 
 
Poner el siguiente código:
 

 

/* 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}
Si quieren modifican las distancias desde arriba: (top:185px)
 
Ahora antes de </body> Poner el siguiente código:
 
 
<!-- 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('Miguel_Lp').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/miltrucosblogger&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 --><!-- FIN By: Miguel_Lp. http://www.miltrucosblogger.info -->
Cambiamos:

Para Blogger: La ID que antes copiamos y guardamos: 00286525615627339881

Para Twitter: El nombre de la cuenta: Miguel_Lp
                         La cantidad de comentarios: rpp: 3

Para facebook: La página: http://www.facebook.com/miltrucosblogger

Con Vista previa vemos que todo este bien y Guardamos.

 
 
Y todo listo……Ya tenemos el fanbox mejor diseñado en nuestro blog.
0
Shares

21 thoughts on “Seguidores Blogger, Twitter y Facebook – Flotantes con efecto deslizante (Editado)

  • junio 1, 2013 en 12:31 pm
    Permalink

    Hola Hayder, google friend connect no está funcionando, dice que no esta disponible, esto afecta la configuración del truco? o no hay problema por esto.
    Gracias por tu respuesta.

    Responder
    • junio 1, 2013 en 1:10 pm
      Permalink

      Ivan sin google friend connect no se puede agregar el fanbox de blogger, acabo de revisar la pag y es cierto no esta funcionando, pero espera a que la pagina vuelva a funcionar y luego realiza este truco..Saludos!!

      Responder
  • junio 6, 2013 en 12:02 am
    Permalink

    Hola Juvinao , no habra manera que hagas un fanbox deslizante de youtube? estaria genial uno , espero y puedas men , me gustaria remplazarlo por el de google+ . :buenpost:

    Responder
  • junio 8, 2013 en 10:56 pm
    Permalink

    ¡Hola, Juvinao. Gracias por tu ayuda. Tú hablas de seguidores de Twitter, pero el código está sólo para agregar la caja de tweets, no aparecen los seguidores. Pienso que en lugar de seguidores de Blogger, mejor sería poner la caja de seguidores de Google Plus.

    Saludos.

    Responder
  • noviembre 3, 2013 en 5:02 pm
    Permalink

    site: ‘00286525615627339881’ },
    Donde está el numero en rojo, tienen que cambiarlo por el suyo
    Dan click derecho en su blog, click en ver código de fuente buscan site
    y les saldrá site: ‘ aca un numero ‘ copian el numero y lo pegan en el de rojo :3

    Responder
  • noviembre 10, 2013 en 3:05 am
    Permalink

    Sabes, he Buscado esto pero con una variante, y es que me gustaria poner tambien un boton para mi canal de Youtube, he buscado por todos lados y no encuentro la manera de ponerlo, y es que he visto que hay algunos sitios que en suss botones dezlisantes tienen uno para su canal de youtube, me gustaria saber si podes hacer algo, muchos telo agradeceriamos

    Responder
  • octubre 25, 2014 en 1:50 pm
    Permalink

    hola buenas amigo gracias oir ek tuto de casualida no puedes conseguir algo asi http://www.lindito.com/mar-fiji/ te dejo el enlace para que mires la caja de facebook espero tu respuesta ya sea negativo oh positiva

    Responder
  • noviembre 1, 2014 en 9:05 pm
    Permalink

    lo que necesito es la caja de facebook cuando tu entras a la pagina y le das hacia abajo te sale el cuandro de fans de facebook… luego si la suber al princio de la pagina se cierra la caja de fasns de facebook y seguido i sigues dandole para abajo vuelve a salir la caja de fanas hasta que de nuevo le das al principio de la pagina y vueelve a cerrar asi susesibamente espero una respuesta si me entienddes lo qye te explico

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *