90 seguidores ♥ ¡¡+Tutorial:Menu Rollo ♥



Hola como estan ¡¡? el dia miercoles hiba a colocar otro tutorial antes de irme pero no saben lo que paso¡ estube preparando la entrada y derepente se apaga mi computadora ¡ waaa¡¡ la volvi a prender y normal estaba entrando y de nuevo se apago solito ,y a cada rato taba intentando y se apagaba  waaa¡,ayer tube un poco de tiempo libre y la computadora no prendia de nuevo ¡ wawa ¡y hoy me arte la computadora y lo golpe varias veces asta lo patie  jijiji,y intente prenderlo por ultima vez y normal ¡¡asta aorita no se apaga wii ¡¡ creo que necesitaba un golpe esque mi compu ta ya muy viejito 

Bueno ya son 90 seguidores que sigen mi blog ¡ hayy toy serca de los 100 ,me alegra mucho ¡ y gracias a las personas que siempre se pasan por mi blog y comentan , y losiento si no ago lo mismo pues he estado muy ocupada,pero esta vez intentare ir a sus blogs mas seguido  .cuando llegemos alos 100 seguidores tengo pensado hacer un concurso pero aun lo estoy pensando de que se va a tratar   haa y mi hermana (Yuri) ya esta apunto de terminar la pre ,el domingo da su examen para entrar a la U y se preguntaran yo que hago? jaja yo ya di mi examen en una universidad y entre ,pero no toy segura si quiero ir a esa Universidad ,pero mi hermana estara en otra Universidad quiere estar en la misma universidad donde esta su  pareja,bueno a la siguiente semana capas ella entre a compartir cosas nuevamente 
Bueno mucho escribi jaja aora vamos con el tutorial de que se trata? es un menu que se vera con unas imagenes redondas y al pasar el cursor sale el titulo de las paginas que quieras ,por eso se llama rollo por que se enrolla.Aver si no me entendieron clic en :

Vista Previa

Si les gusto sigan los siguientes pasos:
1.Ir a plantilla/Edicion HTML
presionan Ctrl+F y ponen <head>
Al encontrarlo colocan el siguiente codigo atras de <head>
<link href='http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow' rel='stylesheet' type='text/css'/>

Aora segundo paso buscan ]]></b:skin> con Ctrl+F y al encontrarlo ponen el siguiente codigo antes de ]]></b:skin>

.menroll {
     background: #FAD0D7;
     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: #FFB0BE;
     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: 17px;
     font-family: Jacques Francois Shadow;
     z-index: 50;
     margin-top: 5px;
     margin-bottom: -31px;
     -webkit-transition-duration: .90s;
     opacity:0;
     -moz-opacity: 0;
     filter: alpha(opacity=0);
     text-shadow:0px 0px 5px #000000;}
.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);}
Para personalisarlo los colores :
 #FAD0D7:color del fondo de las imagenes
#FFB0BE:color del fondo del titulo de la pagina
180:puedes cambiar es el ancho de cuando sale el titulo de la pagina
#FCFBFE:color de la letra
#FC839B color de la letra al pasar el cursor
Tercer paso ponga guardar y baya a diseño ,añadir un gadget ,HTML/Javascript
ponga este codigo

<a href='URL DE LA PAGINA'>
  <div class="menroll">
    <div class="tituroll">NOMBRE DE LA PAGINA</div>
    <img src="URL DE LA IMAGEN" class="rollimag" />
  </div>
</a>
<a href='URL DE LA PAGINA'>
  <div class="menroll">
    <div class="tituroll">NOMBRE DE LA PAGINA</div>
    <img src="URL DE LA IMAGEN" class="rollimag" />
  </div>
</a>
<a href='URL DE LA PAGINA'>
  <div class="menroll">
    <div class="tituroll">NOMBRE DE LA PAGINA</div>
    <img src="URL DE LA IMAGEN" class="rollimag" />
  </div>
</a>
Y eso es todo cambian las palabras de colores por los que les indican ¡

3 comentarios :

  1. felicidades por tus 90 seguidores!!
    y gracias por ese menu!!

    ResponderEliminar
  2. Oww! esto me servirá mucho! :D gracias por compartir :3
    me encanta tu blog es tan cute :)
    nos comentamos~

    ResponderEliminar
  3. Me gustaría ver qué tal es...Intento ver la Vista Previa y me sale permiso denegado T_T

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥