Precargar el blog con jQuery

Hace ya bastante tiempo vimos c?mo poner la barra cargando en el blog con un script bastante simple que no hace mas que mostrar una imagen animada mientras el blog se carga. Pero los amantes de jQuery que siempre buscan mayor elegancia en las aplicaciones seguro preferir?n este m�todo.

Se trata de un preloader llamado QueryLoader basado en jQuery y lo que hace es precargar la p?gina, o sea que pone la pantalla negra y muestra una barra con el porcentaje de carga de la p?gina como si se tratara de Shadowbox. Vamos a verlo en acci?n en este blog de pruebas.

Para agregar este preloader en tu blog primero descarga este archivo, descompr?melo y sube el archivo que hay dentro a un hosting.

Luego entra en Dise?o | Edici?n de HTML y despu�s de <head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.

Ahora antes de ]]></b:skin> pega esto:

.QOverlay {
background-color: #000000; /* Color de la pantalla mientras carga */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* Color de la barra */
height: 10px; /* Grosor de la barra */
}

.QAmt { /* Estilos para los n?meros del porcentaje */
color:#333333;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Por ?ltimo agrega antes de </body> lo siguiente:

<script type='text/javascript'>
QueryLoader.init();
</script>

Y eso ser? todo para tener un preloader en el blog con un toque simple y elegante. Algunos estilos podr?n personalizarse donde se indica en color verde

IMPORTANTE: No es recomendable usarlo en un blog que ande lento pues si hubiera alg?n elemento que tarde mucho en cargar o una imagen rota entonces la pantalla de precarga permanecer? con determinado porcentaje y no avanzar?, por lo tanto el lector no podr? ver el contenido del blog. Tambi�n es posible que primero se vea un pantallazo del blog y luego aparecer? el preloader, ese es fallo del script que por ahora no tiene soluci?n.

Usar jQuery y Scriptaculous al mismo tiempo

Un d?a te despiertas por la ma?ana, enciendes la computadora y mientras navegas descubres un men? con un efecto tan espectacular y soberbio que te alegra el d?a con la ilusi?n de verlo engalanando tu blog, as? que pones manos a la obra, agregas c?digos por aqu? por all? y de repente... ?Diablos, el men? no funciona!

Con el ?nimo deca?do investigas un poco y te enteras que jQuery no funciona con Scriptaculous. Y ah? acabo el entusiasmo del d?a.

Y s?, es un hecho a medias que si usas jQuery no puedes usar Scriptaculous o viceversa. Y m?s que un problema de incompatibilidad lo que sucede es que ambos usan la misma sintaxis para llamar a las funciones del script, esto hace que ambas librer?as no sepan a qui�n hacerle caso pues las dos usan la misma forma de leer esas instrucciones.

Sin embargo jQuery soluciona esto desde la versi?n 1.0 usando una variable en la sintaxis, esto es para que no entren en conflito ambas librer?as y se pueda usar jQuery aun cuando se tenga Scriptaculous, Prototype o Mootools en el blog.

Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
Por ejemplo, un c?digo que use jQuery se ver?a similar a este:

<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de alg?n script que necesita jQuery" type="text/javascript" />

<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
});
</script>

Lo que hacemos ahora es agregar antes de las instrucciones del script el comando jQuery.noConflict(); y adem?s cambiaremos todos los $ que encontremos por la palabra jQuery
Por ejemplo:

<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de alg?n script que necesita jQuery" type="text/javascript" />
<script src="" type="text/javascript" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>

Y habiendo hecho eso jQuery podr? usarse sin problemas aun cuando tengamos otra librer?a de scripts en el blog.
Vemos un ejemplo m?s preciso, el de arrastrar im?genes con jQuery.

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudadblogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>

<script type="text/javascript">
$(function(){
$("#easydrag1").easydrag();});
</script>

Ese ser?a el c?digo com?n que utilizar?amos, pero si aplicamos el "parche" para que funcione con Scriptaculous entonces el c?digo ser?a as?:

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudadblogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery.noConflict();
jQuery(function(){
jQuery(&quot;#easydrag1&quot;).easydrag();});
</script>

Y de esta forma podr?as usar el arrastrar im?genes con Scriptaculous, y arrastrar im?genes con jQuery al mismo tiempo.


O bien, otro ejemplo. Veamos c?mo ser?a el c?digo normal del men? deslizante arriba del blog.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir men?&quot; to &quot;Cerrar men?&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

Y as? ser?a si aplicamos el truco para que funcione tambi�n con Scriptaculous.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function() {

// Expand Panel
jQuery(&quot;#open&quot;).click(function(){
jQuery(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
jQuery(&quot;#close&quot;).click(function(){
jQuery(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir men?&quot; to &quot;Cerrar men?&quot; on click
jQuery(&quot;#toggle a&quot;).click(function () {
jQuery(&quot;#toggle a&quot;).toggle();
});

});</script>

En resumen, agregamos la funci?n jQuery.noConflict(); y cambiamos todos los $ por jQuery
De esta forma en la gran mayor?a de los casos podr?s usar jQuery y Scriptaculous al mismo tiempo sin resignarte a elegir uno u otro.

Bot?n de compartir de Twitter que muestra los avatares

Cargando..

A veces aunque tengamos en el blog el bot?n de compartir de Twitter parece no ser suficiente pues muchos no se animan a compartir la entrada aun cuando �sta sea interesante para el lector. As? que quiz? tengamos que recurrir a tentar la vanidad de nuestros lectores con este bot?n para compartir de Twitter que muestra los avatares de aquellos quienes han compartido la entrada.
Este animado y divertido bot?n es una idea desarrollada por More Tech Tips y est? basado en jQuery apoyado en la API de Topsy.

Se muestra s?lo al ingresar en la entrada y una vez que el lector retwittea el post su avatar aparecer? en en el bot?n junto con el de los dem?s lectores que lo han rettwiteado. Puedes hacer la prueba en esta misma entrada para verlo funcionando.

Para agregar este bot?n de compartir de Twitter entra en Dise?o | Edici?n de HTML y antes de </head> pega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;div.who-tweet-2&#39;).whoTweet({
nick:&#39;usuario&#39;
,url:&#39;&#39;
,tweet_tip:1
,animate:&#39;height&#39;
});
});
</script>

Cambia lo que est? en color rojo por tu nombre de usuario de Twitter y luego antes de
]]></b:skin> pega esto:

div.topsy_widget_data{overflow:hidden;}
div.topsy-big{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
width:50px
}
a.topsy-big-total,a.topsy-big-total-badge{display:block;}
div.topsy-big a,div.topsy-big a:visited,div.topsy-big a:hover{
text-decoration:none;}
a.topsy-big-total,a.topsy-big-total-badge,a.topsy-big-total:visited,a.topsy-big-total-badge:visited{
color:#333!important
}
span.topsy-big-count{
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2!important;
text-align:center!important;
padding:5px 0!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
}
a.topsy-big-total:hover,a.topsy-big-total-badge:hover{color:#D70!important;}
span.topsy-big-num{
display:block;
line-height:15px!important;
font-size:15px!important;
font-weight:bold!important
}
a.topsy-big-total:hover span.topsy-big-num,a.topsy-big-total-badge:hover span.topsy-big-num,a.topsy-big-total:hover span.topsy-big-unit,a.topsy-big-total-badge:hover span.topsy-big-unit{color:#D70!important;}
a.topsy-big-total-badge span.topsy-big-count{
-moz-border-radius-bottomleft:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomright:0;
-webkit-border-bottom-right-radius:0;
border-bottom:none!important
}
span.topsy-big-unit{
font-size:10px!important;
line-height:10px!important;
display:block
}
span.topsy-big-badge{
display:block;
font-size:9px!important;
line-height:9px!important;
font-weight:bold!important;
background:#8F8F7C url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border:1px solid #8F8F7C!important;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
padding:2px 0!important;
text-align:center!important;
color:#FFF!important;
text-shadow:#75755a 1px 1px 0!important
}
a.topsy-big-total-badge:hover span.topsy-big-badge{
background-color:#ff8700!important;
border-color:#ff8700!important;
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important
}
span.topsy-big-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-big-retweet,a.topsy-big-retweet:visited{
display:block;
margin-top:2px!important;
text-align:center!important;
-moz-border-radius:3px!important;
-webkit-border-radius:3px!important;
font-size:11px!important;
line-height:16px!important;
padding:0!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important;
color:#FFF!important
}
a.topsy-big-retweet:hover{
background-color:#1B73CC!important;
border-color:#1B73CC!important;
color:#FFF!important
}
a.topsy-big-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
div.topsy-sm{
font-family:Arial,Tahoma,Helvetica,sans-serif!important;
font-size:11px!important;
float:none;
height:18px
}
div.topsy-sm a{
display:block;
float:left;
padding:0 3px!important;
line-height:16px!important;
border-style:solid!important;
border-width:1px!important;
-webkit-border-radius:3px!important;
-moz-border-radius:3px!important;
margin-right:1px!important
}
div.topsy-sm a,div.topsy-sm a:hover{text-decoration:none!important;}
a.topsy-sm-total,a.topsy-sm-total:visited{
font-weight:bold!important;
color:#333!important;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x bottom left!important;
border-color:#E6E7E2!important;
font-size:14px!important
}
a.topsy-sm-total:hover{
color:#D70!important;
background-color:#f2e8dc!important;
border-color:#f2e8dc!important
}
a.topsy-sm-total:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
a.topsy-sm-badge,a.topsy-sm-badge:visited{
text-shadow:#C46900 1px 1px 0!important;
color:#FFF!important;
background:#D70 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#D70!important;
font-size:9px!important;
font-weight:bold!important
}
a.topsy-sm-badge:hover{
text-shadow:#C46900 1px 1px 0!important;
background-color:#F78400!important;
border-color:#F78400!important;
color:#FFF!important
}
a.topsy-sm-badge:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-sm-lvl{
display:inline-block;
background:url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) no-repeat left center!important;
padding-left:9px!important;
margin-left:1px!important
}
a.topsy-sm-retweet,a.topsy-sm-retweet:visited{
margin-right:1px!important;
font-size:11px!important;
font-weight:normal!important;
color:#FFF!important;
background:#369 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left -20px!important;
border-color:#369!important;
text-shadow:#2A5580 1px 1px 0!important
}
a.topsy-sm-retweet:hover{
background-color:#358de5!important;
border-color:#358de5!important;
color:#FFF!important;
text-shadow:#369 1px 1px 0!important
}
a.topsy-sm-retweet:active{
color:#FFF!important;
background:#333!important;
border-color:#333!important;
text-shadow:#222 1px 1px 0!important
}
span.topsy-big-count-wtb{
position:relative;
display:block;
background:#E6E7E2 url(http://cdn.topsy.com/asset/master.16795.293baefe4b/img/tb-widget.png) repeat-x left bottom!important;
border:1px solid #E6E7E2;
text-align:center;
padding:0;
-moz-border-radius:3px;
-webkit-border-radius:3px
}
a.topsy-big-total-badge-wtb{
position:absolute;
z-index:10;
bottom:0px;
left:1px;
background:white;
opacity:0.8;
filter:alpha(opacity=80);
width:44px;
border:gray 1px solid
}
a.topsy-big-total-badge-wtb,a.topsy-big-total-badge-wtb:visited{
color:#333
}
a.topsy-big-total-badge-wtb:hover{color:#D70;}
span.wtb{
display:block;
width:47px;
height:47px;
overflow:hidden
}
span.wtb img{padding:0 !important;}
span.wtb a{
display:block;
float:left;
}

Por ?ltimo marca la casilla Expandir plantillas de artilugios y busca esta l?nea:

<div class='post-body entry-content'>

Justo debajo de ella agrega este c?digo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='who-tweet-2' style='float: right; padding:5px;'>Cargando..</div>
</b:if>

Y listo, con eso ya tendr?s tu bot?n de Twitter que mostrar? los avatares de quienes comparten la entrada.

Ahora s?lo hay que tomar en cuenta que el bot?n s?lo aparecer? en las entradas, no en la portada del blog.
Adem?s, en algunas ocasiones puede tardar un poco en aparecer el avatar de quienes twittean la entrada, eso depende b?sicamente de la API de Topsy as? que no hay que desesperarse si en ocasiones tarda un poco m?s en aparecer el avatar.

Elegir qu� resumen mostrar en el Leer m?s autom?tico

No todos los blogs son iguales, ni todos comienzan sus entradas de la misma manera. Hay unos en particular que tratan de descargas y dise?os, y que usualmente comienzan la entrada con una tabla que explica qu� contiene el dise?o o la descarga que ofrecen.

?Cu?l es el "problema"? Que si usan el Leer m?s autom?tico entonces tomar? ese primer texto el cual no ser? nada est�tico ni mucho menos descriptivo respecto a lo que se quiere mostrar como s?ntesis de la entrada.

En ese ejemplo queda muy claro a lo que me refiero, el resumen no describe en absoluto la entrada y tampoco es legible. Pero podemos solucionarlo de forma que el resumen pueda mostrar cualquier otro texto que queramos que sea m?s descriptivo y que de hecho s?lo se vea en el resumen de la entrada.

La forma de arreglarlo es editar la entrada y agregar hasta arriba de todo el contenido de la entrada esto:

<span style="display:none;">Aqu? va la descripci?n personalizada de la entrada que queremos mostrar y que s?lo se ver? en la portada del blog. Puedes repetir un fragmento de la entrada o agregar una descripci?n completamente nueva; �sta s?lo ser? visible cuando la entrada est� resumida, una vez que el lector ingrese a la entrada esta descripci?n no se visualizar?.</span>

Eso debe ser lo primero que tenga la entrada, no debe haber nada arriba de ello para que sea lo primero que lea el script y lo muestre en lugar de los otros datos. Ah? puedes poner la descripci?n que quieras, incluso puedes poner una imagen para que esa imagen sea la que se muestre en el resumen.

Aclaro, esto se hace manualmente a cada entrada, no es automatizado, y adem?s s?lo se ver? en la portada, as? que pierdan cuidado pues el formato de su entrada no se alterar? ya que una vez que est�n dentro de la entrada esa descripci?n desaparecer?.

Aunque est? enfocado para los blogs de descargas tambi�n puede usarlo cualquiera que desee personalizar la descripci?n que tendr? el resumen de sus entradas de modo que puedan agregar una introducci?n que detalle con mayor claridad el contenido de la entrada pues no siempre lo primero que escribimos en una entrada es justamente lo m?s descriptivo de ella, pero con este peque?o "truco" s? que podremos decidir qu� queremos mostrar como rese?a del post.

Mostrar ?ltimos tweets en el blog con TwitStamp

TwitStamp es un sitio que nos permite generar un c?digo que muestre en el blog los ?ltimos tweets que hemos realizado. Esto es con la intenci?n de obtener un gadget en pocos segundos.

Con �l s?lo hay que escribir el nombre de usuario de Twitter que usas, y seleccionar el tipo de gadget que m?s te guste.

Ver?s que en las opciones Tiny, Small, Medium y Special hay varios estilos que puedes utilizar.

S?lo tienes que darle click a la imagen que deseas y debajo en HTML copiar el c?digo y pegarlo en un elemento HTML/Javascript de tu blog.

Si deseas eliminar el enlace al sitio de TwitStamp basta con eliminar de tu c?digo lo que est? en color rojo, o bien, cambia la URL por la de tu perfil en Twitter:

<a href="http://twitstamp.com"><img src="http://twitstamp.com/usuario/standard.png" border="0" alt="twitstamp.com" /></a>

Pero s?lo eliminar? el enlace, pues la URL que aparece en el gadget seguir? apareciendo.
Adem?s de poder mostrar el ?ltimo tweet, tambi�n tenemos otras opciones.

Seleccionando la opci?n Latest muestra le ?ltimo tweet como lo hicimos en el primer ejemplo.

Con Single podemos mostrar un tweet en espec?fico, s?lo debes poner el ID del tweet que deseas mostrar.

Para conocer el ID del tweet que quieres entra a tu cuenta de Twitter, da click en la fecha del tweet que deseas y se mostrar? s?lo ese tweet. Los ?ltimos n?meros que se encuentran en la URL de ese tweet es el ID que necesitas.

Con Search puedes escribir un tema para que muestre el ?ltimo tweet que habla sobre ese tema.




Y con TwitCard podemos hacer una insignia de nuestro perfil de Twitter.

Tambi�n puedes crear tu propia imagen registr?ndote y subiendo la imagen que deseas en formato .png de esta forma podr?s hacer que no aparezca el enlace del sitio en la imagen y podr?s tener un gadget aun m?s personalizado

Y si no, de cualquier forma los diferentes dise?os que ofrece son muy variados y sobre todo podremos mostrar los ?ltimos tweets en el blog en un abrir y cerrar de ojos.

Enlace | TwitStamp

Rosa por siempre

Las grandes personas son aquellas que nos gu?an para ser mejores;

Son aquellas que no se guardan lo que saben, sino que nos nutren de ello.

Las grandes personas no se van de este mundo sin antes dejarnos un poco de ellas en nuestras vidas, nos tocan de alguna u otra manera.

Te recordaremos siempre por ser la mujer admirable que eras porque aun sin conocerte en la cotidianidad sab?amos y sabemos que eras de esas grandes personas.

Rosa, descansa en paz.

Agregar el FanBox de Facebook en el blog (sin bordes y un extra)

El FanBox o LikeBox de Facebook es esa cajita que muestra los avatares de las personas a las que les gusta determinada p?gina de Facebook.

Agregar el Fanbox en Blogger es bastante sencillo y no requiere quebrarse la cabeza con c?digos.

Primero entra a Facebook Developers .

Ah? agrega la URL de tu p?gina de Facebook, selecciona el ancho del gadget, color del tema, si deseas mostrar los avatares, la actividad reciente y la cabecera del gadget.

Ya que lo tengas listo da click en Get Code.

Aparecer? un c?digo para copiar; copia el c?digo que est? debajo de iframe.
Luego entra en Dise?o | A?adir gadget | HTML/Javascript y ah? pega el c?digo que copiaste.
Con eso ya tienes el Fanbox en tu blog.




Algunas veces la p?gina de Facebook anda medio loca y en el c?digo nos pondr? una altura de 62px con lo cual se ver? s?lo un rect?ngulo. Para arreglarlo s?lo cambia el alto (height) del c?digo en las dos veces que aparece:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowTransparency="true"></iframe>

Con una altura de 289px ser? m?s que suficiente, pero si deseas mostrar m?s avatares entonces agrega una altura mayor.

Notar?s que el Fanbox tiene integrado unos bordes grises que no se ven nada est�ticos y adem?s debajo aparece el icono de Facebook con el texto Plug-in socialde Facebook.
Lo que haremos ahora ser? quitar esos bordes, el texto debajo, y aprovechando podemos modificar el color de fondo.
Para aplicar estos cambios agrega a tu c?digo lo que est? en color azul:

<div class='likeboxwrap'>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowtransparency="true"></iframe>
</div>

<style type='text/css'>
div.likeboxwrap {
width:290px; /* Quitar 2px al ancho del gadget */
height:264px; /* Quitar 25px al alto del gadget */
background-color:#8A084B; /* Color de fondo del gadget */
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>

Y el resultado ser? este:

Aqu? hay que tomar algunas cosas en consideraci?n:

Para poder aplicarle un color de fondo es necesario que tengas el tema light en el gadget y NO el dark.

Dentro del c?digo extra que hemos agregado hay unos estilos del ancho y alto del gadget; al ancho (width) del Fanbox le restaremos 2px para eliminar por completo el borde; y al alto (height) le restaremos 25px. Eso se cambia en donde se ha se?alado en color verde.

En algunos casos cuando el Fanbox sea m?s grande o cuando hayan elegido no mostrar la cabecera del FanBox entonces podr?an restarse otros valores del acho y alto, ya ser? cuesti?n de que cada uno modifique ese ancho y alto hasta que obtenga el mejor resultado.