martes, 4 de septiembre de 2012

Cute Estatus en la Esquina de tu Blog

Tuto tuto hahah ya tenia dias sin poner uno xD bueno espero les guste ^^



Para ponerlo en tu blog sigue estos pasos:

-- Primer Paso:

Ya uso la nueva interfaz asi que nos vamos a Plantilla >> Edicion de Html >> Continuar

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

#bubblebar
{font-family:lucida console;
width:60px;
position:fixed;
right:15px;
bottom:70px;
z-index:999;
font-size:9px;
text-align:center;}

.bubble
{text-align:center;
color:#555;
float:right;
height:10px;
width:34px;
padding-top:12px;
padding-bottom:12px;
margin-top:10px;
overflow:hidden;
-moz-border-radius: 17px 17px 17px 17px;
border-radius:17px 17px 17px 17px;
-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;}
.bubble img
{margin-bottom:10px;
margin-top:-2px;}

#vertical
{position:fixed;
width:10px;
right:30px;
bottom:0px;
height:260px;
background-image:url('http://www.commentnation.com/hotlinks/wood_floor_pattern_seamless.jpg');
background-color:#f8c76f;
-moz-border-radius: 10px 10px 0px 0px;
border-radius:10px 10px 0px 0px; }

#bubble1 {border:3px solid #FFD7EE;
background-color:#fff}
#bubble1:hover
{padding:5px;
height:50px;
width:120px;
border:3px solid #CCF2FF;}

#bubble2
{border:3px solid #F1CCFF;
background-color:#fff;}
#bubble2:hover
{padding:5px;
height:50px;
width:120px;
border:3px solid #FFD7EE;}

#music
{border:3px solid #CCF2FF;
background-color:#fff;
padding:14px 0px 10px 0px;}
#music:hover
{padding:5px;
height:50px;
width:50px;
border:3px solid #F1CCFF;}
#bubbleplayer{padding:2px 0px 5px 0px;}


Da la opcion guardar ~~

-- Segundo Paso:

Ahora nos vamos a Diseño >> Añadir un gadget html/javascript y pegar en el, este codigo que pongo a continuacion:

<div id='vertical'></div>
<div id='bubblebar'>
<div class='bubble' id='bubble1'><img src="http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog296.gif"/>
<div>AQUI TU TEXTO</div>
</div><!--bubble1-->

<div class='bubble' id='bubble2'><img src="http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog72.gif"/>
<div>AQUI TU TEXTO</div>
</div><!--bubble2-->

<div class='bubble' id='music'><img src="http://sl.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif"/>
<div id='bubbleplayer'>AQUI TU REPRODUCTOR</div>
</div><!--music bubble-->
</div><!--bubbleblar-->

das guardar y listo ^^

NOta: se puede personalizar el color de poste o palito, los colores de los bordes de cada circulo y los gifs que van dentro n.n

credito

33 comentarios:

  1. Guauu !! fantastico annyz !!{como siempre ewe}
    Lo voy a intentar xD
    Muchas grasia spor los tutos ^^
    Son genials^^

    ResponderEliminar
  2. Muy lindo me encantan tus tutos son muy útiles y super Kawaii gracias por compartirlo y tu enorme esfuerzo.

    Saluditos :D

    ResponderEliminar
  3. Respuestas
    1. a cuales url te refieres batata??

      Eliminar
    2. Nu se porque en el cudradito del codigo dice aqui tu reproductor ¿que es eso?

      Eliminar
    3. mm bueno se refiere al codigo del reproductor osea como el que tengo arriba en la esquina.. es para poner ahi tus canciones

      Eliminar
  4. Lo he probado en mi blog de prueba y no cambiaría ni siquiera los iconitos *O* (Más que nada porque no sabría hacerlo xD) puede que lo use en mi blog, gracias!!

    ResponderEliminar
    Respuestas
    1. Perdona que se me olvidaba comentarte si me podías ayudar. Tengo unas cajitas de texto que me gustan que vi de otra chica de otro blog. No he modificado nada, es solo que no sé como centrarlas en mi post. No, no quiero centrar el escrito, sino toda la caja.
      El código de la caja de texto empieza por < div style="background-image
      Ya probé a poner eso de < P ALIGN = center pero no me funciona.
      He intentado ponerte el código de la cajita aquí pero no me deja subirlo el comentario.
      ¿Qué le falta para que pueda centrarla?

      Eliminar
    2. hahah okii mira para cambiarle los iconitos de adentro es muy facil...mira en el segundo paso se encuentra este codigo

      solo quita mi enlace: asi se muestra

      <img src="http://i1190.photobucket.com/albums/z449/_KawaiiCherryCupCake_/Annyz_Blog/minigifsbyannyzblog296.gif"/>

      asi te quedaria si se lo quitas.. ya solo quedaria poner el gif de tu eleccion

      <img src="AQUI TU DIRECCION DEL GIF"/>

      besos

      Eliminar
    3. y para tu segnda duda de la cajita prueba esto:

      ponle <center> al principio del codigo y </center> al final

      saludos .. avisame si te funciono

      Eliminar
    4. Gracias!!
      *O* Ya mismo subo mi entrada con las lecciones aprendidas!!

      Eliminar
  5. Gracias Annyz lo estoy terminando de colocar :) Es muy kawaii XD

    ResponderEliminar
  6. Genial!!!
    Mira a ver si es de tu gusto : misslucya.blogspot.com y tipicalflower.blogspot.com

    ResponderEliminar
  7. mmm interesante tuto ya el probare, annyz hiciste un tutorial sobre como hacer que quede el borde morado ese que tienes, que solo nrecoge a las entradas y gadgets de un lado y no al titulo, es que llevo tiempo buscando ese tuto, si no le hiociste me ahrias un gran favor haciendole, no me corre prisa puedes tomarte todo tu tiempo, se que estas liada con tantos seguidores y no daras a basto, beuno besazos y sigue asi ;)

    ResponderEliminar
  8. ya lo he puesto en mi blog,gracias pior ponerlo,pero el mp3 como lo pongo??.

    eres un genia!!

    ResponderEliminar
  9. maginifico :) oy emencnanta ut blog te sigo sigues el mio?¿ www.dreamandbefree.blogspot.com

    ResponderEliminar
  10. Es muy bonito el truco lo pondre en mi blog porcierto anny donde esta el truco de ese que tienes debajo de los seguidores eso k va pasando las entradas poco a poco esque quiero uno pliis dimelo como ponerlo e mi blog!:)

    ResponderEliminar
    Respuestas
    1. http://annyz-kawaii.blogspot.mx/2012/05/post-recientes-con-fondo-personalizado.html

      saludos

      Eliminar
  11. Claro que puedes usar mi explicacion annyz! espero que te sea de ayuda!! Me has ayudado mucho y espero que ahora yo pueda hacerlo x.x un beso y solo recuerda poner el enlace de mi blogui al final byebye

    ResponderEliminar
  12. Hola guapa como estas pasaba a saludarte y a informarte que tienes un premio en mi blog espero quete guste besos!!


    http://mundo-lov.blogspot.com.ar/2012/09/regaito-premio-y-un-sorteo-genial.html

    ResponderEliminar
  13. esta preciosooooo deberas me gusto mucho este tuto gracias!

    ResponderEliminar
  14. Gracias Annyz! me sirvio. Pero te puedo hacer una pregunta?, quisiera cambiar de lugar el gadget, o sea de pasar a estar a la derecha para que este a la izquierda.
    Saludos!

    ResponderEliminar
    Respuestas
    1. si se puede solo tienes que cambiar unos valores :

      en el codigo del primer paso busca esto:

      #bubblebar y donde dice: right:15 cambialo a left:0px;

      .bubble y donde dice: float:right; cambialo por float:left;

      #vertical y donde dice: right: 30px cambialo por left:15px;

      solo esos tres cambio listo.. si sigues con duda .. dejame un coment ^^ saludos

      Eliminar
    2. graciiass!! tu respuesta me sirvio mucho ^^

      Eliminar
    3. Muchisimas gracias!
      cada vez mas asdkasgdjgh tu blog ♥

      Eliminar
  15. Annyz no tenes un tuto en video porque es la primera vez que entro a edicion html y me aparece ya algo tipo un codigo y no se si borrarlo y probre de las dos formas(borrarlo y no borrarlo)y me dice que hay un error al analizar y me gustaria que me des el link del tuto video en youtube .desde ya muchas gracias http://www-myworld-fashionista.blogspot.com.ar/

    ResponderEliminar
  16. Hola!! Muchas Gracias por el tuto. Pero tengo una pregunta.. a mi me queda el primer codigo arriba como lo saco? Gracias! http://cositasparatus-blogs.blogspot.com/

    ResponderEliminar
    Respuestas
    1. amm si te salio todo el codigo arriba es que lo pusiste mal, si quiers que desaparezca solo borra todo el codigo y listo ^^

      Eliminar
  17. precioso, gracias por las lindas cositas que haces, el tuto me
    fue muy util para mi foro. aqui el estatus.

    http://chibi.graph-kawaii.com/

    ResponderEliminar
  18. Hola! Estoy intentando ponerlo en mi blog, pero quiero que esté a la izquierda, podrias decirme como ponerlo alli?

    Esque por mas cosas del code que cambio no queda como quiero :/

    ResponderEliminar

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