Super Menu

Perdón Porque no e escrito en mucho tiempo es que estoy full de Tarea en la escuela pero eso no me impide estar con ustedes ,este menu es super lindo xD no sabia que ponerle asi que decidi llamarle SUPER debido al efecto, es como muy WOW XD para el efecto tienes que usar un pattern, luego del tutorial pondre muchas de diferentes colores ^^

SI LO USAS DA CRÉDITOS!!!

PREVIEW....

HOLA

Si te gusta & lo kieres sigue los siguientes pasos...
Plantillas blogger: Pega el siguiente código justo arriba de ]]></b:skin>

Plantillas clásicas/blogskins: Pega el siguiente código justo arriba de </style>

.super {
margin-left: -2px;
margin-right: -2px;
overflow: hidden;
display: block;
height: 19px;
text-align: left;
background: url('URLDELPATTERN') no-repeat;padding-left: 10px;
padding-top: 5px;
margin-bottom: 2px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.super:hover {
background-position: -0px -132px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
margin-left: 80px;
-webkit-border-radius: 15px 0px 0px 15px;
-moz-border-radius: 15px 0px 0px 15px;
border-radius: 15px 0px 0px 15px;
}
.super .title {
color:#999;
font-size: 17px;
font-weight:none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.super:hover .title{
color: #fff;
letter-spacing: 2px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
text-shadow: 1px 1px 0px #fff;
}

Rojo: Reemplazas por la url del pattern que elegiste.
Aqui estan los patterns! (para conseguir la url, clic derecho sobre la imagen que quieras y "copiar url de imagen")

Yo use la segunda pattern para el ejemplo :3 CLIC EN LA PATTERN QUE QUIERAS PARA VERLA EN TAMAÑO ORIGINAL!

Terminas de editar, guardas los cambios ^^
Para usar el menu usa el siguiente codigo... 

<div class="super"><a href="ENLACE">CATEGORIA</a></div><div class="super"><a href="ENLACE">CATEGORIA</a></div><div class="super"><a href="ENLACE">CATEGORIA</a></div>

Cambias "ENLACE" por la url del link de cada bloque, & "CATEGORIA" por el texto de cada bloque. 
Para añadir mas bloques, o como se llamen xD agrega mas del siguiente código... 

<div class="super"><a href="ENLACE">CATEGORIA</a></div>

Guardas & ya esta! 

Menu Minimalist

Preview de esta lindurita *w* xDD

Tutoriales Recursos Affies Creditos Home 

Para tenerlo...

Plantillas blogger: Pega el siguiente código justo arriba de ]]></b:skin>

Plantillas clásicas/blogskins: Pega el siguiente código justo arriba de </style>

.minimalist {
width: auto;
height: 15px;
background: #EAEAEA;padding-top: 5px;
padding-bottom: 5px;
color: #FFFFFF;margin-right: 1px;
padding-left: 5px;
padding-right: 5px;
text-shadow: 1px 1px 1px #CACACA;-ms-box-shadow:1px 1px 1px #ff00bf;-o-box-shadow:1px 1px 1px #ff00bf;-webkit-box-shadow:1px 1px 1px #ff00bf;-moz-box-shadow:1px 1px 1px #ff00bf;font-family: verdana;
font-size: 10px;
text-transform: uppercase
-webkit-filter: none;
-webkit-transition:all 1s ease
}
.minimalist:hover {
width: auto;
height: 15px;
background: #EAEAEA;padding-top: 5px;
padding-bottom: 5px;
border-left: 8px solid #ff00bf;color: #FFFFFF;margin-right: 1px;
padding-left: 10px;
padding-right: 5px;
text-shadow: 1px 1px 1px #CACACA;-ms-box-shadow:1px 1px 1px #ff00bf;-o-box-shadow:1px 1px 1px #ff00bf;-webkit-box-shadow:1px 1px 1px #ff00bf;-moz-box-shadow:1px 1px 1px #ff00bf;font-family: verdana;
font-size: 10px;
text-transform: uppercase
-webkit-filter: blur(3px);
-webkit-transition:all 1s ease;
}

Rojo: Color del fondo 
Naranja: Color del texto 
Amarillo: Sombra del texto 
Verde: Sombra del menú 
Celeste: Color del fondo hover 
Azul: Color del borde izquierdo hover 
Lila: Color del texto hover 
Fucsia: Color de la sombra del texto hover 
Marron: Color de la sombra del menú hover 

Terminas de modificar Guardas & pegas el siguiente código en un gadget html/javascript, o si tenes plantilla clasica/blogskin pegalo en alguna parte del codigo de alguna página de tu blog o del sidebar :3

<a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> <a class="minimalist" href="ENLACE">CATEGORIA</a> 

Terminas de reemplazar lo indicado, guardas & listo!!! :D 

Efecto de Explosión de Arcoiris al Hacer Click

Un regalito Por mi Cumpleaños se que les va a encantarHermoso efecto muy recomendado *0* aqui un preview en
 imagen hecha por mi xD:

para tener el hermoso efecto pega el siguiente código en cualquier lugar del código html de tu blog ENTRE <head> Y </head>

<script type="text/javascript">

// <![CDATA[

var sparks=75; // how many sparks per clicksplosion

var speed=33; // how fast - smaller is faster

var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)

var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c'); 

//                     blue    red     green   purple  cyan    orange  pink

/****************************

*   Clicksplosion Effect    *

* (c) 2012 mf2fm web-design *

*  http://www.mf2fm.com/rv  *

* DON'T EDIT BELOW THIS BOX *

****************************/

var intensity=new Array();

var Xpos=new Array();

var Ypos=new Array();

var dX=new Array();

var dY=new Array();

var stars=new Array();

var decay=new Array();

var timers=new Array();

var swide=800;

var shigh=600;

var sleft=sdown=0;

var count=0;

function addLoadEvent(funky) {

  var oldonload=window.onload;

  if (typeof(oldonload)!='function') window.onload=funky;

  else window.onload=function() {

    if (oldonload) oldonload();

    funky();

  }

}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {

  var i, j;

  window.onscroll=set_scroll;

  window.onresize=set_width;

  document.onclick=eksplode;

  set_width();

  set_scroll();

  for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {

    stars[j]=createDiv('*', 13);

    document.body.appendChild(stars[j]);

  }

}}

function createDiv(char, size) {

  var div, sty;

  div=document.createElement('div');

  sty=div.style;

  sty.font=size+'px monospace';

  sty.position='absolute';

  sty.backgroundColor='transparent';

  sty.visibility='hidden';

  sty.zIndex='101';

  div.appendChild(document.createTextNode(char));

  return (div);

}

function bang(N) {

  var i, Z, A=0;

  for (i=sparks*N; i<sparks*(N+1); i++) { 

    if (decay[i]) {

      Z=stars[i].style;

      Xpos[i]+=dX[i];

      Ypos[i]+=(dY[i]+=1.25/intensity[N]);

      if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;

  else {

        Z.left=Xpos[i]+'px';

        Z.top=Ypos[i]+'px';

  }

      if (decay[i]==15) Z.fontSize='7px';

      else if (decay[i]==7) Z.fontSize='2px';

      else if (decay[i]==1) Z.visibility='hidden';

  decay[i]--;

}

else A++;

  }

  if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);

}

function eksplode(e) { 

  var x, y, i, M, Z, N;

  set_scroll();

  y=(e)?e.pageY:event.y+sdown;

  x=(e)?e.pageX:event.x+sleft;

  N=++count%bangs;

  M=Math.floor(Math.random()*3*colours.length);

  intensity[N]=5+Math.random()*4;

  for (i=N*sparks; i<(N+1)*sparks; i++) {

    Xpos[i]=x;

    Ypos[i]=y-5;

    dY[i]=(Math.random()-0.5)*intensity[N];

    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;

    decay[i]=16+Math.floor(Math.random()*16);

    Z=stars[i].style;

    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];

    else if (M<2*colours.length) Z.color=colours[count%colours.length];

    else Z.color=colours[i%colours.length];

    Z.fontSize='13px';

    Z.visibility='visible';

  }

  clearTimeout(timers[N]);

  bang(N);

} 

function set_width() {

  var sw_min=999999;

  var sh_min=999999;

  if (document.documentElement && document.documentElement.clientWidth) {

    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;

    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;

  }

  if (typeof(self.innerWidth)=='number' && self.innerWidth) {

    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;

    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;

  }

  if (document.body.clientWidth) {

    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;

    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;

  }

  if (sw_min==999999 || sh_min==999999) {

    sw_min=800;

    sh_min=600;

  }

  swide=sw_min-7;

  shigh=sh_min-7;

}

function set_scroll() {

  if (typeof(self.pageYOffset)=='number') {

    sdown=self.pageYOffset;

    sleft=self.pageXOffset;

  }

  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {

    sdown=document.body.scrollTop;

    sleft=document.body.scrollLeft;

  }

  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

    sleft=document.documentElement.scrollLeft;

    sdown=document.documentElement.scrollTop;

  }

  else {

    sdown=0;

    sleft=0;

  }

}

// ]]>

</script>

Guardas los cambios y ya esta! :D si lo tomas da créditos ^^