Mostrar los Avatares de los seguidores en las redes con los Fanbox deslizantes ~ Planeta Blogger

Con estos tres Fanbox mostraremos los Avatares de nuestros seguidores en las famosas Redes Sociales lo cual es muy importante para aumentar la cantidad de seguidores.

Enlazar el blog con las Redes Sociales es muy importante para obtener muchos seguidores, por lo que Planeta Blogger nos trae estos Fanbox correspondientes a Facebook, Google+ y Twitter que encontramos en Ciudad Blogger. Existía un inconveniente con Twitter y es que no funcionaba, pero aquí le encontramos la solución haciendo algunos cambios.

Para instalarlo, nos vamos a Plantilla / Editar HTML:

Ahora en la ventana que nos presenta, pegamos lo siguiente:

<style>

#flotante1 {

position:fixed;

top:100px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1002;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante2 {

position:fixed;

top:240px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1003;

border-radius:10px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante3 {

position:fixed;

top:380px;

right:-250px;

float:right;

width:288px;

display:block;

padding:0;

z-index:1004;

border-radius:10px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

#flotante1:hover, #flotante2:hover, #flotante3:hover {

right:0px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

div.likeboxwrap {

margin-top:-5px;

margin-left:-45px;

width:238px;

height:325px;

background-color:#fff;

overflow:hidden;

border-radius:10px;

}

</style>

</div></span></div></div>

</div>

(function() {

window.___gcfg = {'lang': 'es'};

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

})();

</script>

</div></span></div></div>

<style>

.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}

.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}

.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}

.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}

.follow_box img{border: 0;}

.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}

.follow_box a:hover{text-decoration: underline;}

.follow_action{padding: 0 0 0 8px;}

.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}

.follow_box .follow_button{margin: 5px 0 0;}

.follow_box .total{min-width: 230px; overflow: hidden; display: block;}

.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}

.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}

.follow_box .clearfix{zoom: 1;}

.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}

.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}

.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}

.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}

.follow_box .footer_border{ margin-top: 5px;}

.follow_box .uiImageBlock{line-height: 14px;}

.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}

.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}

.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}

.follow_box .titlecase{text-transform:capitalize;}

</style>

* Twitter Follow Box jQuery Plugin

* http://jobyj.in/twitter-follow-box-widget/

* Free to use under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

</script>

$(document).ready(function(){

$('#twitterfollowbox').followbox({

'user':'485842112152219640',

'height':'300',

'width':'260',

'theme':'custom',

'border_color':'#ffffff',

'bg_color':'#ffffff',

'bg_image':'',

'title_color':'#3B5998',

'total_count_color':'#333333',

'follower_name_color':'#BDBDBB'

});

</script>

var tw_user = 'TaringaMas';

var tw_width = 240;

var tw_height = 325;

var no_face = 9;

(function() {

var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;

tw_box.src = '//www.twitter-fanbox.com/tw.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);

})();

</script>

</div></span></div

Ahora solo nos queda hacer los siguientes cambios.

En la pestaña Facebook y en donde está en color Rojo, ponemos el nombre del blog y el ID compuesto por números (esto es así cuando no tenemos una URL personalizada).

En la pestaña Google+ encontramos en color Azul el ID y lo debemos cambiar por el nuestro.

En donde está en color Morado ponemos el ID correspondiente a Twitter y en color Café el nombre del blog que le pusimos en esa Red Social.