♥[TUTORIAL] Gadgets ocultos con imágenes en la cabecera (como mi ask y mi cbox)♥

 Al fin tengo el nuevo diseño 
Hoy os traigo un nuevo tutorial a petición, os explicaré cómo poner gadgets ocultos con imágenes en la cabecera (como mis botoncitos de gatitos de ask y cbox). Es muy sencillo 
Antes que nada quiero aclarar que los códigos no los cree yo (abajo están los créditos), lo que yo hice fue ir probando y dar con la solución uniendo códigos y modificándolos a mi gusto.

para el cbox

1. Vas a Diseño / Añadir gadget / JavacriptHtml
2. Copias el siguiente código

<div style="position: absolute; margin-top: -150px; right: 10px;">
<div class="divspoiler">
<img src="URL DE LA IMAGEN CLICK AQUÍ" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
EL CÓDIGO DEL SKIN DE TU CBOX
EL CÓDIGO DE TU CBOX
</div></div></div>

150: Si lo aumentas, subirá la imágen del botoncito.
10: Si lo aumentas se irá más a la izquierda y si disminuyes se irá más a la derecha.

right: Puedes cambiarlo por "left", entonces estaría a la izquierda y en ese caso el 10 será lo contrario de lo que dije antes.

1. Código del skin de tu cbox:

<div id="shoutmix" style="padding-top: 131px; width: 388px; height: 500px; background: url(URL DEL SKIN) no-repeat scroll left top transparent; position: relative;">

Se tiene que poner justo antes del código de tu cbox.

para ponerlo como mi ask 

1. Vas a Diseño / Añadir gadget / JavacriptHtml
2. Copias el siguiente código

<div style="position: absolute; margin-top: -150px; right: 10px;"><div class="separator" style="clear: both; text-align: center;">
<div class="divspoiler">
<img src="URL DE LA IMAGEN CLICK AQUÍ" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
<div class="separator" style="clear: both; background: #FFFFFF; border: 2px solid #E3007B; border-radius: 5px; text-align: left;">
LO QUE QUIERAS QUE SALGA EN EL GADGET</div></div>

 150: Si lo aumentas, subirá la imágen del botoncito.

10: Si lo aumentas se irá más a la izquierda y si disminuyes se irá más a la derecha.

right: Puedes cambiarlo por "left", entonces estaría a la izquierda y en ese caso el 10 será lo contrario de lo que dije antes.
#FFFFFF: Color del fondo del gadget.
#E3007B: Color del borde del gadget.
solid: Lo puedes cambiar por "dashed" o "dotted". Todos los tipos de bordes AQUÍ.

Bueno, eso es todo, espero que me hayan entendido, si tienes alguna duda, coméntala 

Créditos{XXX}