Bienvenidos a Aitokawaii. Gracias por visitarme! Si te ha gustado el blog sigueme! O bien ve a tu Escritorio blogger
Kawaii Tutos

Neko

Gracias por tu visita, recuerda comentar!! No tomes mis tutoriales porfavor, si deseas alguno pidemelo ne!


 No copies los tutoriales sin mi permiso
 Si tomas algo de Kawaii Tutos debes poner creditos
 No spam al comentar o en el chat
 No insultar
 Tolera la opinion de los demas
 Si pides un tutorial haslo en la entrada correspondiente AQUI
 No olvides comentar ne!
[Blogger y Blogskin] El hover en tu HTML
17 sept 2012| 17:04 | 2 Bocadillo(s)


Hola!! Mmm bueno este mas que un tuto es una explicacion de cosas que pueden hacer super kawaii tu blog, es con respecto a el Hover.

Que es?? El Hover es el cambio que ocurre al pasar el mouse en algo de tu blog, por ejemplo un link, una imagen o el blockquote.

Bien es un efecto muy padre pues ayuda a que tu blog se vea elegante y sofisticado! Solo debes de usar la imaginación para que todo esto funcione ne! Yo te enseñare poco a poco lo util que es el hover... por ahora termino mi sesión semanal de tutos, si dispongo de tiempo en la semana subiré algunos tutos mas byebye

Etiquetas: , ,

Visita mi otro blog AITOKAWAII y encuentra material.




[Blogskin] Tutorial: Efecto imagen que se opaca o aclara al pasar mouse
| 16:54 | 2 Bocadillo(s)


 Entras a tu blog, y te vas a Plantilla, busca este codigo
.img
o
a: img {

 Y justo abajo pondras este codigo:
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear; 
-moz-transition: opacity 1.5s linear; 
}
te quedaria algo asi:
.img o a img {
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear; 
-moz-transition: opacity 1.5s linear; 
}
 Ahora busca este otro codigo
img:hover 
o
a:hover img {
Bien justo de bajo de este codigo pon esto:
opacity: .70; 
filter: alpha(opacity=100);
-o-transition: opacity 1s linear; 
border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear; 
}
Y al final quedaria asi:
img:hover o a:hover img {
opacity: .70; 
filter: alpha(opacity=100);
-o-transition: opacity 1s linear; 
border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear;  
} 

 Puede llegar a suceder que en tu plantilla no venga estos codigos si llegara a suceder solo pega los dos codigos finales, para ello busca la seccion de body { despues de su codigo de body pones los dos codigos.

Por ejemplo, tu codigo final quedaria asi:
body {
background:url(http my img);
font-family:  trebuchet ms;
background-attachment:fixed;
cursor: url(http:my cursor), auto;
}

img, a img {
border: 0px;
opacity: 100;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
border-radius: 10px;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear; }

img:hover, a:hover img {
opacity: .70;
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
border-radius: 10px;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1.5s linear; }

Listo ya quedo, recuerda comentar y si tienes dudas dimelas! 

Etiquetas: ,

Visita mi otro blog AITOKAWAII y encuentra material.




[Blogger] Tutorial: Imagen hover, se opaca o aclara al pasar mouse
| 16:42 | 0 Bocadillo(s)



 Entras a tu blog, y te vas a Diseño >> Edicion de HTML y le pones Expandir plantillas de artilugios y ahora buscas este codigo:
.img
O
a: img {
 Y justo abajo pondras este codigo:
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear;
 -moz-transition: opacity 1.5s linear; }
te quedaria algo asi:
.img o a img {
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear;
 -moz-transition: opacity 1.5s linear; }
 Ahora busca este otro codigo
img:hover 
o
a:hover img {
Bien justo de bajo de este codigo pon esto:
opacity: .70;
 filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
 border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear; }
Y al final quedaria asi:
img:hover a:hover img {
opacity: .70; 
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
 border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear; }
 Puede llegar a suceder que en tu plantilla no venga estos codigos si llegara a suceder solo pega los dos codigos finales, para ello busca la seccion de body { o bien el de /* Content en la plantilla de blogger,  pones los dos codigos.

Por ejemplo, tu codigo final quedaria asi:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);

img, a img {
border: 0px;
opacity: 100;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
border-radius: 10px;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
}

img:hover, a:hover img {
opacity: .70;
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
border-radius: 10px;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1.5s linear;
}

Bien cualquier duda decidmela bye 

Etiquetas: ,

Visita mi otro blog AITOKAWAII y encuentra material.




[Blogskin] Tutorial: Poner un divisor de entradas en mi blog
| 16:34 | 0 Bocadillo(s)




 Entras a tu blog y te vas a Plantilla (Recuerda que cuando tienes blogskin no te aparece  Diseño sino solo plantilla x.x)

 Buscas este codigo:
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="comment"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> |<img src="http://media.tumblr.com/tumblr_lkl5jkHrWZ1qfamg6.gif"/> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> star</a></BlogItemCommentsEnabled></div><$blogitembody$>AQUI</blogger><br>
NOTA:Normalmente viene en la seccion de paginas, para encontrarlo pulsa Ctrl + F y busca </blogger> o <$blogitembody$>

 Bien ahora arriba en el codigo aparece la palabra AQUI, bueno alli va a ir este codigo:
<center><img src="URL de tu divisor"/></center>

 Y listo tu codigo queda asi por ejemplo:
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="comment"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> |<img src="http://media.tumblr.com/tumblr_lkl5jkHrWZ1qfamg6.gif"/> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> star</a></BlogItemCommentsEnabled></div><$blogitembody$><center><img src="http://media.tumblr.com/tumblr_lfhtuxuom41qzvcyt.png"/></center></blogger><br>

 y se vera asi


Aqui algunas URL de Divisores


http://i171.photobucket.com/albums/u300/ferny-dust/sozai/dividers/8.gif


http://media.tumblr.com/tumblr_lfhttmlUy91qzvcyt.gif


http://media.tumblr.com/tumblr_lfhtu9TCoj1qzvcyt.gif


http://i359.photobucket.com/albums/oo34/cutemummy08/Cute%20Divider/775612tvziku38k8.gif


http://i359.photobucket.com/albums/oo34/cutemummy08/Cute%20Divider/1345618n0tlt37ar3.gif


http://i949.photobucket.com/albums/ad336/hime2608/Web%20and%20blog%20graphics/Cute%20Lines/6__MDkwNCdfbDE.gif


http://media.tumblr.com/tumblr_llo0b8JFy91qcwgz5.png



 Espero que te sea util, recuerda que puedes visitar mi otro blog... Aitokawaii para encontrar mas divisores en Material >> Divisores. byebye

Etiquetas: ,

Visita mi otro blog AITOKAWAII y encuentra material.




[Blogger] Tutorial: Poner un divisor de entradas en mi blog
| 16:29 | 0 Bocadillo(s)



 Te vas  a Diseño >> Elementos de Pagina >> Edicion HTLM y Expandir Artilugios y buscas este codigo con Ctrl+F
<b:include data='post' name='post'/>
 Abajo pones este otro codigo :
<center><img src='URL de la imagen'/></center>
queda asi:

 Click en guardar y listo

Etiquetas: ,

Visita mi otro blog AITOKAWAII y encuentra material.




[Blogskin] Tutorial: Como modificar la barra lateral scrollbar
| 16:26 | 0 Bocadillo(s)


 Busca  ::-webkit-scrollbar {   y   ::-webkit-scrollbar-thumb {   en tu Plantilla

 Estos son los que se modificaran de tal modo que quede asi
::-webkit-scrollbar {
height:8px;
width: 8px;
background:#F8E0F1;
}
::-webkit-scrollbar-thumb {
background-color:#FF94F3;
-moz-border-radius: 10px;
border-radius: 0px;
}

 Bien en caso de que no vengan estos codigos en tu plantilla entonces busca el codigo body { y justo arriba pon el codigo del punto 2).

 Te quedara asi
::-webkit-scrollbar {
height:8px;
width: 8px;
background:#F8E0F1;
}
::-webkit-scrollbar-thumb {
background-color:#FF94F3;
-moz-border-radius: 10px;
border-radius: 0px;
}

body {
background:url(Tu url de fondo);
font-family: tu tipo de letra;
background-attachment:fixed;
cursor: url(tu cursor), auto;
}

 Bien les explico los terminos para que lo hagan como ustedes quieran


::-webkit-scrollbar {
height:8px;
width: 8px;
background:#F8E0F1;
}
::-webkit-scrollbar-thumb {
background-color:#FF94F3;
-moz-border-radius: 10px;
border-radius: 0px;
}

8px >> Ambos deben ser iguales!! Es el tamaño de la barra que no sobrepase del 10px para que no se vea muy grueso.

#F8E0F1 >> Fondo de la barra. Es el color claro.

#FF94F3 >> El color de la barrita que esta adentro que se mueve. Es el color fuerte.

10px >> Los pixeles de el radio.. te recomiendo dejarlo asi!

Solo te recomiendo que juegues con los colores de la barra que uno sea mas claro y otro mas oscuro para que se distingan. Da click AQUI para averiguar el codigo de los colores

Listo!! ya quedo.... si tienen algun problema o una duda decidmela bye 

Etiquetas:

Visita mi otro blog AITOKAWAII y encuentra material.













Click para leer reglas

Welcome!
He creado este blog para quienes desean hacer su blog mas divertido. Soy sunadokei y me encanta todo lo asiático x.x Tengo otro blog en el que encontraran todo el material que necesiten para usar mis tutoriale. Este blog es 100% original asi que no lo copies, lee las reglas para que sepas como puedes tomar cosillas de Kawaii tutos. Disfruta tu estancia aqui!

SÍGUEME AQUÍ!