- Mensajes
- 4,255
- Puntuación de reacción
- 161
Este tutorial es disponible tanto para Wordpress como para Blogger.
En el caso de Wordpress podemos añadirlo en sidebar.php o si queremos hacerlo dsde Widgets, bajarnos PHP Widget o desde un HTML normal (no probado)
Vamos a copiar este codigo, en el caso de Blogger Sólo entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, ahí pega este código:
Ahora veamos la cuestión de personalizar el gadget.
usuario es tu nombre de usuario de Twitter sin el @
friends:0 con el valor en 0 muestra a tus seguidores, con el valor en 1 muestra a quienes tú sigues.
user_animate:'width' es el efecto con el que aparecen los avatares; los efectos que se pueden usar son width, height, opacity
users:40 es el número de seguidores a mostrar en cada aparición.
users_max:100 es el máximo total de seguidores a mostrar.
loop:1 indica si se vuelven a mostrar los seguidores, para que sólo se muestren una vez se cambia a 0
user_image:36 es el ancho y alto de los avatares
El gadget ocupará el 100% del contenedor donde se coloque, si se le quiere dar un ancho específico se cambia el 100% que está en negrita por un valor en pixeles, por ejemplo 290px
Ten en cuenta que dependiendo del ancho y alto del gadget es el número de seguidores que debes mostrar, y de igual debes cambiar la medida de los avatares para que se ajuste al ancho de tu gadget.
En color verde he puesto las anotaciones sobre los colores y otras áreas que se pueden personalizar
Espero que os haya gustado.
En el caso de Wordpress podemos añadirlo en sidebar.php o si queremos hacerlo dsde Widgets, bajarnos PHP Widget o desde un HTML normal (no probado)
Vamos a copiar este codigo, en el caso de Blogger Sólo entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, ahí pega este código:
PHP:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#friends').twitterFriends({
debug:1
,username:'[color=#FF0000]usuario[/color]'
,header:'<a href=\'_tp_\'><img src=\'_ti_\'/></a><h2>_fo_ SEGUIDORES!</h2>'
,friends:0
,user_animate:'width'
,users:40
,users_max:100
,loop:1
,user_image:36
});
});
</script>
<div style="width:100%">
<div id="friends"></div>
</div>
<style>
div.twitter-friends{}
div.tf-header{
border:silver 1px solid;
overflow:hidden;
margin:0 0 1px 0;
background-color:#0B243B; [color=#6B8E23]/* Color de fondo del título */[/color]
}
div.tf-header img{
margin:1px;
float:left;
width:36px;
height:36px;
border:0;
}
div.tf-header h2{
line-height:32px;
font-weight:bolder;
display:block;
margin:3px;
padding-left:5px;
float:left;
font-size:14px;
letter-spacing:.1em ;
color:#FFF; [color=#6B8E23]/* Color del texto */[/color]
}
div.tf-users{
height:180px; [color=#006400]/* Alto del gadget */[/color]
border:silver 1px solid;
overflow:hidden;
background-color:#eaeaea;[color=#006400] /* Color de fondo del gadget */[/color]
}
div.tf-users a{
display:block;
float:left;
}
div.tf-users img{ }
div.tf-info{
text-align:right;
display:none;
}
</style>Ahora veamos la cuestión de personalizar el gadget.
usuario es tu nombre de usuario de Twitter sin el @
friends:0 con el valor en 0 muestra a tus seguidores, con el valor en 1 muestra a quienes tú sigues.
user_animate:'width' es el efecto con el que aparecen los avatares; los efectos que se pueden usar son width, height, opacity
users:40 es el número de seguidores a mostrar en cada aparición.
users_max:100 es el máximo total de seguidores a mostrar.
loop:1 indica si se vuelven a mostrar los seguidores, para que sólo se muestren una vez se cambia a 0
user_image:36 es el ancho y alto de los avatares
El gadget ocupará el 100% del contenedor donde se coloque, si se le quiere dar un ancho específico se cambia el 100% que está en negrita por un valor en pixeles, por ejemplo 290px
Ten en cuenta que dependiendo del ancho y alto del gadget es el número de seguidores que debes mostrar, y de igual debes cambiar la medida de los avatares para que se ajuste al ancho de tu gadget.
En color verde he puesto las anotaciones sobre los colores y otras áreas que se pueden personalizar
Espero que os haya gustado.
