jueves, 12 de julio de 2012

Tutorial 5 Menus Para Tu Blog

ñam ñamm chicas les traigo un tuto variado de menus xD estos estan un poco curiositos pero lindos haha para que tengan varias opciones al momento de poner un menu para sus blog okis?

Sigue bien las indicaciones:


PRIMER MENU

Ahora nos vamos con el primer menu y su codigo:



1.- ve a diseño >> Edicion de html y con ctrl+ mas la tecla F busca el siguiente codigo:

/* Content
----------------------------------------------- */


2.- Copia el codigo de navegacion del menu y lo pegas abajo del codigo anterior osea /* Content

#naviday {
font-size: 10px;
letter-spacing: 1px;
line-height: 150%;
text-align:left;
color: #aaa;
padding-left:18px;
text-decoration: none;
border-bottom: 1pt solid #A9E2F3;
color: #CEECF5;
background:#ffffff;
display: block;text-transform: ;
}
#naviday:hover {
letter-spacing: 2px;
background: #F6CEF5;
color: #aaa;
}

3.- Guarda tu plantilla y ahora ve de nuevo a Diseno >> Elementos de pagina y Añadir un gadget html

4.- Copia este codigo y pegalo en el gadget

<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">TITULO DE TU ENTRADA</a>


**Agrega este codigo cuantas veces necesites ponerlo.

SEGUNDO MENU



1.- ve a diseño >> Edicion de html y con ctrl+ mas la tecla F busca el siguiente codigo:

/* Content
----------------------------------------------- */


2.- Copia el codigo de navegacion del menu y lo pegas abajo del codigo anterior

#naviday {
display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #000;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#naviday:hover {
border-left:3px solid #ffffff;
color: #000000;
background: #BDBDBD;
-moz-border-radius: 0px 0px 70px 70px;
-webkit-border-radius: 0px 0px 70px 70px;
border-radius: 0px 0px 70px 70px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}


3.- Guarda tu plantilla y ahora ve de nuevo a Diseno >> Elementos de pagina y Añadir un gadget html

4.- Copia este codigo y pegalo en el gadget

<a id="naviday" href="DIRECCION DE TU ENTRADA" title="TITLE">TITULO DE TU ENTRADA</a>


**Agrega este codigo cuantas veces necesites ponerlo.

TERCER MENU



1.- ve a:

Edicion >> Elementos de pagina>> Anadir gadget html

2.- Copia este codigo y pegalo en el gadget

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:250;
text align:center;
list-style-type: none;
font: normal 13px Century gothic;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-align:center;
text-decoration: none;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #CDF0FF; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: white;}
.sidebarmenu ul li a:hover{
background-color: #FDCDFF;}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="LINK DE TU ENTRADA">♥HOME♥</a></li>
<li><a href="LINK DE TU ENTRADA">Acerca de mi ♥</a></li>
<li><a href="LINK DE TU ENTRADA">♥Tutorial♥</a></li>
<li><a href="LINK DE TU ENTRADA"> ♥Chat♥</a></li>
</ul>
</div&gt
;

morado: color del primer fondo
Rosa: color del segundo fondo
azul: Url o direcion de tu entrada

CUARTO MENU

Este es un mini menu algo pequeno pero queda bonito xD


ve a:

Edicion >> Elementos de pagina>> Anadir gadget html


2.- Copia este codigo y pegalo en el gadget

<center><div style="background:url(URL DE TU BACKGROUND);width:210px;border:2px solid #ccc;padding:5px;"><a href="URL DE TU BLOG">hOME</a> <img src="http://www.drikoti.net/Dri/CuteChibbi/bolinha-rosa.gif"/> <span id="goog_1755542995"></span><a href="URL DE TU ENTRADA">TUTURIAL</a> <span id="goog_1755542996"></span><img src="http://www.drikoti.net/Dri/CuteChibbi/bolinha-rosa.gif"/> <a href="URL DE TU ENTRADA">CREDITOS</a> <img src="http://www.drikoti.net/Dri/CuteChibbi/bolinha-rosa.gif"/></center>


Rosa: Url o direccion de tu fondo
Azul: Lo grueso del borde, el tipo de borde y el color del borde
Naranja: Direcciones de tus entradas
Lila: El titulo de tu entrada
verde: Direccion de tu gif.

QUINTO MENU



Ve a diseno >> Edicion de html >> editar plantilla

y busca ]]></b:skin>

cuando lo encuentres pega este codigo justo arriba del codigo anterior

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none;}
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px;margin:1px; }
#list8 ul li a { display:block; width:80px; height:28px; background-color:#000000; border-right:10px solid #FFFFFF; padding-left:40px;
text-decoration:none; color:#FFFFFF; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }


Ahora busca este codigo </body>

y pega este codigo antes de </body>

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='list8'>
<ul>
<li><a href='URL DE TU BLOG'>Home</a></li>
<li><a href='URL DE TU ENTRADA'>Tutorial</a></li>
<li><a href='URL DE TU ENTRADA'>creditos</a></li>
<li><a href='URL DE TU ENTRADA'>afiliados</a></li>
</ul>
</div>
</div>


Azul: Color del fondo del recuadro
LIla: Color del borde
rosa: color del texto
Rojo: color de la sobra al rotar

Por ultimo da vista previa y guarda ^^



34 comentarios:

  1. Gua¡¡¡ muy lindos¡¡yo que estaba buscando menu me viene de perlas^^
    Muchas grasias ne¡¡eres la mejor

    ResponderEliminar
    Respuestas
    1. de nada me da gusto que te hayan gustado.

      Eliminar
  2. Estos no se pueden poner aun lado como el que tienes tu?

    ResponderEliminar
    Respuestas
    1. mmm nop estos van dentro de la sidebar a excepcion de al ultimo que queda al costado no como el mio pero similar ^^

      sii quieres aqui te pongo el link

      http://annyz-kawaii.blogspot.mx/2012/04/poner-un-menu-al-lado-como-el-mio.html

      y tambien te pongo otro qu queda muy bonito

      http://annyz-kawaii.blogspot.mx/2012/01/menu-lateral-flotante.html

      saludos

      Eliminar
  3. Qué bonitos están ♥
    Me encantaron & todos los estilos de tu blog son tan cute *--*

    ResponderEliminar
  4. Woow º0º que hermosos Annyz!! cada vez que entro a tu blogs siempre me doy sopresas!! Ame estos menús son hermosisimos!! n.n

    ResponderEliminar
    Respuestas
    1. omg tariixx
      que bien que hayas vuelto nena =D
      hacias falta eh ¬¬
      me da un gusto enorme volver a verte
      y contar contigo nuevamente.. besitos
      y que tengas buen fin de semana ^^

      Eliminar
  5. oh! el ultimo es el mejor XD para mi ewe X3

    ResponderEliminar
  6. gracias, creo que va a quedar perfecto para mi nuevo blog

    ResponderEliminar
  7. *O* aaaaaaaaaawwww estan todos mega geniales!!!
    me encanta tu blog, paso metida en el (robandote cosas) XD
    gracias a ti mi blog esta como quiero
    mil gracias por poner cosas tan bellas.

    ResponderEliminar
  8. Hola soy nueva! las cosas que explicas las entiendo nomas quiero saber como es la mano xD acá. Quisiera saber como se manejan antes de que yo meta la pata xDDD

    ResponderEliminar
    Respuestas
    1. amm bueno es para poner en orden las cositas que pondras en tu blog, por ejemplo como el mio arribita al lado dice tutoriales al darle clic ahi te iras a donde estan todos los tutoriales que he hecho.. no se si me explico bien o.o

      Eliminar
  9. Que lindos!! me gustaron mucho el 3° y el 4° voy a ver si me los intento juju ^^
    Besos!!

    ResponderEliminar
    Respuestas
    1. oka fer seguro te quedara muy bonito el menu ^^

      Eliminar
  10. Hola Annyz saludos desde Venezuela
    Me encanta tu blog practique muchos de tus tutoriales
    en mi blog espero que un dia lo visites
    no se de tutoriales ni nada de eso,te admiro tienes una creatividad increible
    saludos

    ResponderEliminar
  11. yo quisiera que un día contaras como aprendiste a hacer códigos y eso *^*, y algo nuevo podría ser vídeos que te gusten y eso XD como lo dijeron en el primer comentario.

    ResponderEliminar
  12. D: creo que me equivoque de pagina lol XD

    ResponderEliminar
  13. amei esse tuto...
    vou fazer um destes menus no meu...
    Mas antes eu queria saber como eu faço download do meu templante ?
    Sabe,dai mas tarde se eu quiser usar ele eu tenho o download dele...

    ResponderEliminar
  14. Gracias por los hermosos menus, puse uno en mi blog, quedo hermoso...
    Saluditos ;)

    ResponderEliminar
  15. NO SABES LO MUCHO QUE HE BUSCADO ESTO!!!! WOW REALMENTE NO SABES LO MUCHO QUE TE AGRADEZCO!! GRACIAS, ENCERIO,!

    ResponderEliminar
    Respuestas
    1. me da gusto que te hayan gustado y sobre todo que te hayan sido de utilidad.. saludos

      Eliminar
  16. OYE SABES QUE HABIA PUESTO OTROS DE OTRAS PAGINAS Y NINGUNA ME SALIA PERO LA TUYA SI .TE QUIERO DAR LAS GRACIAS POR LA AYUDA QUE ME HAZ BRINDADO PARA MI BLOG.GRACIAS

    ResponderEliminar
  17. Te ADORO!!!!!!!!!!! ADORO ESTA ENTRADA!!!!ADORO ESTE BLOG!!!!>3<

    ResponderEliminar
  18. Respuestas
    1. menu that you liked? so it would be easier to help .. sorry my English is not very good: (

      Eliminar
  19. Encantadores...usare el ultimo!!besos...chiao~su

    ResponderEliminar
  20. que lindoo!! ^-^...me encanta tu blog tiene de todo :P
    me preguntaba si me podrías ayudar para saber como hacer un tipo de menu como esfera y que al mismo tiempo la palabras se muevan, algo asi como el este blog http://mianaly.blogspot.com/ que tiene un menu arriba a la derecha ^-^....
    Gracias hermosa...amo tu pagina!! xD

    ResponderEliminar
  21. en el cuarto menu como le pongo la imagen ensima al menu

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.