MCD~: Tutoriales

{ Tutorial } Menú

Publicado por Yane-chan ^ω^ 1 comentario:

Jelou bue hoy les traigo un menú muy lindo y pues nada,si utilizas algo del blog recuerda dar créditos,arigato n.n

PLANTILLAS BLOGGER

No es nada fuera de lo común para variar,parece bastante darks pero ya va cambiando la cosa cuando le cambias el color xdd.
Ponemos este código antes de ]]></b:skin>
Plantilla

Editar Html

Presiona CTR+F y busca ]]></b:skin>

} .navigator { position:fixed; top:109px; left:625px; font-size:5px; text-align:center; } .navi { padding:2px; font-size:10px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; background:#000000; display: inline-block; -webkit-transition:0.5s; transition:0.5s; } .navi:hover, .navi_active { background:#FFF; color:#FF97CB; -webkit-transition:0.5s; transition:0.5s;

Editamos:

Color de fondo del menú.
Color de fondo del menú al pasar el cursor.
Color del link al pasar el cursor.

Y este código en html/javascript.

Diseño

Añadir un gadget

HTML/JAVASCRIPT

<center> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="About">About</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Posts">Home</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Linkies">Tutorials</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Credits">Credits</a></center>

Url de la página
Nombre de menú
Nombre tooltip

Eso es todo por hoy,nos vemos en la próxima entrada,bai

Barra Flotante (・∀・ )

Publicado por Yane-chan ^ω^ 2 comentarios:

Konbanwa! Después de tanto tiempo TuT pues la verdad he estado bastante ocupada con el tema de la escuela y pues mas difícil aún ya que asisto a una nueva escuela así que me llevará tiempo tomar confianza, en fin , disculpen por mi ausencia en el blog como les dije he estado ocupada tengo trabajos para exponer y más, trataré de publicar este fin de semana y pues la próxima semana definitivamente publicaré ya que hay dos días feriados por cual me parece excelente ⊙ω⊙.
Vayamos con el tema, pues verán hoy les traigo un tutorial de una barra flotante que se vería así:

LIVE PREVIEW

Es una barra que se queda estática mientras deslizas el mouse por el todo el blog n.n , así que si te interesa vamos con el tutorial:3

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño > Añadir un gadget > HTML/JAVASCRIPT

Añadimos este código:

<div style="background-image: url('http://www.cenefasinfantiles.com/playdate/pag_68.jpg'); border-bottom: 1px solid; border-bottom: 3px solid #FFFFFF; border-top: 3px solid #FFFFFF; color: #FFFFFF; font-family: freestyle script; font-size: 40px; height: 50px; left: 0px; letter-spacing: 1px; overflow-x: hidden; overflow-y: hidden; padding: 9px; position: fixed; text-shadow: 4px 4px 5px #FFFFFF; top: 10px; width: 100%; z-index: 100;"><center>Be Free!</center></div>

Color de borde de la parte superior e inferior.

Url del fondo.

Color del texto.

Color del borde.

El texto que desees.

Espero el tutorial les haya servido n.n , si tienen alguna duda no olviden preguntar, pues nada hasta aquí hoy, nos vemos en un próximo post,bai :3

PD:

Espero poder publicar más seguido,so.

{ Tutorial } Menú Redes Sociales

Publicado por Yane-chan ^ω^ 4 comentarios:

Konnichiwa (*^ω^*)ハcomo les dije anteriormente estaré más activa y eso hago (? asdkjas equis,

hoy les traigo un menú de redes sociales (*~∇~*)ノ tiene un efecto en el cual da un giro de 360g.

Live Preview

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño

Añadir un gadget

HTML/JAVASCRIPT

Añadimos este código:

<style>
a.navi{
text-transform:uppercase;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
a.navi:hover{
background-color: #FFDBB9;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
border-radius:10px;text-shadow:0px 0px 0px ;
}
</style>
<center>
<a class="navi" href="linkredsocial"title="Facebook">FB</a>
<a class="navi" href="linkredsocial"title="Twitter">Tw</a>
<a class="navi" href="linkredsocial"title="Tumblr">Tu</a>
<a class="navi" href="linkredsocial"title="Deviantart">Da</a></center><br />
<style>
a.navi{
text-decoration:none;
background-color: #DFDBFF;
display:inline-block;
padding-left: 2px;padding-right: 2px; padding-top:10px;
text-align: center;
color:#fff;width:30px;height:22px;
border-radius:50px;box-shadow:0px 0px 3px 2px #eee;
border:3px solid #ffffff;
text-transform:uppercase;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}</style>

Url de la página.
Color de fondo del menú.
Color de fondo del menú al pasar el cursor.
Nombre de la página{ Como son redes sociales es recomendable
poner solo dos letras como FB ,TW,si pones más el menú podria
parecer otra cosa sakjda xdd}
Nombre que deseas que aparezcan{ Me explico; al pasar el cursor
nos aparece una pequeña ventanita indicando que es }

{ Normalmente }

{ Para los que usamos Tooltip personalizado }

Color de borde
Tipo de borde
Color de letra
Color de sombra

Si usas plantilla blogskin peguen el código en el lugar deseado.
Hasta aquí,nos vemos en la próxima entradaヽ( ´ ▽ ` )ノ

{ Tutorial } Dos reproductores de Música + Cajas

Publicado por Yane-chan ^ω^ 2 comentarios:

Hola nuevamente ヽ( ´ ▽ ` )ノ ,les traigo dos reproductores de música kawaii ^ω^

la verdad es que me parecieron muy lindos ⊙ω⊙, sin más rodeos empecemos:

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño

Añadir un gadget

HTML/JAVASCRIPT

1er Reproductor:

El primer reproductor es el que yo utilizo en mi blog, como pueden ver es estático, al mover tu cursor hacia el gif se abre el pequeño circulo la verdad a mi me ha encantado ^ω^

Solo pegan el siguiente código

<!------------------------ MUSIC PLAYER ------------------------!><style>#music{position:fixed; top:90px; left:10px;padding-top:10px;padding-bottom:17px;text-align:center;height:10px; width:34px;overflow:hidden;border:3px solid #FFF1C6;color:#888;border-radius:40px;-webkit-transition: opacity 0.7s linear;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;background-color:#FFFFFF;z-index:999;}#musicplayer{padding-top:10px;-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;} #music:hover {border:3px dotted #FFF1C6; padding:5px; height:65px; width:65px;border-radius:70px;}</style><div id="music"><center><img src="http://media.tumblr.com/tumblr_m9sq8vPdF31qdlkyg.gif" style="background:none;border:none;padding-top:0px;" /></center><div id="musicplayer">
<center><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/<center><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/qtZNzWTOV6E?version=2&autoplay=1&hl=en_US&color1=E4E1FF&color2=F3E1FF" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="30" height="25"></embed></center></div></div>

Ahí tienen lo que representa cada color

Tipo de borde;el primer verde es cuando no pasas el cursor; el segundo sí.

Esto indica el color del borde cuando no pasar el cursor.

Color de borde al pasar el cursor

El fondo del reproductor al no pasar el cursor

Link del gif
Código del vídeo

Color de borde del botón | |

Color de fondo del botón | |

Nota para los dos últimos:

Normalmente los colores se colocan con #

pero esta vez solo tienes que colocarlo sin #

Si usas plantilla blogskin pegalo antes de </body>

Código

2do Reproductor

Se trata de un reproductor flotante que se ubica en la esquina de tu blog y a diferencia del anterior reproduce el vídeo con imagen en una pequeña caja;en lo personal me ha parecido muy lindo al igual que el anterior ^ω^

<div style=" position:fixed; top:0px; left:100px;"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuWGYemiTWdWCs6Uy-VpC3GYkc86QRzJ94ANgHmrv3h6E1Fm7iPQ2nSC4vV8sITdIUBLppCP4IebYNPaIHhNYF2maV8k-6lmXw7Af1uDq1cFbBR6C4JaXnyphyphenhyphenWIbOoyAmr_yOyb4yW0/s1600/byyane.png" /></div><div style=" position:fixed; top:60px; left:122px;"><center><object height="25" width="300"><param name="movie" value="color1=0xffffff&color2=0xfffffffs&autoplay=1&hl=en_US&rel=0"" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/uWyFXe8tXBQ?color1=0xffffff&color2=0xfffffffs&autoplay=1&loop=1&hl=en_US&rel=0" type="application/x-shockwave-flash" width="180" height="110" allowscriptaccess="always" allowfullscreen="true"></embed></object></center></div>

Ancho del vídeo,esto va según el tamaño de tu caja.
Largo del vídeo,según el tamaño de tu caja. (si vas a utilizar unas
de las cajitas que les presentaré a continuación recomiendo dejarlo así;esto
va para la altura y la anchura)
Código del vídeo /les mostraré al final/
Url de tu caja
Altura de la caja (recomiendo dejarlo en 0px)
Altura del video
Normalmente la caja esta en la izquierda si lo que deseas es
ponerlo a la derecha tendrías que ponerle un numero mayor;
yo probé poniéndole 750 y va perfecto.
Esto es para mover el video si lo pusiste a la derecha y probaste
con 750 te recomiendo que pongas 772;es decir; aunque hayas
puesto otro número le aumentas 22px más;para que así quede centrado.

De hecho hay una pagina de la cual pueden sacar sus códigos para los colores.

Clic aquí

¿Como saco el código de un vídeo?

El código de un vídeo es para la música que quieres que reproduzca,solo para youtube;en fin;
me tome el tiempo de averiguar como hacerlo ya que no sabía como.

1.- Vamos a youtube y buscamos la música que queremos que reproduzca.
2.- Arriba en el buscador;donde se encuentra el link;tenemos un código.

Me refiero a U6H-UI7mvt0 es según el código que les aparezca a ustedes ^.^

CAJAS

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

Con fondo

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

*clic aqui para ver tamaño original*

No son muchas ,pero pronto publicaré más,espero que el les haya servido

si tienen alguna duda no duden en comentar,hasta la próxima entrada n.n

Mensaje Flotante:)

Publicado por Yane-chan ^ω^ 1 comentario:

Hey :D ! dfngfd extrañaba demasiado hacer un tutorial (*-*)/ ..

En fin hoy les traigo este tutorial de un mensaje flotante:), la verdad

es que a mi me gusto xd pero no se si a ustedes...xd .y bueno...

c'mon with the tutorial! :3

Lo primero que haremos como normalmente hacemos es ir a :

Diseño

Añadir un Gadget

HTML/Javascript

Añadimos este codigo:

<div style='position: static; top:0px; left: 0px; width:15%; position:fixed; padding:3px;border-radius:8px; border: 2px solid #BE81F7; background:white; color:black; font-size:13px;text-align:left;'><center>Aqui tu texto:)<br><a href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID">+Follow</a> | <a href="http://www.blogger.com/home">Dashboard</a>|</center></div>

Y bueno si tienen plantilla de blogskins o otra plantilla xd,solo pegan el mismo codigo

en la plantilla c:

Este mensaje flotante viene con su "Follow" y "Dashboard" pero si no los quieres/o ya los tienes

Simplemente lo quitas n.n

EDITAMOS:

Azul: Hay pones el texto que quieres que ingrese en tu mensaje n.n

Verde: Hay pones el ID de tu blog c: /Si es que quieres el mensaje con

el "Follow y Dashboard" :)

Rojo: Color del borde c:

Aqui tienen una pagina para sacar los codigos de los colores n.n

Listo! ;D

Si tienen algun problema no duden en avisar:D

Si lo usas porfavor no haria falta unos minicreditos solo eso<3

Tu comentario me provoca una sonrisa♥

LISTOS? ...Vamos con el reproductor de Musica Billy [Tutorial]

Publicado por Yane-chan ^ω^ 2 comentarios:

Hello hello ♥ Perdón por abandonar el blog de esta manera ..Hoy empezaron los exámenes ..u.u que mal mi vida -okno- Buenoo..un TUTORIAL más tiempo que ya no hago Tutoriales u.u .. Bueno..un Tutorial de...EL REPRODUCTOR DE MUSICA BILLY

Buenos vamos con los pasos!!♥

1.-

Tienes que tener el mp3 de la musica que quieres que este en tu reproductor.. No sabes como sacarlo el mp3 de la musica que prefieres?w.w ..Muy bien =) pues te recomiendo que veas este tutorial de dayi♥ :

CLIC AQUI <--- CREDITOS A ELLA♥

2.- Una vez sacado la url nos vamos a la pagina de BILLY ..:

sadsad LOL

3.- Colocamos la url del mp3 en donde esta http://xtclub (Todo lo borras) y tambien borramos Ohh yeah (tambien -_-) Bueno hay le colocamos la url de tu mp3 de la song que haigas sacado ^^

<--- Si quieres colocas mas

mp3 y al costado el titulo que desees♥

♥Y Luego si quieres que tenga una reproducción automática.. osea si una persona entra en tu blog o cualquier sitio web *en la pagina donde pondrás tu reproductor* Se iniciara automáticamente y no le quites el signo ese...

♥En caso de que no lo quieras solamente le quitas su signo y L I S T O ♥

Luego le damos clic a G E N E R A R C O D I G O:

4.- Luego una vez dado clic a Generar Código .. nos aparece un código lo cual seria tu code de tu reproductor de Billy ♥Copiamos Todo♥

**Clic a la imagen para verla mas grande**

5.- Lo unico que haremos es copiar todo el code y colocarlo en tu blog,pagina web,wordspress,lo que sea ^^

//Espero que te haya gustado este tutorial no olvides SEGUIR MI BLOG dando clic en FOLLOW que ya pondre el botoncito♥//

UN BESOO Y BYEE BYEE♥

PD: Nuevo video revisa mi canal de Youtube Clic aqui~

Tutorial [Texto adentro de un cuadrito ^^]

Publicado por Yane-chan ^ω^ 1 comentario:

Hello ^^ Welcome .. Beatiful thanks por tu agradable visit <--- LOL CADA DIA EL INGLES SE APODERA MAS DE MI XD ...Bueno ...los premios de las ganadoras lo publicare hoy o quizas mañana ^^ ... esque aun solo tengo 1 coment. de la tercera ganadora ._. me faltan 2 pramila y mile.. tienen que reclamar sus premiooss ♥ FUERA del tema os traigo este chulo Tutorial ♥ .. es pues se trata de un cuadrito .. parece cajita xD.. es simplee.. =D.. :

Aqui su vista previa ♥

Shalalalala aqui su gran vista previa la verdad es que queda algo lindo..♥ es simple.. y los simple son mejores ^^ no creen..? si usas este tutorial ..darme credits♥

Bello cuando lo editas *o* .. esa imagen fue capturada ..de la plantilla ¨MUY CUTE¨ que estoy haciendo en la siguiente entrada la publicare..

Bueno.. os gusta??.. Siganme los peque pasitos y veras la magia ♥ xD

PLANTILLAS BLOGGER:

1.- Vamos a:

Diseño>>Añadir un gadget>>HTML/JAVASCRIPT ♥

y ponemos este code ♥

<div style="border: 1px dashed rgb(225, 201, 243); padding: 3px;"><center><b style="text-align: left; color: rgb(151, 151, 151); font-family: Handlee; font-size: 12px; line-height: 20px; background-color: rgb(255, 255, 255);"><b> </b></b></center><center>Aqui el textito ♥ </center></div>

Listoo ♥ .. PD: Creo que lamentablemente no se puede cambiar el color del borde =( ..

Okay .. :

C E L E S T E : Hay pones lo que quieres que valla dentro del cuadrito ♥.♥

R O S A : Hay pones los bordes:

DOTTED ..

DASHED..

DOUBLE..

y hay mas ^^ luego los pondre..

Bueno luego lo guardan y listoo !! n.n

PLANTILLAS BLOGSKIN O LAYOUTS <-- COMO SE LLAME..

vamos a :

Plantilla .. escojemos el lugar donde pegaremos el code.. Osea pegan el code de arriba y hacen lo mismo que en el paso de Blogger ♥ . ♥ ..

Espero que os halla gustado este tutorial !! ♥ No olvides dejarme tu hermosa y linda huellita ♥ n__n..

Byee Kissess ♥

PD: en la siguiente entrada publicare la plantilla ya la termine .. pero no tengo tiempito de publicarla ^^.. Por mientras una vista previa : Clic aqui para ver la plantilla ^^ ~ Un kiss bay!! ♥

Tutorial - Cbox (personalizado 1) ♥♥

Publicado por Yane-chan ^ω^ 6 comentarios:

Ola こんにちは .. Como han estado se les a extrañado !!SABADO!! Como ven ahora estoy publicando un poco mas seguido las entradas ^^ Bueno vamos con los

Este es un tutorial en el cual le pondremos un fondo a nuestro CBOX ;D

CON LA CAJITA:

**VISTA PREVIA**

Os gusta?? Empezemoss!! =) ...

Plantillas Blogger:

1 Paso: Entramos a nuestro CBOX Y CONFIGURAMOS EL ANCHO Y EL ALTO ASI:

Bueno le damos en guardar y .. .

2 Paso: Nos vamos a Diseño >> Añadir un gadget >> HTML/JAVASCRIPT..

Y pegamos este code:

<center><div id="edited" style="width:250px; height:250px; background:url(URL DE TU CAJA DONDE ESTARA EL CHAT ^^) no-repeat left top; padding-top:65px; padding-left:0px; position:relative" align="center">
Aqui el code de tu CBOX♥</div></center>

Cambiamos :

ROSA: Aqui la url de tu cajita ..Pues encontre algunos como en la fotito encontre este bello en una plantisha♥

MARRON: Aqui el code de tu CBOX♥

Dejare las cajitas al final de la entradiis

BLOGSKINS O LAYOUTS<--- aadsakkasd como se escriba

Nos vamos a :

Plantilla y luego.. escojemos el lugar donde queramos pegar el code .. y bueno haces lo mismo que arriba ^^

Ahora...HORA DE ..LAS CAJIITAS!!

Base:

<-- la base xD

Ustedes la pueden :

•Cambiar el color

•Aumentarle textos

•Aumentar gifs?

•Aumentar imagenes

•LO QUE DESEEN!!!

Con tal de que les quede como ustedes prefieran ^^

Medidas de la caja : 250 x 250

Espero que os alla gustado este TuToRiAl ♥ No Olviden dejarme su dulce huellita

Créditos por el código

PD: Firma hecha por Kumy Clic aqui para ir a su blog~