Cute Cajita Deslizante/flotante

Hola holaa de nuevo por aca xD!! ya como ultimo post les quiero compartir este tuto que puedes utilizar para poner algunos avisos! queda muy lindo :)! Yo en una puse un pequeno poema y en el otra pestanita puse un reproductor de musica. Ustedes pueden darle el uso q gusten!

[ clic aqui L i v e  P r e v i e w ]

 Para poner la cajita en tu blog solo copia el codigo y pegalo en un gadged html/javascript :)!!

<style> #cajitaflotante{ top:-136px; left:6px; width:160px; height:180px; background-color:transparent; font-family:silkscreen; font-size:8px; color:#cc83a8; position:fixed; z-index:8888; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #cajitaflotante:hover{ top:0px; z-index:9999; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #cajitaflotante img { max-width: 145px; height: auto; } #cajitaflotante1{ top:-50px; left:106px; width:160px; height:94px; background-color:transparent; position:fixed; z-index:8888; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #cajitaflotante1:hover{ top:0px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } </style> <br /> <div id="cajitaflotante"> <div style="-moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; background-color: #fdfcf6; border-bottom-right-radius: 20px; height: 111px; padding: 5px; width: 150px;"> <div style="height: 100px; overflow-x: hidden; overflow-y: auto;"> <center> ESCRIBE AQUI<br /> ESCRIBE AQUI <br /><br />ESCRIBE AQUI<br /> ESCRIBE AQUI<br /><br />ESCRIBE AQUI<br /><br /> ESCRIBE AQUI </center> </div> </div> <div style="-moz-border-radius-bottomleft: 300px; -moz-border-radius-bottomright: 300px; -webkit-border-bottom-left-radius: 300px; -webkit-border-bottom-right-radius: 300px; background-image: url('http://37.media.tumblr.com/971dadcd5d7b7caa6bd236bebf8e9d46/tumblr_mt67noIbPl1ru3nbdo7_r1_250.png'); border-bottom-left-radius: 300px; border-bottom-right-radius: 300px; height: 60px; width: 99px;"> </div> <div style="background: transparent; color: #cc83a8; font-family: silkscreen; font-size: 8px; letter-spacing: 0px; line-height: 8px; margin-left: 0px; margin-top: -35px; padding: 5px; text-align: center; width: 89px;"> avisos </div> </div> <div id="cajitaflotante1"> <div style="-moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; background-color:#fdfcf6>; border-bottom-right-radius: 20px; height: 25px; padding: 5px; width: 150px;"> <div style="margin-top: -3px;"> <embed align="middle" height="10" name="billy" quality="high" src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://sites.google.com/site/annyzkawaiiblog/script/Spirited%20Away-Ano%20Natsu%20He%20Music%20Box%20Version%20%20www.mp3mobile.me%20.mp3&t0=Spirited Away ♡&total=1" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed> </div> </div> <div style="-moz-border-radius-bottomleft: 300px; -moz-border-radius-bottomright: 300px; -webkit-border-bottom-left-radius: 300px; -webkit-border-bottom-right-radius: 300px; background-image: url('<FONT COLOR=#FE2EF7> http://37.media.tumblr.com/971dadcd5d7b7caa6bd236bebf8e9d46/tumblr_mt67noIbPl1ru3nbdo7_r1_250.png</FONT>'); border-bottom-left-radius: 300px; border-bottom-right-radius: 300px; height: 60px; width: 99px;"> </div> <div style="background: transparent; color: #cc83a8; font-family: silkscreen; font-size: 8px; letter-spacing: 0px; line-height: 8px; margin-left: 0px; margin-top: -35px; padding: 5px; text-align: center; width: 89px;"> musica </div> </div>