sábado, 8 de septiembre de 2012

ChatBox hover-hide [deslizante]

Es un efecto muy bueno, a mi en lo personal me gusto mucho.. lastima que tuve que quitar el cbox pero en un tiempo mas lo volvere a poner ^^



si te gusta este efecto.. sigue los pasos siguientes

en vieja interfaz --- Ve a Diseño >> Edicion Html >> Editar plantilla
en nueva interfaz --- Nos vamos a Plantilla >> Edicion de Html >> continuar

Paso 1.-

Copiamos este codigo y lo pegamos justo despues de <head>

<link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'/>

imagen guia


Paso 2.-

copiamos este codigo y lo pegamos antes de ]]></b:skin>

#cboxdiv {
z-index: 9999;
position: fixed;
bottom: -300px;
left: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#cboxdiv:hover {
bottom: 0px;
}
#cboxtitle {
text-align: center;
font-size: 20px;
font-family: codystar;
letter-spacing: 8px;
color: #fff;
text-shadow: 1px 1px 1px #fff;
width: 180px;
background-color: #aaa;
padding: 3px 5px 5px 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

imagen guia


Para la personalizacion:

azul: este valor es para mover la cajita de lugar..puedes ponerle 40px, 80px, 100px cualquier numero hasta que quede onde tu quieres la cajita.

rosa: Tamaño del texto

Morado: Aqui puedes cambiar el estilo de letra

Naranja: Color del texto

Verde: Sombra del texto

rojo: Color del fondo del recuadro.

y por ultimo el PASO 3

ve a diseno >> Elementos de pagina >> Añadir un gadget html/javascript y pegar este codigo:

<div id="cboxdiv">
<div id="cboxdivinfo">
<div id="cboxtitle">CHATBOX</div>
</div>
AQUI EL CODIGO DE TU CBOX

Das guardar

NOTA.. Al ir a tu pagina cbox y recoger el codigo tendras borrar una partecita del codigo original y cambiar algunos valores.. aqui te lo muestro en imagen guia

esta parte es importante.. da clic en ella para verla en tamaño grande

si tienen alguun problema en entenderle .. no duden en preguntarme oki ^^ saludos y buen fin de semana.

Credito


38 comentarios:

  1. hola Annyz, está genial el tuto. Puedes hacer uno de como colocar una cortinita arriba de todo del blog? como tienes tu esa rosa? gracias ^^

    ResponderEliminar
  2. ¡Hola Annyz! Quería preguntarte si sabes cómo crear un gif animado, me encantaría hacer uno, pero no tengo ni idea /: por favor, espero que me respondas. Besos.

    ResponderEliminar
  3. wiii!! justo te iba a preguntar como hacer eso :D gracias por el tuto, una consulta se puede cambiar la imagen en la que sale el texto Chatbox? y si se pudiera hacer que parte hay que sacar o remplazar? Gracias de antemano n-n
    Etto saludos para ti también y que tengas un lindo fin de semana :D

    ResponderEliminar
  4. annyz mira te paso el link que tiene un cod para que cuando hagan clic derecho para copiar no pueden jajaajaj linhttp://pczeros.blogspot.com.ar/2010/06/bloquear-clic-derecho-en-blogger.htmlk:

    ResponderEliminar
  5. Hola annyz podrias hacer el tuto de como poner una cortinita pero a los costados del blog saludos n.n

    ResponderEliminar
  6. Annyz, hice el tuto pero no me salió bien, ¿qué pasa?
    Ve mi blog: http://diariotipicachica.blogspot.mx/

    ResponderEliminar
  7. Hola annyz^^yo lo hice,pero no me salio asi de bien,me sale la primera conversacion,y no queda muy bonito,me ayudas? http://historiaspococorrientes.blogspot.com.es/

    ResponderEliminar
  8. hola!!! linda estas nominada a mi test buscalo en la entrada! en mi blog que es : elblogdemarijunki.blogspot.com

    ResponderEliminar
  9. *O*...
    Te puedo hacer una petición?
    Sigo intentando modernizar el código de las cajas de texto.
    Podrías hacer un tutorial de como redondear sus esquinar, nombrar los distintos bordes ¿punteados, dobles, sombreados...? Colores y demás cosas que se te ocurran?

    ^^ Espero no ser una molestia. Ya he visto que te han vuelto a dar dolores de cabeza...

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Ay chica, qué sería de nosotras sin ti! (en serio, gracias a tus turoriales mi blog existe) justo tengo problemas con mi cbox (no sé donde meterla en mi nuevo diseño xD) probaré con esto! lo de la scrollbar ya lo solucioné *-*

    Gracias y un beso! :3~

    ResponderEliminar
  12. Esta muy chulo!!
    porcierto como as hecho los flequitos arriba en tu blog?¿?
    porfavor respondeme !!

    ResponderEliminar
  13. Hola annyz! M gustaria q comentases en mi blog y q m siguieses. M gustaria mucho q m ayudases a mejorar. Este mensaje no es solo para ella, m gustaria q tod@s comentaseis y m ayudaseis. Gracias x adelantado.

    Adioooss

    ResponderEliminar
  14. Por cierto, donde encontraste el codogo del cbox???

    Gracias!

    ResponderEliminar
    Respuestas
    1. hola nena ammm el codigo lo encuentras en esta pagina:

      http://cbox.ws/

      ahi te creas una cuenta y listo.. empiezas a hacer tu cbox y cuando este listo solo le das publish y te dara el codigo...es muy sencillo en realidad.. ^^

      besos y buen fin de semana

      Eliminar
  15. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  16. ohh!!arigatou anyzz...quedo excelente en mi bloguis...esta super lindo...mechos besos.
    chiao~su

    ResponderEliminar
  17. annyz tu fuizte ami blog y puzizte que como ze llama la muzica de mi blog ?para zakarme una duda rezpondeme

    ResponderEliminar
    Respuestas
    1. hola talia no neni yo aun no entro a tu blog u.u

      Eliminar
  18. bayaaa increibleee talvezzz lo hagaaaa ijnteresanteeee!!!! impresionaaado00zzzz yeahh!!! alcien con la blogosfera yajuuu!!!

    veooo que tegusta el html increibleee jamazzz aviaaa visto anadien que definiera vien el estilo del html como debe ser yeahh!!!!

    impresionanteee netaa bien rifado00n siguee al millon y tendrazz mas chekbox al cien yeahh!!!! saludo0zzzz estamos presentezz y epndientes

    ResponderEliminar
  19. Hola annyz porfavor ayudame,se que ya te he pedido que me ayudaras otra vez pero es que mi blog era muy importante para mi y lo desarme no se porque con ese truco ce entrada "clicka para entrar" se me sali otodo todo quedo horrible ayudame! Porfavor :'C

    ResponderEliminar
    Respuestas
    1. hola frezhita no te preocupes, no me molesta para nada el estarte ayudando en serio asi que tu no te preocupes.. respecto a lo del codigo que pusiste.. yo te recomiendo siempre al poner algo nuevo a tu codigo de plantilla des vista previa o guardes tus plantilla antes de hacer cambios.. pues suelen descomponerse si no sabes como poner los codigos.. u.u espero me entiendas..

      pero como te dije la vez pasada si un codigo no te resulta solo borralo y listo n.n saludos

      Eliminar
  20. Hola Annyz! :)
    No me sale bien T.T Se queda el nombre de Chatbox debajo del todo y se ve cuando sale todo el chat para arriba, y en vez de eso se ven los comentarios del chat u.u. no se si me explico, en vez de que ponga en la esquinita chatbox salen un trocito de los comentarios y el chatbox sale abajo del todo. abre hecho algo mal T.T ¿como lo arreglo?

    Muchas gracias por todo ^^

    ResponderEliminar
    Respuestas
    1. sip si te entiendo.. seguramente los valores estan mal... seguiste la imagen guia? no te preocupes si gustas quitalo y en estos dias hare otro tuto con un efecto similar pero mas sencillo ^^

      Eliminar
  21. Hola!
    Me gusta mucho los efectos en chat box ^^ Yo voy hacer cuando add mi c-box otra vez en mi blog.
    Besitos...

    ResponderEliminar
  22. ay chica... ahora la tal batataflor me está copiando a mi -_- mocosas estas... en fin, espero que sigas subiendo cositas :3~

    ResponderEliminar
  23. Hola! me encanta este efecto pero yo lo quisiera poner solo en las fotos .. en las imagenes .. se puede ? va asi como tenes voz ....

    ResponderEliminar
    Respuestas
    1. que tonta yo queria ese de que dan vuelta las imagenes xdd

      Eliminar
    2. hola erii este tutorial lo encuentras en la categoria tutoriales se llama post recientes

      Eliminar
  24. Lady Annyz muchas gracias! Pero tengo un problemilla, cuando coloco el código y todo es maravilloso, el fondo de la CBox es transparente, y no se ven nadita las letras, es decir, tiene el fondo del blog y no se ve nada ;_; no tiene las lineas blancas y verdes (Que quiciera que fueran de otro color xD) plz ayuda Lady Annyz ;3;
    XoXoXo

    ResponderEliminar
    Respuestas
    1. amm para personalizar los colores de tu cbox ve tu pagina de cbox y editalo a tu gusto nena.. ahi le puedes poner el color de fondo que tu quieras te paso la pagina:


      http://cbox.ws/

      Eliminar
  25. Anny tengo un problema con el chat!! me aparece 2 veces que ago?? responde

    ResponderEliminar
    Respuestas
    1. ammmm borraste el primer codigo del cbox que tenias antes de poner este nuevo?

      Eliminar
  26. cual es el codigo cbox? de donde lo saco?o:

    ResponderEliminar
    Respuestas
    1. hola stefani. el codigo del cbox te lo da a la hora de hacer tu cbox.. mira visita esta pagina

      http://cbox.ws/

      ahi haces tu cbox y al terminar te dara un codigo

      Eliminar
  27. No entendi la ultima!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar

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