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

Gyapo