Menu #6 tipo cartelito

ohaiio sekai, espero esten bien y sino espero este tuto los alegre, es para poner un menu como si fuera un cartelito. Aqui una previa:

Esto consta de dos partes

1.-La primera es la cabecera que la que le da la forma de que es un cartelito

2.-El codigo del menu

Para la cabecera es muy facil, ya que solo ocupan su imaginacion, yo hice esta:

Es la misma que use en la previa pero si se dan cuenta no tiene la secciones del menu :)

Para que a ustedes no se les complique mucho les dejare un psd, que es de la que yo hice, asi ustedes la editan a su gusto y la dejan mucho mejor :P

  Psd para que te lo descargues

Una vez que tengan su cabecera pues la colocan, ahora viene lo dificil los codigos, primero van a su plantilla> editar html y buscan </body> ahora el siguiente codigo lo pegan ARRIBA

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>

<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>

<script>

    (function($){

        $(document).ready(function(){

            $(&quot;[title]&quot;).style_my_tooltips();

        });

    })(jQuery);

</script>

Una vez pegado busca el siguiente codigo ]]></b:skin> y ANTES de este pega el siguiente

#s-m-t-tooltip {

background: #e5e5e5;

box-shadow: inset 0 0 30px #95d92b, 0 0 30px #95d92b;

color: #ffffff;

font-family: calibri;

font-size: 10px;

letter-spacing: 1px;

border: 3px double #fff;

border-radius: 10px;

text-transform: uppercase;

line-height: 11px;

text-align: center;

display: block;

padding: 10px 15px 10px 15px;

margin: 20px 10px 0px 10px;

z-index: 999;

Pra finalizar vamos a diseño> añadir un gadget html javascript.

Ahora copia y pega el siguiente codigo

<style>@font-face {font-family: Kalinga "codes"; src: url('http://static.tumblr.com/jecwjgj/VL1mzno56/code.ttf');}

.mencode {

font-family: Kalinga "codes";

font-size: 15px;;

color: #Fe53162;

text-shadow: 1px 1px 1px #613642;

text-transform: uppercase;

display: inline-block;

margin-right: 20px;

-webkit-transition: all 0.3s ease;

}

.mencode:hover {

color: #9c8d91;

text-shadow: 1px 1px 1px #613642;

-webkit-transition: all 0.3s ease;

}

</style><div style="position: absolute; margin-top: -150px; left: 200px;">

<a href="URL DE LA PAGINA"><div class="mencode"><img src="url del icon" />Nombre</div></a>

<a href="URL DE LA PAGINA"><div class="mencode"><img src="url del icon" />Nombre</div></a>

<a href="URL DE LA PAGINA"><div class="mencode"><img src="url del icon" />Nombre</div></a>

<a href="URL DE LA PAGINA"><div class="mencode"><img src="url del icon" />Nombre</div></a>

</div>

font-size: 15px, aqui es para el tamaño de la letra del menu

#Fe53162 el color de la letra del menu

#613642 el color de la sombra de la letra

#9c8d91 el color de la letra al pasar el cursor

#613642 el color de la sombra al pasar el cursor

-150px si aumentas el numero se ira mas ariba y si disminuyes el numero se ira mas abajo el menu

200px Si aumentas se ira mas a la derecha y si disminuyes se ira mas a la izquierda 

URL DE LA PAGINA pones la url de tu seccion

Donde dice <img src="url del icon" /> lo que esta entre comillas (lo azul)es la url de los iconos que puse (los moñitos), si no les gustan pueden cambiarlos pegando ahi la url o bien pueden borrarlo

Nombre aqui escriben el nombre de su seccion

Para aumentar mas secciones solo pegan despues de </a> losiguiente :

<a href="URL DE LA PAGINA"><div class="mencode"><img src="Nombre" />Nombre</div></a>

Lo siento fueron muchos codigos lo se, lo se, espero les guste tratare de ya no hacer con tanto codigo es medio ahghrhufhruewiw andar poniendo tanto, ahora solo les dejo el link del psd para que se lo descarguen y editen, una cosita mas si comparten este menu, darme creditos porque es mio vale?? bueno bye bye