Menu/Navegacion Flotante #1

hola holaa ~~~
Que tal como ha estado??? espero que bien, yo por mi parte tambien me encuentro bien. pese algunos problemillas por ahi xD pero se puede decir que bien jajajaja..Tenia dias sin entrar al blog para actualizar u.u habia dicho que lo haria cada miercOles pero no habia podido hasta ahora .. mil disculpas >.< !!

Para mi fue una alegria enooooorme entrar hoy al blog y ver que ya somos 3023 SEGUIDORES!!! no me lo podia creer de verdad, pese a que he estado algo ausente, siguen visitandome :D tambien quiero agradecer  a todas esas personitas que siempre entran al blog y me dejan un comentario :D eso me pone muy feliz =^.^= eso me sigue dando animos para seguir poniendo todo tipo de recursos cute :)!!

1 2 3 empezemossss ~~

CLIC AQUI PARA VISTA PREVIA

Esta cajita siempre estara al lado "izquierdo" y quedaria mejor si tu blog es de 2 columnas xD

Si te gusto la cajita no dudes en ponerla en tu blog :) 

paso 1.- copia y pega este codigo y pegalo en un gadget html/javascript 

<style> #blogtitle{ font-family: Monotype Corsiva; font-size:22px; line-height:24px; color:#edacce; } div#kawaiilink1{ position:fixed; height: 30px; width: 30px; top: 608px; left: 23px; background:#ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; opacity: 3; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #kawaiilink1:hover{ background:#ffe3f6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } div#kawaiilink2{ position:fixed; height: 30px; width: 30px; top: 608px; left: 57px; background:#ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; opacity: 3; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #kawaiilink2:hover{ background:#ffe3f6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } div#kawaiilink3{ position:fixed; height: 30px; width: 30px; top: 608px; left: 90px; background:#ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; opacity: 3; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #kawaiilink3:hover{ background:#ffe3f6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } div#kawaiilink4{ position:fixed; height: 30px; width: 30px; top: 608px; left: 124px; background:#ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; opacity: 3; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #kawaiilink4:hover{ background:#ffe3f6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } div#kawaiilink5{ position:fixed; height: 30px; width: 30px; top: 608px; left: 159px; background:#ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; opacity: 3; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #kawaiilink5:hover{ background:#ffe3f6; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } #luv{ position:fixed; opacity:0; width:145px; height:30px; margin-top:70px; background:White; border:1px solid #edacce; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #sidebar:hover #luv{ opacity:1; margin-top:98px; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #sidebar { padding:10px; text-align:center; position:fixed; left: 200px; background:white; margin-left:-180px; margin-top:200px; width:145px; font-size:10px; font-family:Tahoma ; border:1px solid #edacce; -webkit-border-radius: 1em; } #luvsideimg img { width:100px; height:100px; border-radius:80px; padding:8px; background:white; border:1px solid #edacce; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; } #luvsideimg img:hover { border-radius:0px; border:1px solid #edacce; -moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; } </style> <div id="sidebar"> <div id="luvsideimg"><a href="/" title="it's crazy in here." class=""><img src="http://static.tumblr.com/95aa0ae4fbec18b6aca9e80964119213/tubsgh5/yApml9f3g/tumblr_static_molang_hearts.jpg" /></a></div> <div id="blogtitle">Sweet lovely</div> <div id="kawaiilink1"><a href="/" title="HOME"><img src="http://media.tumblr.com/552b9ea334aeb01a2665b7852ea18992/tumblr_inline_mn41t8zSVz1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top: 2px; margin-left:3px; -webkit-border-radius: 10px; background:transparent;" /></a></div> <div id="kawaiilink2"><a href="DIRECCION MAIL" rel="01" class="poplight" title="MAIL"><img src="http://media.tumblr.com/979c444d1099d909f523ea6c46b2a77d/tumblr_inline_mn41t5oGEF1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div> <div id="kawaiilink3"><a href="DIRECCION YOUTUBE" rel="02" class="poplight" title="YOUTUBE"><img src="http://media.tumblr.com/8a69100e3fd1e52fab8b0208b2d0b4ae/tumblr_inline_mn41t889Fn1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div> <div id="kawaiilink4"><a href="DIRECCION PAGINA PERSONAL" rel="03" class="poplight" title="PAGINA PERSONAL"><img src="http://media.tumblr.com/59eb4d44cb452aaaca285e68e4896e15/tumblr_inline_mn41t56RXl1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div> <div id="kawaiilink5"><a href="http://annyz-kawaii.blogspot.mx/" title="Credito"><img src="http://media.tumblr.com/f58531ca04cc3ae214a71bd4571d6bf1/tumblr_inline_mn41t6MHXW1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div> <div id="luv"><select onchange="location=this.options[this.selectedIndex].value;" style=" font-family:latha;background-image: url('https://40.media.tumblr.com/cff2f820a6cb753e94175e969d6f7270/tumblr_inline_nov9mxfRXX1rnjuep_540.png'); border:1px solid #edacce; height:20px; font-size:10px; text-transform:uppercase; width:135px; margin-bottom:2px; -webkit-appearance: none;text-align:center;margin-top:5px;"> <option value="" />navegacion <option value="URL DIRECCION/LINK" />TUTORIAL<option value="URL DIRECCION/LINK" />RECURSOS<option value="URL DIRECCION/LINK" />CATEGORIA<option value="URL DIRECCION/LINK" />CATEGORIA<option value="URL DIRECCION/LINK" />CATEGORIA<option value="URL DIRECCION/LINK" />CATEGORIA <option value="http://annyz-kawaii.blogspot.mx/" />CREDITO </select></div> <div id="desc"><b><font color="#81BEF7">SHalalala</font></b> <br /> Hola hola !! Bienvenidos a mi blog <b><font color="#D0A9F5">kawaii</font></b>. No olvides COMENTAR Kises&hugs</div></div>
La cajita la puedes personalizar a tu gusto :)

Como personalizo el menu y el pequeño gif ?

Te vas al codigo y buscas esta parte:

okii lo que esta de color Rosita es donde pondras la direccion/url  de la categoria. Lo que esta de color morado es el nombre de la categoria que TU quieras poner :) .yo le puse unos por defecto como puedes ver pero se las puedes cambiar ejem. Facebook, youtube, acerca de mi, etc etc. Ahora lo de azul es la direccion del pequeño gif.

Como personalizo los colores de la cajita?

Igual que antes, busca la parte de este codigo:

En la parte que esta de color rojo es para cambiar el fondo de la cajita. Y lo que esta en verde es para cambiar el tipo de borde y el color.

Como personalizo la cajita de la navegacion?

Muy facil solo busca en el codigo donde dice #luv{ y haz lo mismo que en la pregunta anterior.. lo rojo es para bordes y verde para tipo  de borde y color.

AHORA para saber donde debes poner las categorias y direcciones busca esto en tu codigo:

Lo azul es para poner una imagen de fondo en la cajita (pueden utilizar un fondo discreto para que no quede muy llamativo) lo verde ya saben  para tipo  de borde y color. Lo morado como pueden ver ees para poner la direccion/url de la categoria y por ultimo lo naranja es para poner el nombre de la categoria de tu blog que desees :)!

espero no haberlas confudido jajaja sino ya saben dejen su comentario :) saludos!!!!