1 abr. 2014

♥[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}

6 comentarios:

  1. Muchas gracias por el tuto! aunque no encuentro el cbox ni nada D: estuve viendo y no lo encuentrooo ayudaa >.<

    ResponderEliminar
    Respuestas
    1. Esta en la cabecera, es el gatito de la derecha, pulsa en él y te saldrá la cbox :3
      Recuerda verlo con Google Chrome, igual si lo ves desde otro no te sale bien ;)

      Eliminar
  2. omg gracias desu!!!~~ ♥ es demasiado kawaii el tuto *0* y esta super genial *^*
    lo usaré en mi próxima edición del blog ♥
    saluditos! ^^

    ResponderEliminar
  3. Holi te venía a avisar que ya tengo la imagen del premio ;)
    http://otaku-town2.blogspot.com/2014/03/premio.html

    ResponderEliminar
  4. Me alegro de que os guste ^^
    Gracias por avisar, Monibirit :3
    Ahora haré un tutorial que me pidieron, de como puse la "lista de numeros y de puntos" y también publicaré el premio a la noche ^^
    Beijinhos❤

    ResponderEliminar

¡Hola gatito! Deja tu huellita cumpliendo las normas ^^
- No insultes.
- No hagas spam.
- No pongas publicidad.
- Se respetuoso conmigo y con los demás.

Kaomoji: (☆ω☆) (≧◡≦) (⌒ω⌒) ヽ(♡‿♡)ノ (*♡∀♡) (//▽//) (*/ω\) (o^ ^o) (;⌣̀_⌣́) (¬_¬;) ( ╥ω╥ ) Σ(ºOº|||) (@_@) (・_・;) (・・ ) ? (O.O) ε=ε=ε=ε=┌(; ̄▽ ̄)┘ (∪。∪)。。。zzZ (=^・ω・^=) ヽ( ⌒o⌒)人(⌒-⌒ )ノ (-‸ლ)

Si tus comentarios no cumplen estas normas, serán eliminados.
Todos los comentarios se publicarán tras mi aprobación :3