Menú Square

Hola a todos, este es otro pedido. Se trata del menú que tengo yo en la cabecera. Me lo pidió Mia, y aqui se lo traigo. Hay diferentes tipos, pero haremos este (es el menu de color verde... aunque es el único menu que hay xD)

Antes de </body> ponemos:

<style>.MENUsquare { /* BORDE TOP */font-family: arial;font-size: 11px;text-transform: uppercase;padding: 10px;position: fixed;left: 0px;top: 0px;width: 100%;overflow: hidden;text-align: center;border-top: 0px solid #81F7BE;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}.MENUsquare:hover { /* BORDE TOP HOVER */border-top: 0px solid #81F7BE;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}.MENUsquare a { /* LINKS */background: #81F7BE;color: #fff;text-decoration: none;    padding: 50px; text-shadow: 0px -100px 1px #FFF;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;} .MENUsquare a:hover { /* LINKS HOVER */background: #BBE7D9;color: #fff;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}</style><div class='MENUsquare'>  <a href='http://nombredetublog.blogspot.com'>Home</a><a href='URL'>AFiliación</a><a href='URL'>Tutoriales</a><a href='URL'>Recursos</a><a href='URL'>Concursos</a></div>

Para cambiar el fondo cambiamos los códigos de background, y el colore del link es el que pone #fff. 

Otro menu para blog

Hola, tengo un tutorial muy bueno  trata sobre un menu para blog muy simple, en realidad no es muy bueno... es, normal (? Okey, comencemos. Antes una preview:

HOME

TUTOS

CREDITOS

Como ven es muy simple, tambien pueden poner un texto

En un gadget ponemos:

<center>
<div style="background:url(url defondo);width:210px; border:2px solid #ccc;padding:5px;">
<a href="URL">HOME</a>
<img src="url del icono"/>
 <span id="goog_1755542995"></span>
<a href="URL">TUTORIALES</a>
<span id="goog_1755542996"></span>
<img src="url del icono"/>
<a href="URL">CREDITOS</a>
<img src="url del icono"/>
</center>

Créditos Annyz Kawaii

20 seguidores + Menú Cartel

Bueno, he estado liado está semana y ya es hora de algo nuevo. ¡Ya hemos llegado a los 20 seguidores! Muchas gracias a todos \(>.<)/ Estoy muy feliz pero... no se creerán que no lo celebraré ¿no? Este sábado actualizaré el blog y comenzaré con las clases de dibujo/diseño a demás de que puede que vaya a crear un concurso aunque nadie se presente, en fin, ahora el tutorial. VAMOS, Vamos, vamos

Se trata de el menú a la izquierda de este blog de pruebas (es el gadget navi)  Para ponerlo nos vamos a añadir un gadget y ponemos esto:

<style>
.raejun{
width:96px;
padding:2px;
margin-top:5px;
box-shadow:2px 2px 4px #DFDFDF;
background:#eee;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#FF8888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #FF8888;
}
.raejun:hover{
width:66px;
border-left:30px solid #FFBBBB;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;">
<div style="background:#FFBBBB;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">
Navi</div>
<img src="http://i13.piczo.com/view/s/w/n/p/r/6/r/d/3/8/9/img/i140470009_35076_7.gif" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
</div>

Y ya esta, donde pone link here va el link y donde pone link *numero* va el nombre del link.  Lo que está en azul es la foto del menú. Recuerden estar atentos al blog (*-*)

Menú de barras

Hola a todos  ¿Qué tal? [yo bien, gracias por preguntar xD] Bueno, me han pedido un tutorial que tenia ganas de subir. Se trata de como hacer el menú que tengo yo en las normas, lo llamo el menu  Comencemos GO GO GO.

Nos vamos a diseño y a....

                                        

<div class="TOZ2">

<a href="enlace">uno</a>

<a href="enlace">dos</a>

<a href="enlace">tres</a>

<a href="enlace">cuatro</a>

<a href="enlace">cinco</a>

</div>

<style>

.TOZ2 a{

width:130px; /* ANCHO DEL MENU */

font-family: arial; /* FUENTE DE LETRA */

font-size: 13px; /* TAMAÑO DE LETRA */

border-left:15px solid #ffe599; /* COLOR DEL BORDE IZQUIERDO */

border-right:15px solid #ffe599; /* COLOR DEL BORDE DERECHO */

background:#7fe1e1; /* COLOR DE FONDO */

margin:3px;

color:#fff; /* COLOR DE LETRA */

border-radius:10px 10px 10px 10px; /* EFECTO REDONDO */

text-align:center;

display:block;padding:3px;

text-shadow: none;

}

/* HOVER {AL PASAR EL CURSOR} */

.TOZ2 a:hover{

color:#ffe599; /* COLOR DE LETRA */

border-left:15px solid #7fe1e1; /* COLOR DEL BORDE IZQUIERDO */

border-right:15px solid #7fe1e1;/* COLOR DEL BORDE DERECHO */

text-decoration:none;

text-shadow: none;

}

</style>Menú Horizontal.

Creo que todo viene bien explicado en el código asi que bueno. Este tuto me lo pidió Celia-chan, y bueno los créditos a Mell.