Lunany-kawaii: 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>