\\❤-Mi Mundo Magico-❤//: Tutoriales

Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas

miércoles, 19 de febrero de 2014

-Tutorial- Cambio tu Orb (boton de inicio) Personaliza Tu PC!

Hola! Hola! Antes de empesar quiero decirte que la orb es esto:

Es el boton de Inicio de su pc y ustedes pueden personalizarlo.
El botón Inicio de Windows 7 es prácticamente igual que el de Vista. Su aspecto para la mayoria ya es cansador y muchos desearíamos cambiarlo por otro. Con Windows 7 Start Orb Changer si se puede *w*.
Aqui el tutorial de como cambiar tu orb con este programita Portable super facil de usar!:
CLICK AQUI PARA IR AL TUTORIAL

Espero te guste el tutorial y que te sirva, mejore bastante la calidad, esta en HD,seria 720p.

Asi que espero que puedas apreciarlo mejor! Besitos!! >w<

lunes, 3 de febrero de 2014

Tutorial List!

Hey! Hola Hola!

Hoy les enseñare como tener la lista de tus tutoriales o freebies asi:

Si te gusto sigue los siguientes pasos para poder tenerlo.

Colocamos el siguiente codigo en donde ustedes quieran su lista, o en un gadget HTML.

<style>
a.yejuny{
background:url(http://media.tumblr.com/63ac3bd73106fb137241a615541a45e5/tumblr_inline_mjs1cjx50n1qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
background-position:left;
padding-left:25px;
color:#444;
margin-bottom:2px;
font:12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
display:block;
line-height:18px;
}

a.yejuny:hover{
background:url(http://media.tumblr.com/tumblr_m46ltvcl341qdlkyg.gif);
background-repeat:no-repeat;
background-size:15px;
}
.tuto-title{
background:url(http://i.imgur.com/5OiU9JI.png);
text-align:right;
padding:5px;
padding-right:20px;
margin-bottom:10px;
color:#888;
width:250px;
text-transform:uppercase;
font:12px arial;
border:1px solid #eee;
}
</style>
<table style="width:550px;">
<tr><td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
</td>

<td valign="top">
<div class="tuto-title">
tutorial</div>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
<a class="yejuny" href="LINK" >Tutorial : </a>
</td>
</tr>
</table>

Eso es todo, luego lo editan, y ya. Pueden cambiar el gif que esta alado y tambien el fondito de la cajita del titulo.
Un beso >.< espero que les haya servido. Bye!!
Creditos a: Wanaseoby

domingo, 2 de febrero de 2014

Dos Tipos de Marquee muy Lindos!

Hey! Hola! Hoy te comparto dos estilos de marquee super lindos, espero que te gusten y los uses, déjame un comentario no lo olvides! Un beso! Adios...

word

<div style="background: url(FONDITO); border: 1px solid #CADFF4; color: #666666; padding: 5px; width: 250px;">
<marquee>AQUI TU TEXTO</marquee></div>

word

<div style="background:url(URL DEL FONDITO); width:250px; padding:5px;border:1px solid #CADFF4; color:#666;"><marquee><div style="background:url(URL DEL GIF) no-repeat ; background-size:16px; padding-left:20px;">AQUI TU TEXTO</div></div>

Creditos a: Wanaseoby

Cajita de Texto Super Linda!

Hey! Hola Hola!

Hoy traigo un pequeño tutorial de como colocar una cajita de texto super linda. Es esta!

Si la quieres copia el siguiente codigo en un Gadget HTML

<style>
.imageu{
width:260px;
border-radius:10px;
background:url(IMAGEN DE FONDO);
background-size:360px;
padding:15px;
height:200px;
box-shadow:0 0 6px #ccc;}
.boxeu{
width:250px;
border-radius:10px;
background:#fff;
background-size:360px;
padding:5px;
height:190px;
opacity:0.9;
border:1px dashed #ccc;
text-align:left;
color:#777;
overflow-x: hidden;
overflow-y:scroll;
}

</style>
<div class="imageu">
<center>
<div class="boxeu">
AQUI TU TEXTO BELLO
</div>
</center>
</div>

Eso es todo, tan solo editas el codigo y ya tienes tu linda cajita. Espero que te haya servido, un beso!
Creditos a: Wanaseoby yo solo edite un poco la cajita.

Coloca boton Follow/Dashboard en la esquina superior de tu blog!

Hola!
Al fin después de tanto tiempo traigo un nuevo tutorial!
Esta vez se trata de como colocar un botoncito de Follow y Dashboard en tu blog.

imagen de A.F.S.

1_Vamos a diseño->Añadir Gadget HTML-> y pegan EL SIGUIENTE CODIGO:

<div style="position:fixed; top :5px; right:5px; padding:5px; border:2px dashed #COLOR BORDE; background:#COLOR FONDO;"><a style="color:#COLOR LETRA; text-decoration:none; font-family:calibri; font-size:12;" href="http://www.blogger.com/follow-blog.g?blogID=CODIGO DE TU BLOG">Follow | </a> <a style="color:#7B7A7A; text-decoration:none; font-family:calibri; font-size:12;"href="http://www.blogger.com/home">Dashboard </a> </div>

Edita:

Color borde:Pon el color de el borde.

Color fondo:color del fondo de la cajita.

Color letra:El color de la letra de la cajita.

Codigo de tu blog:Es el codigo de tu follow del blog:mira un ejemplo--->

Entras a tu escritorio de tu blog y copias los numeros de arriba:

imagen de A.F.S.

Eso es todo, es super facil y queda muy bello, creditos a A.F.S por el tutorial, besos!

lunes, 23 de diciembre de 2013

Coloca Nieve En tu Blog

Hola hoy te comparto un tuto de como colocar nieve en tu blog, queda muy lindo! Y es super Fácil.
Solo coloca en un gadget HTML el siguiente código y listo.

if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 30;   //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style && 
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}

function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
 dy = fall[i];
 dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
 x[i]+=dx;

if (x[i] >= w || y[i] >= h){
  y[i] = -10;
  x[i] = Math.round(Math.random() * w);
  fall[i] = (sfs[i] == 1)?
  Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
  step[i] = (sfs[i] == 1)?
  0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
 }
 
 theFlakes[i].top = y[i] + scrl(0) + pix;
 theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
 theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
 y[i] = Math.round(Math.random()*h);
 x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",winsize);
 window.attachEvent("onload",init);
}

})();
}//End.

</script>

Eso es todo, super facil, espero que les guste y no olvides dejar tu lindo comentario, Adios! adios

domingo, 17 de noviembre de 2013

Textarea con Seleccion w

Hola Que Tal?
Me apurare con la entrada xD tengo que estudiar para Geografía...D: aun no lo hice y tengo el examen mañana 7u7 jeje, ok sigamos.
Hoy les comparto un tipo de textarea que cuando pasas el cursor sobre el selecciona todo el texto que esta dentro. Espero que les guste.
Para colocarlo copien este codigo y lo copian en el lugar donde quieran ponerlo:

<textarea cols="15" rows="3" style="background: url(IMAGEN DE FONDO); border: #FE2E9A 1pt dashed; text-shadow: 0px 1px 0px #f4feff, 0px -1px 0px #f4feff, 1px 0px 0px #f4feff, -1px 0px 0px #f4feff;" onmouseover="this.focus()"onfocus="this.select()" input type="text" size="31" onmouseover="this.focus()" onfocus="this.select()">AQUI TU TEXTO</textarea>

Ahora solo les quedaría editar en donde les indique y ya. Eso es todo es muy facil y es muy util.
Nos vemos...

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:

Eso es todo, espero que te guste y te sirva. Dejame Un Comentario!
Creditos a: Annyz World

domingo, 22 de septiembre de 2013

Coloca Marquee Publicidad

Hola!

Hoy te comparto un Tuto que yo misma fui jugando con el html y llegue a esto.
Espero que te sirva.
Es de como colocar marquee para tu publicidad en el blog, ago asi como el mio:

Ok, comensemos.

Deberan Colocar este codigo donde quieren que se ubique el Marquee:

<br /><br /><br /><marquee scrolldelay="100" direction="up" crollamount="8" height="100px"> <center><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="ENLACE"><img height="100" src="URLIMAGEN" width="100" /></a></a></div>
<br />
<a href="ENLACE"><img height="90" src="URLIMAGEN" width="200" /></a></a></div>
<br />
<a href="ENLACE"><img height="100" src="URLIMAGEN" width="100" /></a></a></div>
<br />
<br /></center> </marquee><br />

Ahora solo les queda Editar.

ROJO: el url del enlace

VERDE: medidas de la imagen, debes ponerla segun el tamaño de la imagen que pongas.

NARANJA: url de la imagen que al hacer click te llevara al enlace.

Eso es todo.

Espero que les haya servido y espero sus comentarios. Adios