{Tutorial} Navegation-box ♥

|| ||
MmMmMm Rico *----* xD
Holi :3 aquí en cali colombia esta haciendo un frio heladoooo :0 me estoy congelando las piernas xD ¿En su país también esta haciendo frio? pos si díganme de que país son xD



estos fríos me hacen dar más ganas de ir al bañote :( no sé por que xD pero dah un cafesito con leche caliente cura XD

hoy les traigo un tutorial de un menú muy cool, casi toda las plantillas blogskin lo tienen pero esta vez es diferente así:

¿Te gusta y lo quieres? haz lo siguiente

Ve a Diseño Añadir un gadget Html/javascript

Y pega el siguiente código.

<style>
a.mid{
background:#A2C898;
width:55px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #A2C898;
cursor:pointer;
}
a.mid:hover{
background:#FFffff;
border:1px solid #A2C898;
color:#A2C898;
}
 </style>
<div style="width:250px;">

<center><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >Tab 1</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >Tab 2</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >Tab 4</a>
</center>
<div id="wnsb" style="margin-top:5px;width:230px; padding:10px; border:1px dashed #ddd;">
Navigate around. Replace this with anything/your own words.</div>
<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here.
</div>
<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>
<div id="3" style="display: none;">
This navigation no.3
</div>
<div id="4" style="display: none;">
This navigation no.4
</div>
</div>


¿quieres editar y ver si hay errores o no?
Pues ve a esta Página pega el código ahí y edita al final ya editado lo ponéis en tu blog :)

Créditos: http://wanaseoby.blogspot.com/
Hay deos ese blog si que me salva de tutoriales y recursos xd, la próxima usó una plantilla de ella :D

¡Besotes! No olvides seguirme en facebook


7 comentarios:

  1. wana es muy buena chica{he hablado con ella xD}jejje gracias por el tutorial!!
    es super util^^
    saludos~

    ResponderEliminar
  2. que buen tutorial , yo soy de Perú y aquí hace un calor horrible , la verdad quisiera que fuera invierno , porque el calor aquí es insoportable , tu blog es hermoso , un abrazo de panda :3 saludos

    ResponderEliminar
    Respuestas
    1. Yo también! Sip hace un montón de calor.Buen tutoria.

      Besos ;)

      Eliminar
  3. Es genial el tuto ^^ Por cierto, el diseño es hermoso!!!!!! Saludos ^^

    ResponderEliminar
  4. a todos salva ese blog xD
    aca donde vivo comenzo hacer frio solo en las mañanas pero ya a la tarde hace calor >.<
    besos

    ResponderEliminar
  5. yo también me estoy congelado D": soy de España xD
    gracias por el tuto!!! n.n está genial *^*
    saluditos! ^^

    ResponderEliminar
  6. Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta... Me encanta...

    Justito lo que estaba buscando, lo aplicaré ahora mismo ;3

    P.s. Excelente alternativa del visor de HTML, Dreamweaver consume demasiados recursos del sistema.

    ResponderEliminar

Tu comentario me haría muy feliz!! :D