Cajas deslizantes laterales de Facebook Fans,Twitter y Blogger

A pedido de un visitante es que decidí elaborar esta entrada. 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3ialCSxACiwU8O1-E6nnxV93-wyaeYBnQafD1FoknFuJLUcc_9DQ9N7pS1x8Ej5aaaacKaK5jx9SKUrWY4lnLq2o0uEhAj8d5-vZH-tjYId1tSxGddAgn8BRwtjlpYYF6iB5aQ/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/AVvXsEgmPrq3Bd3M1L3ijh_uRdhxdoXLhREnoHpvGc4-qwjNyXGiXQG9Rr7ucMwT-gtpjS9T-vO6jJ2Xl3zLhvCU-dzXPXtQBEsSXMxdbZF6ASfLcSHiVTqiAUIaq6-Ivl7s1bSVCyRpsw/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/AVvXsEg1zHgYzPX611sUyQPwfpYfJB54vdZCR26OxyJUkrt6TO7rlTSRXRMv0WZcWu5E-6y3nbhRO8V2aIIvcKAdbl3emLuULrlXg6fbnntrYgBorTFNJY6r9Vaoecmuc_2PO8XH7_8gGw/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/AVvXsEgIl62_usz2xuX1LQMg1jj20O1Ih893L3CY5Jl1IwbzVTJL_w2q5zna_LcuP3kBoLrz02awlDwtUmz-_7uGqhnVZ62LchfK4RhZV6PhLJ7_icYC6jA9XHl5AmV16dj0aYzUrm_t_g/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/AVvXsEgJnrfS9n498VdfM6EdAXkxDmEgQUbkaThhpPrK98DeM1xMP-25N4qCMXBHfIsJTu5HfvfeWmSA0s_b-clhXV-bQHuO9CyRI4ZaMLKHT2YGKi8tsEILHeg5GEUE8K_aZ4zXS3ZeQA/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/AVvXsEiMQ1izswPwQR7dTZuBBQRVrHk_9-fRsvXgofJJtJh1ldI5SZeBDwHhGPFdakYQBgS3_4uBZoI9gUY2a6VkwqBVdlCq1qng6LTSIX_kqXyyFAK_YWOQYJa85-MA_Pe2V1HNV9inuw/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.

No olvides dejar tu mensaje si te gustó el post, y de igual manera si tienes alguna pregunta

Comparte este artículo con tus amigos en Facebook,y Twitter con los botones debajo de cada post.¡Gracias! ..Fuente/ hogarblogger/