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.

Anuncios patrocinados por Google AdSense

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  Plantilla --- Edición de HTML , 

Y justo antes de ]]></b:skin> 

Poner el siguiente código:

/* Seguidores Blogger */

.barrightblogger { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGKOzyFqm4OkfGzXVEeMzHP7Wyq5frCHTYZcDvq0IwbAngXEvvvtXSKgYG-YjX7hSutQwPH9fhPFXG8QyvEgCwl58huHbGt8icw0pLFlYkmovGvBij_sp2RDtquM7HvbfjvIs-hyO4abxi/s1600/bl_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:50px; z-index:1000;}

.barrightbloggerc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzM4ueioCR8gLGFMORx9s32RmbLCNOoedtRgXBKNeehAkKgYkQvFO_QseQYGn-E2I8Rt0h5nwLWH3Clx3KkinvdhHgRHNzutD_aJTa_QjhcuA07RzwZYdGE-t2fptiBBVgkS7wRPKafX8/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGQvXtwojnpgRHzxLfm7bw9XmXRSF7WcBHU8n4cNkE-bsnQ2lphlAx36AnH6CzdxKbp85J1AbwMUGqJagTWZ220N5h54o8y8c7OrVMxNe4qh_Q0Ez9Tq9FB3O3JIFsAg3CdRODnZko0XE/s1600/tw_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:210px; z-index:1000;}

.barrighttwitterc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise0GVN9yob4qwBUOxY7rzW_j1TacFJ6Nj1PCWJ__FDsdpjubv3uWpsV4_znjICW-lnDI2XV2GqChX8R_c8tfen8XYxi4DLPsGWBLq3BQ50OS4qZlz4oYIcJ7D1bkPFS2UE6TCd__C_un9/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDeLhUo388dqAtg1D3tH56L1rQLuZqZGJvAoFIxZVrYhOTyNrkZQY12pB8YriizO8CuQ5f1nqXTlvnciKcV1tag_ffWuEwi7ndMc-hmRCAt_ld-gAqIrVIzeudMb4che1kbWZfgRAKJve/s1600/fb_cb.png');background-repeat: no-repeat; width:39px; height:159px; position:fixed; right:0px; top:370px; z-index:1000;}

.barrightfacebookc { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTXJ_SWTvtw9Ww38YTZCWNleZjjtejRHD9LZl1q69etLKkpsqA7LkqjUecPfbsGmrVs6h9oqOlUqAzBmKR-_WEM1dKeN3OxBfBZ608tJGs0TmuMwvhhrlrvlbH90otRY6YfI52EA042es/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.