\\❤-Mi Mundo Magico-❤//: septiembre 2013

martes, 24 de septiembre de 2013

Navegador Flotante -menu-

Hey! Que Onda? hoy te traigo un tuto, es de como colocar un lindo menu flotante para tu blog, algo asi:

| LIVE PREVIEW |

Home > Design > Add a Gadget > Html

Copia el Codigo siguiente:

<head> <link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'/> </head>
<style> .posi { position:fixed; top:100px; left:10px; } .menroll { background: #FFF; width: 40px; height: 40px; padding: 5px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-transition-duration: .90s; -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000; overflow: hidden; margin-bottom: 5px;} .menroll:hover { background: #FFCCDD; width: 180px; height: 40px; padding: 5px; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-transition-duration: .90s;} .rollimag { width: 40px; height: 40px; float: right; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-transition-duration: .90s; z-index: 100;} .menroll:hover .rollimag { width: 40px; height: 40px; float: right; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; -webkit-transition-duration: .90s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-box-shadow: 0px 0px 4px #000; -moz-box-shadow: 0px 0px 4px #000; box-shadow: -2px 0px 9px #000;} .tituroll { width: 300px; color: #FCFBFE; font-size: 12px; font-family: Jacques Francois Shadow; z-index: 50; margin-top: 7px; margin-bottom: -25px; -webkit-transition-duration: .90s; opacity:0; -moz-opacity: 0; filter: alpha(opacity=0); text-shadow:0px 0px 5px #000;} .menroll:hover .tituroll { text-shadow:0px 0px 2px #FC839B; margin-left: 5px; -webkit-transition-duration: .90s; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100);} </style> <div class="posi">
<div class="menroll"> <div class="tituroll"> TITULO</div> <img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" /> </div> </a> <br> <a href='LINKHERE'> <div class="menroll"> <div class="tituroll"> TITULO</div> <img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" /> </div> </a> <br> <a href='LINKHERE'> <div class="menroll"> <div class="tituroll"> TITULO</div> <img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" /> </div> </a> <br> <a href='LINKHERE'> <div class="menroll"> <div class="tituroll"> TITULO</div> <img src="http://data.whicdn.com/images/49054459/tumblr_mgc73zf1lB1s1svfvo1_500_large.png" class="rollimag" /> </div> </a>

Ahora a editar!
Lo que esta en LILA: es la url de la imagen que estara alado del titulo
Donde dice Link Here ira tu enlace
Donde dice titulo colocaras el titulo de acuerdo a tu enlace.
Espero que te haya gustado y te sirva. Espero tu comentario!
Creditos:

lunes, 23 de septiembre de 2013

Marquee En Imagenes

Hey Que Onda! Hoy traigo un tuto que lo saque del blog de Annyz y son nuevos estilos de marquee. Espero que te gusten, dejame un comentario de que te parecieron.

MARQUEE1:

Este es e Codigo para Colocarlo:

<marquee behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" width="100%"> <img height="100" src="DIRECCION DE TU IMAGEN" width="110" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /></marquee></center>

MARQUEE2:

Aqui el Codigo para Colocarlo:

<marquee behavior="alternate"><marquee width="200"><img src="DIRECCION DE TU IMAGEN"><img src="DIRECCION DE TU IMAGEN"><img src="DIRECCION DE TU IMAGEN"><img src="DIRECCION DE TU IMAGEN"></marquee></marquee>

MARQUEE3:

Aqui el Codigo para Colocarlo:

<center><marquee direction="left"><img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A"><img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A"><img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A"></MARQUEE></center>

Esos son Todos espero que te hayan Gustado. Adios!

Cajita de Texto -EDITALA A TU GUSTO!-

Hey Que Onda? XD espero que lo que haya inventado te sirva.

AQUI TU TITULO

ACA TU TITULO

AQUI TU MENSAJE OK!
MENSAJE..MENSAJE..MENSAJE
MENSAJE..MENSAJE..MENSAJE
MENSAJE..MENSAJE..MENSAJE
MENSAJE..MENSAJE..MENSAJE
MENSAJE..MENSAJE..MENSAJE

AnitaWorld♥

<center>  <table style="background:url(URLDELFONDITODELACAJITA); border:1px dashed #CADFB4; margin-left: auto; margin-right: auto; text-align: center" cellpadding="3" cellspacing="3" width="140"> <tr> <td><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="text-align: center; font-family:Arial; font-size: 8pt; color: #000000" valign="top"><b>AQUI TU TITULO</b> <iframe name="l1" src="AQUIURLDETUAVATAR" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" width="100" height="100" allowtransparency="true"></iframe></td> </tr> <tr> <td style="text-align: center; font-family:Century gothic; font-size: 8pt; color: #000000"><b>ACA TU TITULO</b><br><br> <marquee style="text-align: center" direction="up" scrollAmount="1" scrolldelay="1" height="50" width="100%" onmouseover="this.stop()" onmouseout="this.start()"> AQUI TU MENSAJE OK!<br> MENSAJE..MENSAJE..MENSAJE <br> MENSAJE..MENSAJE..MENSAJE<br> MENSAJE..MENSAJE..MENSAJE<br> MENSAJE..MENSAJE..MENSAJE<br> MENSAJE..MENSAJE..MENSAJE<br> </marquee> </td> </tr> <tr> <td><br><a style="text-decoration : none; cursor : nw-resize;font-family:century gothic; font-size: 7pt; color: #000000" target="_blank" href="http://mimundomagicoanitaeditions.blogspot.com.ar/">♥</a></td> </tr> </table> </td> </tr> </table> </center>

Estuve aburrida y fui jugando con el html! xD espero que les guste y les sirva :P nos vemos.

Link Hover -Rainbow Tutorial-

Hey Que Onda? Hoy Traigo un tuto super lindo y rainbow, como colocar Link Hover, muy colorido y queda muy lindo.

*Vamos a Plantilla >> Edicion de html >> continuar y antes de ]]>

pegamos este codigo:

a:link, a:active, a:visited{color: {color:link};text-decoration: none;}a:hover {color: {color:hover};background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbaqzkEbZvwW-XTX8tJF_bAbIfZ_9DXbUQWpSjUDtOtJRDxuKOsmRicRhJo6uH61qE5ErgvebL8_2DJEmjlJ16OYXinNMXriAmyGopDdl0Ye6FeexLcxNKQTmmWgYrswLsh_ZGs55TCv4/s1600/gif2.gif);}

aqui algunos colores parpadeantes y llamativos: