jueves, 30 de junio de 2011

Ocultar chatbox con una imagen

Hola chicos hoy aprenderemos a ocultar el chat con una imagen justo como yo lo tengo ^^!!

--------------------->

El truco es muy facil ya lo veran n *w*

okii para empezar nos vamos a:

Diseño >> Elementos de la pagina >> Añadir un gadget Htlm/javascript


copia el siguiente codigo y guarda:

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL DE LA IMAGEN') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

pega el codigo de tu cbox

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

Remplaza donde dice URL DE LA IMAGEN por la url de la imagen de tu preferencia. Pega el codigo de tu cbox donde dice CODIGO DE CBOX.!!

Este tutorial lo viste en Annyz Kawaii Blog, no copies mi trabajo, si tomas el tuto no olvides los creditos !!

besos ^w^

25 comentarios:

  1. AWW gracias!! tenia esa duda de como lo habias hecho :3 de seguro lo utilizo despues :3 gracias por el tuto annyz

    ResponderEliminar
  2. Holaa annyz aww tennia esa duda!! gracias por el tuto de seguro lo utilizo luego n_n bye bye cdt

    ResponderEliminar
  3. Omigosh annyz n.n muy buen tuto *-* comienzo a ahcerme tu fan xD ahora tengo mi CBox *¬* lo que no pude es poderle el skin XD bueno si pude pero.. mejor asi lo dejo heee
    que tengas un lindo dia n.n

    See ya!

    ResponderEliminar
  4. es algo muy útil!! quizá en un futuro lo use ^^ gracias por la info!

    ResponderEliminar
  5. Una pregunta: la palabra "CODIGO CBOX" la reemplazamos por el código del Cbox o reemplazamos el codigo de abajo?

    ResponderEliminar
  6. El tuto no esta mal,pero una cosa te digo tapa parte del blog,y encima no se puede escribir en el chat

    ResponderEliminar
  7. debes pegar el codigo de tu cbox ahi, borra codigo cbox y pega el tuyo

    ResponderEliminar
  8. eres lo maximo super gracias te adoro pondre el chat ahoramismo en mi blog gracias super gracias

    ResponderEliminar
  9. aww exelente tuto n.n
    te qeria pedir ayuda en algo.. mi blogzito ez nuevo e hize un botoncito de afiliacion, pero noze qe codigo ai qe ponerle para zubirlo :S i como ago para agregar botoncitoz de otroz a mi blog, ez zolo en agregar gadget > Html i copiar el codigo i lizto, o ai otra forma? :O ayuda porfiiz! u.u

    ResponderEliminar
  10. Uuu esta genial muchisimas gracias :) adios gracias por el tuto lo pondre en mi blog con una imagen de miku o flandre scarlet o konata ke son mis divas personales del blog
    Arigato
    Adios qe estes super

    ResponderEliminar
  11. siii cualquier imagen se vera bien, creo q yo tambien cambiare el osito por una imagen de anime =D

    ResponderEliminar
  12. Muchísimas gracias por poner los códigos! Lo he puesto así en mi blog ^^

    ResponderEliminar
  13. waaa no encuentro tu cbox ... weno buen truco ya lo usare :D ... tienes un premio muy especial en mi vlog :D

    ResponderEliminar
  14. hola gloomy mira en tutoriales tengo el codigo de como afiliar es algo muy facil y para agregar pues solo tienes que copiar el codigo del blog q quieras afiliar y pegarlo en un htlm/javascript o donde tengas tus afiliados

    ResponderEliminar
  15. juicyyy raro siempre me llegan los mensajes del cbox o.O es un lindo tuto pero ps en gustos se rompen generos hay algunos q les gustara y hay a otros q no

    ResponderEliminar
  16. hola nnyz me ffala una cosa el chat me sale la imagen pero no el chat,el chat esta puesto en la barra no como el tuyo me gustaria saver donde te isiste tu el tullo y como lo pusiste para que te saliera y donde lo personalizaste prfabor si podrias me encantaria


    chau :)

    ResponderEliminar
  17. hola miku

    me dio gusto ver que pudiste poner la imagen en la esquina de tu blog n.n

    amm a lo del chat en tutos ahi explico como colocar un skin a cbox

    el skin tu lo puedes hacer a tu gusto ^^

    ResponderEliminar
  18. Muchas gracias por el tuto! me ha servido de mucho!! :D

    ResponderEliminar
  19. hola annyz hice todo lo ke hiice ahy el problema eske me sale cbox ppero no esta en el aire del blog xD sería que esta en el costado del blog envez de estar en el aire, tu me entiendes xD cmo hago?

    ResponderEliminar
  20. hola luci:

    el script que puse aqui en el post hace que el cbox salga de un costado no del aire...

    para ponerlo en el aire aun no hago este tuto xD ero lo pondre en los pendientes okis/ besos

    ResponderEliminar
  21. wiii muchisimas gracias por el tutorial ^-^
    por cierto ya te puedes pasar por mi blog para coger mi botoncito de afiliación.
    saludicos n__n

    ResponderEliminar
  22. Y si lo quiero a la derecha? :(
    Ah y buenas tardes n_n

    ResponderEliminar
  23. hola buenas tarde :) amm desafortunadamente el script solo esta hecho para estar al lado izquierdo no se pued eponer a la derecha.... gomene

    ResponderEliminar
  24. awww
    me facino
    ^^
    tan adoraaable
    mmmmmmmmmmm
    muchisima gracias
    supaaaa annyz
    arigato

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.