3 ago. 2014

Tutorial: Menú giratorio en circle + nominaciones♥

Hi! He estado unos días sin publicar porque he estado haciendo cositas y no me ha quedado tiempo para hacer una buena entrada, pero desde el móvil vi los comentarios y los avisos que me pusisteis, gracias *^* Me han nominado dos chicas en los días que no estuve pero por supuesto lo lei todo y aquí dejo las respuestas a sus preguntas♥ 
En los días que no publiqué estuve trabajando un menú que dejaré el tutorial después de responder las preguntas. Les dejaré el menú abajo para que también puedan visualizarlo~
Premio Best Blog
Nominación de: Alu
Preguntas:
♠ ¿Has hecho algo de lo que te gustaría volver el tiempo atrás y cambiarlo?
Mmm..pues ahora no se me viene nada a la cabeza, pero supongo que algunas cosas personales y eso.
♠ ¿Morirías por alguien especial? 
Arriesgar mi vida sí, pero dar la vida de esa manera me parece de cobarde.
♠ ¿Algún objeto que te haga feliz? 
Mi alpaca de peluche, es más mona♥
♠ ¿Antes de dormir que es lo ultimo en lo que piensas? 
Según, en lo que voy a hacer al día siguiente, o en mis cosas, a veces me pongo a jugar a la 3DS o con el móvil xD No sé, según el humor que tenga
♠ ¿Que es lo que te hace feliz?
Mis personas queridas, amigos, novio, familia y mi perra~ Y material, pues todo lo que tengo. :3



Muchas gracias a las dos por nominarme





Premio Liebster Award
Nominación de: Kyaru ♥ 
Preguntas:
♠ ¿Cómo nace tu blog?
 De mi imaginación, no sé. xD
♠ ¿Quién me inspira?
Sinceramente, pues nadie. Yo misma.
♠ ¿Música/Banda favorita? 
Pf no sé.. ;-; Hay muchas bandas que me gustan. Y mis tipos de música favorita es el Metal, J-Pop, Rock, K-Pop, Post-Hardcore, etc, etc.
♠ ¿Un amor platónico? 
No tengo.
♠ Eres escritora o lectora 
Lectora.
♠ Sueño más loco o extraño 
JAJAJA ninguno de mis sueños son normales, pero ni uno, yo no sé que pasa por mi mente mientras duermo en serio xDD
♠ Personaje literario favorito 
Ninguno.
♠¿Te gusta el anime?¿Anime favorito?
Me encanta. Ya estamos con favoritismos, pero por qué :c Tengo muchos, algún día haré una lista de todos los animes que me he visto.
♠Tres palabras que mejor te describan
Simpática, torpe y creativa.
♠ ¿Solitaria o popular? 
Esta pregunta no le veo el sentido pero bueno, no soy ni lo uno ni lo otro. Lógicamente tengo mis días de querer estar sola, pero la mayoría prefiero estar con personas. Pero no soy popular ._.
♠ ¿Tu clima favorito? 
Que haya fresquito y no haya nada de viento.








































Ahora pondré el tutorial de un menú que hice yo en forma de circulo que pasas el cursor y se gira el centro y muestra el menú que estaba escondido. Dudo que me hayan entendido así que pondré uno de prueba para que puedan ver como es:
Pasa el cursor por arriba :3
¿Te gustó? Pues ahora explico como usarlo, es bastante fácil
[Nota: en la entrada se ve el menú así, pero en mi blog de pruebas lo puse en gadget y se ve así, hagan click aquí para ver como se vería en gadget]
Primero:
Ve a Plantilla > Editar HTML > Le das a Ctrl+F para buscar y buscas ]]></b:skin>
Y arriba pegas este código, que sería los efectos del círculo:

.ch-item {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 100%;
    position: relative;
    width: 100%;
}
.ch-info-wrap {
    background: transparent url() repeat scroll 0 0 ;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
    height: 180px;
    left: 20px;
    perspective: 800px;
    position: absolute;
    top: 20px;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info {
    border-radius: 50% 50% 50% 50%;
    height: 180px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info > div {
    backface-visibility: hidden;
    background-position: center center;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.ch-info .ch-info-back {
    background: none repeat scroll 0 0 #000000;
    transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
    background-image: url("Url de tu imagen");

}
.ch-info h3 {
    color: #FFFFFF;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 8px;
    height: 5px;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 40px 0 0;
    text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;

}
.ch-info p {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
    margin: 0 30px;
    padding: 10px 5px;
}
.ch-info p a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
    text-transform: uppercase;
}
.ch-info p a:hover {
    color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
    transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
    display: block;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.ch-grid:after, .ch-item:before {
    content: "";
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    display: inline-block;
    height: 220px;
    margin: 20px;
    width: 220px;
}

A ver, todo lo podéis modificar. Yo he puesto exactamente el código del menú que puse de prueba, si lo ponéis os saldrá igual su diseño. Si miráis por todo el código veis que podéis modificar el tamaño de los textos, los colores, el ancho y la altura, etc. Aconsejo que lo que no he marcado con colores lo dejéis tal y como está porque al cambiar los números puede que les salga desproporcionado y se vea feo. Lo que podéis modificar para poner a vuestro gusto y todo eso es lo que marqué con colores, que ahora explico bien:
Azul:
Donde pone #00000 es el color del fondo del menú. Yo lo puse negro, pero podéis poner el color que queráis, por supuesto.
Trozo rojo:
Eso está claro. Donde puse ''Url de tu imagen'' pones la url de la imagen que quieras que se vea. Yo puse una imagen de cualquier tamaño, pero si quieres que se vea un circulo con la imagen perfecta y no así has una imagen de 220x220.
Trozo verde:
Todo eso es el título ''Navegation''. Lo primero que sale es el color, que yo lo puse en blanco para que destacara por el fondo negro, lo de abajo es la fuente de la letra y lo de abajo el tamaño de la palabra.
NOTA: Aconsejo que no cambiéis el tamaño de la palabra porque si lo pones más pequeño que 8px casi ni se podrá leer, y si lo pones más grande el menú bajará y puede quedar feo. Yo ya lo edite para que quedará todo bien puesto.

Bueno, eso es lo principal, podéis examinar un poco el código y mirar que podéis cambiar, pero como dije antes, aconsejo que no lo toquéis porque lo podéis estropear.

Ahora, ponerlo en un gadget.
Diseño > Añadir gadget > HTML/Javasript
Y ahora pegas el código del menú:
<ul class="ch-grid">
<li>
    <div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
<h3 style="text-align: left;">
NAVEGATION</h3>
<div style="text-align: left;">
<a href="Url de tu página/entrada">Nombre</a></div>
<div style="text-align: left;">
<a href="Url de tu página/entrada">Nombre</a></div>
<div style="text-align: left;">
<a href="Url de tu página/entrada">Nombre</a></div>
<div style="text-align: left;">
<a href="Url de tu página/entrada">Nombre</a>
                </div>
</div>
</div>
</div>
</div>
</li>
</ul>
Y ya está :3 Eso está bastante clarito no hace falta que diga nada, ¿no? xD Bueno, espero que les guste y si lo usan les quede bien. Pueden ponerlo en distintos sitios, a mi gusto se ve ''elegante''.~
Recuerden dar créditos si lo publican, onegai.

4 comentarios:

  1. Muchas gracias por este tutorial,esta super hermoso,adore el efecto^^
    saludos

    ResponderEliminar
  2. Está chulísimo, quizás lo use para el próximo diseño nwn
    Byekawaii!!

    ResponderEliminar
  3. Un tutorial muuy interesante, a ver si va con mi próxima plantilla XD
    Saludos y felicidades por los premios!

    ResponderEliminar
  4. gracias por el apoyo ;0;)/ eres genial

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•