Menú con superposición de capa y jQuery

Imagen original de Codrops 

Un menú puede ser tan práctico y versátil como uno quiera que sea o tan llamativo y elegante como nos propongamos. Un menú puede ser el punto fuerte de un blog o tan triste e insignificante que nadie repare en él.

 No hay consejo que valga a la hora de escoger un menú, como ocurre con el diseño siempre digo que eso es a gusto del propio autor.

Si se trata de hacer un menú para otra persona es bueno tener en cuenta el uso que se va a dar a ese menú o la cantidad de enlaces que va a necesitar porque si son muchos quizás sea mejor un menú desplegable. Si el blog es comercial entonces nos podemos permitir un menú dinámico con grandes imágenes y efectos atractivos.

 A la hora de escoger un menú el abanico de posibilidades es muy amplio y por suerte tenemos a mano grandes sitios con tutoriales, mi favorito es Codrops y suyo es el original menú del ejemplo. 

Trabaja con jQuery y tiene la particularidad que al pasar el ratón sobre las pestañas la pantalla se oscurece creando el efecto típico de las ventanas modales. Al mismo tiempo que la ventana se oscurece se despliega un submenú mostrando contenido extra. 

El ancho de este menú es de 560px una medida que se adapta a casi cualquier espacio del blog, si deseamos añadir más pestañas puede hacerse y también personalizar el menú respecto a colores.

¿Seguimos? Para añadir este menú en nuestro blog podemos hacerlo de la siguiente forma: Buscamos ]]></b:skin> y justo antes añadimos los estilos:

.oe_overlay { /* estilos de la ventana */
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* ubicación y ancho del menú */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 560px;
}
ul.oe_menu > li {  /* cada pestaña */
    float: left;
    height: 101px;
    padding-bottom: 2px;
    position: relative;
    width: 112px;
}
ul.oe_menu > li > a { /* color pestañas visibles */
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #000000;
    width: 90px;
    background: #138C95;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* color pestañas seleccionada  */
    background: none repeat scroll 0 0 #0B585E;
    color: #000;
    opacity: 1;
}
.oe_wrapper ul.hovered > li > a { /* color pestaña en hover */
    background: none repeat scroll 0 0 #2ED8E9;
    text-shadow: 0 0 1px #ccc;
    color: #000;
}
ul.oe_menu div { /* bloque oculto */
    background: none repeat scroll 0 0 #2ED8E9;
    display: none;
    height: 180px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 498px;
}
ul.oe_menu div ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFF;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {  /* borde del bloque ocultor */
    border-bottom: 1px solid #000;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ccc;
}

Estos estilos son los que tiene mi ejemplo, si preferimos los estilos del autor podemos descargarlos de su página.

A continuación lo que haremos será añadir jQuery justo antes de </head> si ya estamos utilizando la librería entonces omitimos este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Seguimos, y copiamos el contenido de este archivo y lo pegamos a continuación de la librería jQury, es decir antes de </head>

Guardamos los cambios y con la plantilla en Diseño añadimos un gadget de HTML, en su interior pegaremos lo siguiente:

<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href="">Collections</a>
     <div>
      <ul>
       <li class="oe_heading">Summer 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Special Events</a></li>
       <li><a href="#">Runway Show</a></li>
       <li><a href="#">Overview</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Winter 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Behind the scenes</a></li>
       <li><a href="#">Interview</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Download</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Categories</li>
       <li><a href="#">Casual</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Underwear</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Swimwear</a></li>
       <li><a href="#">Evening</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Projects</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Fashion Shows</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Evening specials</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Media</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Images</a></li>
       <li><a href="#">Contest 2011</a></li>
       <li><a href="#">Fashion Mania</a></li>
       <li><a href="#">Green Earth Day</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Fragrances</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">Fashion Fragrances</li>
       <li><a href="#">Deálure</a></li>
       <li><a href="#">Violet Woman</a></li>
       <li><a href="#">Deep Blue for Men</a></li>
       <li><a href="#">New York, New York</a></li>
       <li><a href="#">Illusion</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Events</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Shows 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Shows 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Special Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Fashion Countdown Party 2010</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Stores</a>
     <div style="left:-447px;">
      <ul>
       <li class="oe_heading">Europe</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Asia</li>
       <li><a href="#">Hong Kong</a></li>
       <li><a href="#">Tokio</a></li>
       <li><a href="#">New Delhi</a></li>
       <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
       <li class="oe_heading">United States</li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Los Angeles</a></li>
       <li><a href="#">Seattle</a></li>
       <li><a href="#">Miami</a></li>
      </ul>
     </div>
    </li>
   </ul>
  </div>

Ahí debemos tener en cuenta que cada almohadilla # debemos sustituirla por en sitio a enlazar y cada texto-enlace debe ser sustituido por el texto a mostrar. 

Este efecto que veremos a continuación no es nada nuevo, sin embargo es un efecto que me gusta porque resulta vistoso y nada cansino ya que se añade a imágenes muy puntuales como por ejemplo la publicidad tal el ejemplo de Tutorialzine
 

Para ponerlo en práctica necesitamos jQuery. Si ya estamos utilizando la librería no tendremos que añadirla, si por el contrario no la usamos añadiremos justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

A continuación añadimos el siguiente script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

 // Lowering the opacity of all slide in divs
 $('.banner div').css('opacity',0.4);

 // Using the hover method
 $('.banner').hover(function(){

  // Executed on mouseenter
  
  var el = $(this);
  
  // Find all the divs inside the banner div,
  // and animate them with the new size
  
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });

 },function(){

  // Executed on moseleave

  var el = $(this);
  
  // Hiding the text
  el.find('p').stop(true,true).hide();
  
  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');

 }).click(function(){
  
  // When clicked, open a tab with the address of the hyperlink
  
  window.open($(this).find('a').attr('href'));
  
 });
});
//]]>
</script>

Los estilos los añadimos como de costumbre justo antes de ]]></b:skin> y veremos que se ha marcado el lugar para poder personalizar a gusto de cada uno respecto a colores:

.bannerHolder {
   background: none repeat scroll 0 0 #ccc; /* color - fondo - bloque */
   border: 1px solid #EEEEEE; /* color de borde del bloque */
   border-radius: 12px 12px 12px 12px;
   float: left;
   height: 310px; /* altura - bloque */
   margin: 20px ;
   padding: 10px 25px;
   width: 270px; /* anchura - bloque */
}
.bannerHolder li {
   display: inline;
   list-style: none outside none;
}
.banner {
   float: left;
   height: 125px;
   margin: 5px;
   overflow: hidden;
   position: relative;
   width: 125px;
   padding:  5px;
}
.banner img {
   border: medium none;
   display: block;
}
.banner div {
   background-color: #000; /* color - efecto */
   border-radius: 100px 100px 100px 100px;
   cursor: pointer;
   height: 60px;
   position: absolute;
   width: 60px;
   z-index: 100;
}
.banner .cornerTL {
   left: -63px;
   top: -63px;
}
.banner .cornerTR {
   right: -63px;
   top: -63px;
}
.banner .cornerBL {
   bottom: -63px;
   left: -63px;
}
.banner .cornerBR {
   bottom: -63px;
   right: -63px;
}
.banner p {
   color: white; /* color del texto */
   text-shadow: 1px 1px 1px #505050; /* sombra - texto */
   cursor: pointer;
   display: none;
   font-family: Tahoma,Arial,Helvetica,sans-serif; /* fuente - texto */
   font-size: 11px; /* tamaño del texto */
   left: 0;
   position: absolute;
   text-align: center;
   top: 57px;
   width: 100%;
   z-index: 200;
}

Añadimos el html justo en el lugar que deseamos mostrar las imágenes con el efecto.

Tenemos un bloque contenedor que es "bannerHolder" y dentro de ese bloque tenemos las imágenes.

<ul class="bannerHolder">

Imágenes

</ul>

Si queremos añadir este mismo ejemplo sin el bloque de fondo simplemente no añadimos bannerHolder ni su respectiva etiqueta de cierre.

<ul class="bannerHolder">
       <li>
  <div class="banner">
  <a href="url-enlace">
 <img src="url-imagen" alt="imagen" width="125" height="125" /></a>

  <p class="companyInfo">Ejemplo-1</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div></li><li>

</ul>

En "Ejemplo-1" es el lugar para añadir un pequeño texto tipo título.

El anterior código es suficiente para una imagen, si deseamos añadir más imágenes añadiremos ese mismo código tantas veces como imágenes deseamos añadir teniendo en cuenta que en caso de añadir el bloque de bannerHolder siempre termina cerrándose con la etiqueta </ul> al final.

Visto en:Tutorialzine

Hay una entrada de Pizcos que trata como su título indica sobre un "Carrousel automático con las imágenes de las entradas de tu blog"

Los pasos a seguir son muy sencillos y el resultado es muy vistoso solo hay que ubicar cada código proporcionado en el sitio correspondiente y queda a gusto de cada uno personalizar las imágenes.

Por costumbre modifico la plantilla de arriba hacia abajo, así que lo primero que encuentro son los estilos y es lo que vamos a añadir justo antes de ]]></b:skin>

#carrousel ul{
margin:30px 10px;
padding:10px;
width:550px !important; /* ancho del carrousel */
height:100px !important; /* alto del carrousel */
overflow:hidden; /
}
#carrousel li{
margin:10px;
list-style:none;
position:relative;
float:left;
}
#carrousel img{
width: 80px !important; /* ancho de la imagen */
height: 80px !important;
border: 1px solid #ECA475; /* color del borde */
background: #BB2B17; /* color de fondo */
padding:5px; /* espacio entre la imagen y el borde */
cursor: pointer;
display: inline-block;
position: relative;
-moz-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-webkit-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
-o-transition: opacity .3s linear;  /* efecto opacidad de la imagen */
transition: opacity .3s linear;  /* efecto opacidad de la imagen */
}
#carrousel img:hover {
background-color: #0FF; /* color de fondo al pasar el cursor */
opacity: .5;
filter:alpha(opacity=50);
}

(Es importante que el ancho del carrousel no sea mayor que el espacio disponible en nuestro blog)
Si queremos prescindir del efecto producido por la opacidad omitimos los estilos marcados en color rojo. El resto de estilos que podemos modificar ya tiene indicado a que parte corresponde.

A continuación y si no estamos usando jQuery con anterioridad añadimos la librería justo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Justo después añadimos directamente a la plantilla el plugin y un pequeño script que podemos copiar desde el siguiente archivo de texto. De esa forma evitamos alojamientos externos y los consiguientes problemas que ocasionan.

Guardamos los cambios y nos dirigimos a Diseño para editar un nuevo gadget de HTML, en su interior añadimos el contenido de este archivo de texto.

Encontraremos al final de ese archivo AQUÍ-URL-DEL-BLOG es necesario sustituir esa parte por la url de nuestro blog.

Y eso es todo ver ejemplo en el footer de este blog

Esto que vemos es un ejemplo de menú que podemos ver en la última entrada de Codrops el demo de la autora podemos verlo aquí un fantástico trabajo donde se combinan distintas fuentes de Google Font API

Para no complicarnos la vida lo que hice fue utilizar el menú superior omitiendo el resto de fuentes de la demo.

1 En plantilla edición de HTML y antes de ]]></b:skin> añadimos los estilos:

.sl_menu{
 margin:20px 0px 0px 20px; /* ubicamos arriba/derecha/abajo/izquierda */
 list-style:none;
}
.sl_menu li,
.sl_examples{
 float:left;
 font-family: 'Aclonica', serif; /* tipo de fuente, opcional de Google */
 font-size:30px; /* tamaño de fuente */
 line-height:50px;
 color:#333; /* color de barras separadoras */
 margin-right:5px;
 text-transform:uppercase;
}
.sl_menu a,
.sl_examples a{
 display:block;
 position:relative;
 float:left;
 clear:both;
 color:#fff;
}
.sl_menu a > span,
.sl_examples a > span{
 height:50px;
 float:left;
 position:relative;
 overflow:hidden;
}
.sl_menu a span span,
.sl_examples a span span{
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 text-align:center;
}
.sl_menu a span span.sl-w1,
.sl_examples a span span.sl-w1{
 color:#333; /* color de fuente tal y como se muestra */
 text-shadow:0px 0px 1px #fff; /* sombra de texto tal y como se muestra */
 z-index:2;
}
.sl_menu a span span.sl-w2{
 color:#ff516f; /* color de fuente al pasar el cursor */
 text-shadow:0px 1px 2px #99162c; /* sombra de texto al pasar el cursor */
 z-index:3;
}
.sl_examples{
 padding-top:50px;
 margin:20px;
 clear:both;
 display:block;
}
.sl_examples a{
 margin:15px;
}

2 Nos situamos ahora justo después de ]]></b:skin> para añadir jQuery.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya usamos jQuery en nuestro blog no es necesario añadirlo de nuevo y omitimos el paso 2.

3 A continuación pegamos el contenido de este archivo.

4 Por último guardamos los cambios y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<ul id="sl_menu" class="sl_menu">
<li><a href="#">Home</a>/</li>

<li><a href="#">Perfil</a>/</li>

<li><a href="#">Contact</a></li>

</ul>

La almohadilla será sustituida por la url que deseamos enlazar.
El texto de Home, Perfil y Contact lo sustituimos por el nuestro, será el texto que se visualiza y hace de enlace.

En los estilos está marcado el lugar donde podemos cambiar el color de los enlaces y la sombra de texto, así como el tamaño, la ubicación y el tipo de fuente.

Lo prometido es deuda así que aquí va la forma de crear el slide con sombra que mostraba en la entrada anterior sobre diseños Bokeh.

Antes de comenzar debo aclarar que es conveniente alojar las imágenes en nuestro propio servidor y sustituir la url por la nuestra para evitar que en un futuro nuestro slide no muestre las imágenes por fallos de servidor.

Los scripts no tendremos problema ya que los añadiremos en la misma plantilla.

Nos situamos en plantilla edición de HTML y justo después de ]]></b:skin> añadimos los estilos que es el lugar donde más tarde podemos sustituir la url de las imágenes.

<style>
#preview_wrap {
   margin-left-20px;
   padding: 22px;
   width: 520px; 
   height: 400px;
   background: url(http://img50.xooimage.com/files/7/3/c/bg_preview-254fc87.gif) top left no-repeat;
  }

  #preview_outer {
   overflow: hidden;
   width: 520px;
   height: 400px;
   position: relative;
  }

  #preview_inner {
   text-align: left;
   height: 100%;
   position: relative;
  }
  
  #preview_inner div {
   float: left;
   width: 550px;
   height: 400px;
   position: relative;
  }
  
  #preview_inner div a {
   position: absolute;
   bottom: 0;
   left: 0; 
   display: block;
   width: 470px;
   text-indent: 20px;
   padding: 20px 0;
   color: #fff;
   text-shadow: 5px 5px 5px #000000;
   background: url(http://img49.xooimage.com/files/9/4/1/bg_trans-1ac2f94.png);
   text-decoration: none;
   font-size: 18px;
  }

  #thumbs {
   padding-top: 30px;
   position: relative;
   width: 520px;
   text-align: center; 
  }

  #thumbs span {
   padding: 12px;
   width: 80px;
   height: 80px;
   cursor: pointer;
   background: url(http://img27.xooimage.com/files/8/1/7/bg_thumb-1ac2fa9.gif) top left no-repeat;
   display: inline-block;
  }

  #arrow {
   position: absolute;
   top: -13px;
   background: url(http://img29.xooimage.com/files/7/1/e/bg_arrow-1ac2fc5.gif) top center no-repeat;
   width: 104px;
   height: 39px;
   display: none;
  }  
</style>

Justo después añadimos jQuery, si lo hubiéramos añadido con anterioridad omitimos ese paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

A continuación añadimos el contenido de este archivo.

Y por último añadimos el HTML en un gadget de HTML/Javascript

<div id="preview_wrap">
<div id="preview_outer">
<div id="preview_inner">
<div><img src="imagen01.jpg" alt="" />
<a href="#">Texto 1</a></div>

<div><img src="imagen02.jpg" alt="" />
<a href="#">Texto 2</a></div>

<div><img src="imagen03.jpg" alt="" />
<a href="#">Texto 3</a></div>

<div><img src="imagen4.jp" alt="" />
<a href="#">Texto 4</a></div>

</div>
</div>
</div>

<div id="thumbs"><div id="arrow"></div>

<span><img src="miniatura01.jpg" alt="" /></span>
<span><img src="miniatura02.jpg" alt="" /></span>
<span><img src="miniatura03.jpg" alt="" /></span>
<span><img src="miniatura04.jpg" alt="" /></span>
</div>

Las imágenes grandes (imagen01,02,03,04) miden 475x430 y las miniaturas (miniatura01, 02, 03, 04) 80x80.

El tamaño del slide no se puede modificar a no ser que se crearan unas nuevas imágenes con sombra, eso nos llevaría también a crear las imágenes en miniatura y para la demo en el tamaño acorde con las imágenes del slide.

Aunque ya estamos llegando casi al final de la Navidad y quien más quien menos tiene decorado su blog no puedo dejar pasar esta oportunidad de mostrar la idea de Blogger Plugins añadir unas campanitas en cada extremo del blog y un efecto muy sutil de nieve.

Las dos cosas las podemos añadir con un simple click si accedemos a su blog y marcamos sobre el widget que él mismo ha preparado gracias a jQuery.

Si lo preferimos también podemos añadirlo accediendo a nuestro blog y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadiremos lo siguiente:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X1tbvo8it1t_nWeIEnD0-imDhW_whdFOie4IAae5Ij9mGWOasrhb_mvFg_bMMZgTfVV03YgiPUQtaa1Xq15IsjCC_dAYld3FYRt7fkZ2sHWdE6NFOrhlyUzilDIX82DZ_ze6/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijf5cAIuhUeIbTOtGRli7vNImQEkXoM2Oz-iYM7bw4S8KwDZlrFmTRuHwtjJvbMoOROyIkvwSRpP0wV6pviPodQAvTyuBynVP41l65VvFUhSBUUvz0wzrJQQg_pPU75lgcnoyt/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script> 

La url de las imágenes marcadas en negrita las podemos sustituir por cualquier otra.

En Codrops cada actualización es un reto, uno se pierde entre tanta maravilla y cuesta decidirse por algo concreto, son efectos muy llamativos y en algunos casos pueden llegar a eclipsar el contenido. Si de lo que se trata es precisamente de eso, de atraer la vista a un sitio concreto o impresionar entonces seguro encontraremos lo ideal.

Y lo ideal en este caso es un slide, o mejor dicho un gran slide. Impresionante ¿verdad? pues está todo muy bien explicado pero aún así vamos a intentar simplificar las cosas.

Para añadir este slide hay que tener en cuenta dos cosas, la primera es el tamaño y eso quiere decir que nuestro blog no debe tener en outer-wrapper menos de 902px de ancho (width) si mide más no hay problema.

El otro punto a tener en cuenta son las imágenes, el ejemplo contiene imágenes de Tucia son imágenes que visualmente parecen divididas en dos pero se puede añadir cualquier otra imagen siempre que tenga el mismo tamaño de las utilizadas.

Antes de comenzar es bueno saber que se utilizan cinco tamaños distintos de imágenes. En este archivo encontraremos las imágenes que se utilizaron y podemos tomar nota de los tamaños para crear nuestras propias imágenes.

El slide está compuesto de 5 áreas de distinto tamaño y cada área contiene 3 imágenes distintas y las 3 del mismo tamaño. A simple vista muestra 5 imágenes cuando en realidad llega a mostrar hasta 15.

Una vez tenemos nuestras imágenes preparadas nos situamos en plantilla edición de html y añadimos justo antes de </head> los estilos del slide

<style type='text/css'>
.hs_container{
 position:relative;
 width:902px;
 height:471px;
 overflow:hidden;
 clear:both;
 border:2px solid #fff;
 cursor:pointer;
 -moz-box-shadow:1px 1px 3px #222;
 -webkit-box-shadow:1px 1px 3px #222;
 box-shadow:1px 1px 3px #222;
}

.hs_container .hs_area{
 position:absolute;
 overflow:hidden;
}

.hs_area img{
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

.hs_area img.hs_visible{
 display:block;
 z-index:9999;
}

.hs_area1{
 border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
 border-top:2px solid #fff;
}
.hs_area4{
 border-right:2px solid #fff;
}
.hs_area3{
 border-top:2px solid #fff;
}
.hs_area1{
 width:449px;
 height:334px;
 top:0px;
 left:0px;
}
.hs_area2{
 width:451px;
 height:165px;
 top:0px;
 left:451px;
}
.hs_area3{
 width:451px;
 height:167px;
 top:165px;
 left:451px;
}
.hs_area4{
 width:192px;
 height:135px;
 top:334px;
 left:0px;
}
.hs_area5{
 width:708px;
 height:135px;
 top:334px;
 left:194px;
}

</style>

A continuación pegamos jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Si ya estamos utilizando jQuery omitimos ese paso y añadimos jquery.easing.1.3.js lo descargamos y subimos a nuestro servidor para añadirlo a continuación de este modo:

<script src='url-de-tu-archivo-jquery.easing.1.3.js' type='text/javascript'/>

O si lo preferimos copiamos el contenido del script y lo añadimos de esta forma:

<script type='text/javascript'>

//<![CDATA[

Aquí añadimos el contenido de jquery.easing.1.3.js

//]]>

</script>

Para terminar con los scripts copiamos el contenido de este otro archivo y lo pegamos a continuación del anterior tal y como se presenta.

Por último lo más entretenido añadir las imágenes.

Para saber donde incluir cada imagen nos fijaremos que las áreas van numeradas del 1 al 5 y las imágenes indican la posición y el área a la que pertenecen. Este sería un ejemplo de  area1.

<div class="hs_area hs_area1">

<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>

<img src="Url-imagen/area1/2.jpg" alt=""/>

<img src="Url-imagen/area1/3.jpg" alt=""/>

</div>

Comenzamos con las imágenes, en un gadget de HTML añadimos lo siguiente:

<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area2">
<img class="hs_visible" src="Url-imagen/area2/1.jpg" alt=""/>
<img src="Url-imagen/area2/2.jpg" alt=""/>
<img src="Url-imagen/area2/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area3">
<img class="hs_visible" src="Url-imagen/area3/1.jpg" alt=""/>
<img src="Url-imagen/area3/2.jpg" alt=""/>
<img src="Url-imagen/area3/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area4">
<img sclass="hs_visible" src="Url-imagen/area4/1.jpg" alt=""/>
<img src="Url-imagen/area4/2.jpg" alt=""/>
<img src="Url-imagen/area4/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area5">
<img class="hs_visible" src="Url-imagen/area5/1.jpg" alt=""/>
<img src="Url-imagen/area5/2.jpg" alt=""/>
<img src="Url-imagen/area5/3.jpg" alt=""/>
</div>
</div>

En un principio parece complicado pero de tantos slider que he probado es uno de los más sencillos, y como siempre podemos ver el resultado de todo lo anterior.

En Andrew Valums´blog he visto un efecto creado con jQuery. El resultado es un menú vertical de imágenes con efecto deslizante. Una discreta información de carga se muestra en la parte superior así como la posibilidad de mostrar un tooltip con transparencia sobre la imagen.

El resultado de todo eso nos lo muestra el autor en el siguiente ejemplo.

Lo que hice fue modificar un poco el ancho, pensando que una sidebar suele medir aproximadamente 220px y lo adapté para unas imágenes de 215 x 100

En plantilla edición de HTML añadimos justo antes de ]]></b:skin>

<style type='text/css'>
div.sc_menu_wrapper {
position: relative;
height: 400px; /* height es la altura debe ser mayor que la altura de una imagen para formar el scrollbar. */
width: 220px; /* width es la anchura que no debe ser superior a la sidebar */
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 215px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>

En los estilos he añadido lo que podemos cambiar.
Los colores deben ser en rgb.
Sustituimos "Url-enlace" por la url de nuestro enlace y "Url-imagen" por la de nuestras imágenes.

Ahora justo antes de </head> añadimos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>;

Si ya estamos usando jQuery en la plantilla omitimos el paso anterior.
Copiamos el contenido de este archivo de texto y lo pegamos antes de antes de </head>
Y por último nos queda el HTML, editamos un gadget de HTML y en su interior añadimos:

<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
</div></div>

Completamos el código anterior añadiendo en title="Título" el texto que se mostrará en el tooltip.
En Url-imagen añadimos la url de cada imagen.
Con Url-enlace lo sustituimos por la url del enlace que vamos a añadir.

Cuando accedemos a una página lo que más llama la atención son los sliders o presentación de imágenes, cuando las transiciones son automáticas pueden llegar a cansar e incluso restar atención al contenido que en realidad es lo importante.

El que veremos hoy es a petición de EcuaLink se trata de un slider que contiene la plantilla Elios adaptada por Web2Feel y que podemos descargar en BTemplates

Para añadir el slider nos situamos justo antes de </head> y pegamos el contenido de este archivo Si ya estamos usando jQuery eliminamos la siguiente línea de lo que añadimos anteriormente.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Guardamos los cambios y en plantilla de diseño editamos un gadget de HTML justo después de la cabecera. En su interior añadimos lo siguiente:

<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div>

En Url-imagen añadimos la url de nuestra imagen de 750 x 256

En Texto-contenido es el espacio para incluir el texto que se muestra con fondo transparente. Igualmente haremos con Título- contenido.

Si deseamos suprimir la sombra del borde nos ubicamos en los estilos "slidearea" y eliminamos lo marcado en negrita, también podemos añadir otros tipos de borde.

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}

Los que utilizan jQuery en su blog pueden dar un aspecto diferente a los enlaces con Nudging.js el efecto es un sutil movimiento al pasar el puntero sobre el enlace.

Para añadirlo nos situamos en plantilla edición HTML y justo antes de </head> añadimos lo siguiente:

<script type='text/javascript'>

// <![CDATA[

$(document).ready(function() {

$('a.nudge').hover(function() { //mouse in

$(this).animate({ paddingLeft: '45px' }, 400);

}, function() { //mouse out

$(this).animate({ paddingLeft: '1px' }, 400);

});

});

//]]>

</script>

Si no estamos utilizando jQuery y es la primera vez que vamos a utilizarlo entonces también añadiremos justo antes del anterior:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios y queda crear los enlaces, si los añadimos en un gadget escogeremos HTML/Javascript



Url-enlace añadimos la url del sitio que vamos a enlazar.
Texto-enlace es el texto que visualizamos y hará de enlace.
Url-imagen añadiremos la url dela imagen a mostrar.
Url-icono-bullets es el lugar para añadir la url del icono o bullet.

Este bonito menú trabaja con jQuery y es creación de Codrops está adaptado a menor tamaño que el original para poder mostrarlo en esta entrada pero las explicaciones nos darán como resultado un menú de 800px de ancho y 300px de alto que son las medidas de las imágenes.

Ver demo original del autor en Codrops

Los estilos los añadiremos situándonos en plantilla edición de HTML justo después de la etiqueta ]]></b:skin>

<style type='text/css'>
.rotator{
background-color:#111;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:&#39;Myriad Pro&#39;,Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:52px;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
line-height:52px;
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
</style>

En el mismo sitio y a continuación añadiremos el contenido del siguiente archivo

Si ya estamos utilizando jQuery para algún otro efecto omitimos el siguiente paso, de utilizarlo por primera vez añadiremos también lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Cada presentación contiene un bloque y es la parte que debemos modificar, que serán el título de la pestaña del menú, el título del contenido, la descripción, la url de la imagen y el enlace con el texto "Sigue..." es algo así:

<li><a href="rot4">Título-pestaña-1</a><div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción1
<a href="#" class="more">Sigue...</a></div>
</div>
</li>

Y el código completo para el menú que añadiremos en un gadget de HTML sería el siguiente:

<div class="rotator">
<ul id="rotmenu">
<li><a href="rot1">Título pestaña-1</a>
<div style="display:none;">
<div class="info_image">url-imagen-1</div>
<div class="info_heading">
Texto-contenido-1</div>
<div class="info_description">
Aquí texto descripción 1
<a href="#" class="more">Sigue...</a>
</div>
</div>
</li>
<li><a href="rot2">Título-pestaña-2</a><div style="display:none;">
<div class="info_image">url-imagen-2</div>
<div class="info_heading">
Texto-contenido-2</div>
<div class="info_description">
Aquí texto descripción 2
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot3">Título-pestaña-3</a><div style="display:none;">
<div class="info_image">url-imagen-3</div>
<div class="info_heading">
Texto-contenido-3</div>
<div class="info_description">
Aquí texto descripción 3
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot4">Título-pestaña-4</a><div style="display:none;">
<div class="info_image">url-imagen-4</div>
<div class="info_heading">
Texto-contenido-4</div>
<div class="info_description">
Aquí texto descripción 4
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
<li><a href="rot5">Título-pestaña-5</a><div style="display:none;">
<div class="info_image">url-imagen-5</div>
<div class="info_heading">
Título-contenido-5</div>
<div class="info_description">
Aquí texto descripción 5
<a href="#" class="more">Sigue...</a></div>
</div>
</li>
</ul>
<div id="rot1">
<img src="url-imagen-1" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1>
</h1>
</div>
<div class="description">
<p>
</p>
</div>
</div>
</div>

❋ Título pestaña-1, 2, 3, 4, 5 escribimos el título del contenido.

❋ url-imagen-1, 2, 3, 4, 5 pegamos la url de la imagen tal y como la copiamos sin añadir la etiqueta de     imagen.

❋ Texto-contenido-1, 2, 3, 4, 5 Escribimos la descripción que se mostrará después del título.
❋ Sigue... lo podemos sustituir por cualquier otro texto.
❋ Hay una parte que dice:

<a href="#" class="more">Sigue...</a>

esa parte la podemos utilizar como enlace, si por ejemplo deseamos enlazar una entrada o una página estática copiamos la url que deseamos enlazar y la pegamos sustituyendo la almohadilla. De esa forma al marcar sobre "Leer más... nos llevará al sitio que enlazamos.

Este efecto tan curioso que vamos a ver es de Dynamicdrive y seguramente ya lo vimos con anterioridad en algunas páginas de wallpapers, lo que conseguimos es mostrar una imagen pequeña y al pasar el puntero del ratón visualizar los detalles de dicha imagen con efecto zoom con la posibilidad de acercar más la imagen con la rueda del ratón.

Se consigue gracias a jQuery y si estamos utilizando otra librería no es problema porque podemos conseguir mostrar el ejemplo en un iframe, es decir, añadir el script y los estilos en otro blog y mostrarlos allí donde deseamos. Ver explicaciones en Vagabundia sobre Blogger ultra super minimizado

Ahora si que es el momento de poner manos a la obra porque aunque a simple vista de la sensación de ser algo complicado en realidad no lo es si entendemos su funcionamiento.

Para empezar conseguimos dos imágenes iguales, una de gran tamaño para el efecto zoom que nos permitirá ver los detalles de la imagen y otra de menor tamaño que será la que se mostrará nada más cargar la página.

Una vez tenemos las dos imágenes nos situamos en plantilla edición de HTML, allí localizamos </head> y justo antes añadimos lo siguiente:

(Si ya estamos utilizando jQuery omitimos este paso porque quiere decir que ya tenemos jquery.min.js añadido )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Justo después añadimos el contenido de este archivo.
Guardamos los cambios para no perderlos y nos familiarizamos con lo que añadimos:

Allí podemos ver en primer lugar los estilos de la imagen del zoom y a continuación el script más extenso. Al principio del primer script veremos la siguientes líneas:

jQuery.noConflict()

var featuredimagezoomer={
loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UUqQnSh8QKtptdiQshsJvKdQRmww6OXyVVHJyU4JDLmXNfCNsIrLlSGZ6Ull7q8czktFNpPeNAQQSjClmmEZwkZlnrYtOPn9ecHX3oI1Mnyjd2PArIDgrChOGmHjykOz17JdyA/s0/spinningred.gif', //full path or URL to "loading" gif

Lo marcado en color rojo es la imagen de carga que podemos cambiar por otra simplemente sustituyendo la url de la imagen.

El siguiente script es el sitio para añadir la url de la imagen grande y también especificar el tamaño que se mostrará en el zoom.

$('#image1').addimagezoom({

zoomrange: [3, 10],

magnifiersize: [300,300],

magnifierpos: 'right',

largeimage: 'url-imagen-1' //<-- No comma after last option!

}

Donde url-image-1 añadimos la primera imagen grande.

El primer valor es para la anchura de la imagen que nos mostrará el zoom, el segundo valor será para la altura. 

Si mostramos el efecto en una entrada debemos tener en cuenta el ancho de la miniatura y el que especificamos para la imagen del zoom porque la suma de los dos anchos no debe ser superior a nuestras entradas de lo contrario nos creará problemas y no quedará demasiado bien estéticamente.

Para añadir el efecto más de una vez, procedemos de la misma forma que la anterior,  lo haremos a continuación donde dice #image2. Veremos que a continuación tenemos preparado para añadir una tercera imagen a falta de añadir las propiedades de imagen, si dudamos también podemos copiar el código anterior y cambiar de forma que sea #image3 ó #image4 y así sucesivamente.

$('#image3').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})

Terminamos con la plantilla guardando los cambios y nos dirigimos justo al sitio que deseamos mostrar el efecto. Si es un gadget editamos un gadget de HTML. En el interior del gadget o entrada añadimos lo siguiente:

<img border="0" height="160" id="image1" src="url-imagen-pequeña" width="200" />

Con width establecemos la anchura de la imagen pequeña y con height la altura, sin olvidar que deben ser iguales las dos imágenes, y a su vez coinciden con la misma  id.

Este menú tan vistoso y alegre lo encontré en CODROP como puede comprobarse en la entrada original no hay ninguna explicación excepto modificar los colores del menú que dicho sea de paso en la práctica esos cambios no se hacen visibles dónde están indicados.

Después darle unas vueltas conseguí añadirlo y hacerlo funcionar con algún que otro problema que fue solventado gracias a Vagabundia al que disimuladamente asalté y gentilmente se ofreció a modificar el script ya que no tenía otro remedio.

Una vez todo en orden comentamos sobre la cantidad de estilos que requiere este menú y el poco sentido que tienen esos mismos estilos cuando los colores se modifican en el script.

Nos dejamos de hablar y ponemos manos a la obra si queremos conseguir este menú, no sin antes armarse de un poco de paciencia para poder personalizarlo a nuestro gusto.

Comenzamos buscando ]]></b:skin> y justo después añadimos el contenido de este archivo.

Si estamos usando jQuery el siguiente paso lo vamos a omitir, de no estar usándolo añadimos a continuación:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios, y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<div style="position:relative;">
<ul class="menu">
<li><a href="url-página">Home</a></li>
<li><a href="url-página">Portafolio</a></li>
<li><a href="url-página">Trabajos</a></li>
<li><a href="url-página">Perfil</a></li>
<li><a href="url-página">Indice</a></li>
<li><a href="url-página">Contacto</a></li>
</ul>
</div>
<div style="clear:both;"></div>

❋En url-página añadimos la url del sitio que vamos a enlazar.
❋El texto que hará de enlace lo sustituimos por el nuestro.

Personalizamos el menú

Buscaremos en plantilla edición de HTML dónde añadimos el contenido del archivo y al final del todo veremos algo así:

<script type='text/javascript'>

$(document).ready(function() {

$(&#39;.menu&#39;).tagdrop({tagPaddingTop: &#39;60px&#39;,bgColor: &#39;#xxxxxx&#39;,bgMoverColor: &#39;#xxxxxx&#39;,textColor: &#39;#xxxxxx&#39;});

});

</script>

❋ bgColor: Color de fondo de la pestaña tal y como se muestra al actualizar la página.
❋ bgMoverColor: Color de fondo de la pestaña efecto hover.
❋ textColor: Color de texto efecto hover.
Como puede verse he señalado con xxxxxx el lugar donde debemos añadir el color.

Para el color de texto de la pestaña buscaremos:

.menu li a {

............

............

............

............

color: #FFF;

}

Este efecto tan llamativo es obra de Gaya Desing trabaja con jQuery y como puede verse consiste en un fondo con movimiento, ese fondo sólo es visible en la transparencia de una imagen. Para hacer más sencilla la explicación mejor será mostrarlo con capturas.

La imagen que vamos a añadir consiste en un texto, lo podemos crear con Photoshop o como en mi caso con GIMP. Hay distintas formas de conseguir un fondo transparente con GIMP.Y aquí una de ellas. Creamos la imagen y la guardamos como formato png.

550 x 150

Una vez tenemos la imagen con el mismo editor le añadimos transparencia al texto.
En herramientas marcamos sobre la varita para obtener selección difusa.

Seguidamente situamos el puntero sobre el texto y pulsamos botón derecho del ratón. Nos mostrará un desplegable, debemos escoger "colores" y a continuación "Color Alfa". Como resultado obtenemos la imagen con texto transparente que guardaremos en formato png.

Cuando tenemos la imagen es el momento de pasar a la plantilla.
Nos situamos justo antes de </head> y añadimos los estilos:

<style type='text/css'>.
content {
width: 500px; /* ancho del contenido */
margin: 0px auto;
}
.scrollbg {background-image: url(url-imagen-fondo); /* imagen de fondo */
background-color: #000; /* color de fondo */
width: 550px; /* ancho imagen de fondo */
height: 150px; /* alto imagen de fondo */
}
.scrollbg img {
display: block;
}
</style>

La imagen que he creado para el ejemplo mide 550 X 150.
La de fondo puede ser una textura y la añadimos en scrollbg/url-imagen-fondo, el ancho lo modificamos en width y la altura en height.
En width de content, que es el bloque que contiene la imagen y el fondo también debemos añadir la misma anchura de la imagen con transparencia.
A continuación añadimos jquery/1.4.1/jquery.min.js si ya lo estamos utilizando omitimos este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Ahora, copiamos el contenido del siguiente archivo y lo pegamos justo después.
Guardamos los cambios realizados y nos situamos en plantilla edición de HTML, allí editamos un nuevo gadget de HTML/Javascript y en su interior añadimos:

<div class='scrollbg' style='background-image: url(url-imagen-fondo)'>
<img src="url-imagen-texto-transparente" alt="" />
</div>

En url-imagen-fondo añadimos la misma url que anteriormente añadimos en los estilos.
En url-imagen-texto-transparente añadimos la url que creamos con fondo transparente.

Desde que mostré Not in el experimento de dhteumeuleu no había visto ningún slider o galería que llamara mi atención hasta llegar a una entrada de buildinternet que nos muestra el maravilloso Animate Panning.

Para añadirlo en el blog debemos tener en cuenta que está creado para un espacio que no debe ser inferior a width:960px de ancho, digo esto porque si deseamos añadirlo a un espacio menor la tarea se complica ya que debemos editar el script para ajustar las medidas.

Si nuestras medidas coinciden o simplemente deseamos probar el efecto la forma de añadirlo es la siguiente.

En la página del autor podemos descargar el archivo con los scripts necesarios que son cuatro. Una ves descargados los subimos a nuestro servidor y añadimos la url de nuestros scripts en la plantilla antes de </head> de la siguiente forma:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='url-jquery.easing.1.3.js'/>
<script src='url-jquery.timer.js'/>
<script src='url-image-rotator.js'/>

Luego añadimos los estilos antes de ]]></b:skin>

*{margin:0; padding:0;}
#window{
clear:both;
 width:960px;
 height:350px;
 background:#000;
 overflow:hidden;
 position:relative;
 margin:10px auto 10px auto;
 }

#slideshow{
width:1920px;
height:700px;
overflow:hidden;
position:relative;
}

#slideshow li{
width:960px; 
height:350px; 
float:left; 
display:inline;
}

#content {
background:url(url-imagen-bubble.jpg) no-repeat scroll left top #131310;
color:#FFFFFF;
font-family:georgia,serif;
margin:0 auto 10px;
overflow:hidden;
padding-top:20px;
width:960px;
}

Donde dice url-imagen-bubble.jpg añadimos la imagen que descargamos junto a los scripts. A continuación editamos un gadget de HTML y en su interior añadimos:

<div id="window">
<ul id="slideshow">
<li class="box1"><img src="imagen-1" alt="Imagen1"/></li>
<li class="box2"><img src="imagen-2" alt="Imagen2"/></li>
<li class="box3"><img src="imagen-3" alt="Imagen3"/></li>
<li class="box4"><img src="imagen-4" alt="Imagen4"/></li>
</ul>
</div>

En imagen-1, 2, 3, 4 añadimos la url de las imágenes, y el alt el nombre de la imagen. Si deseamos añadir más imágenes aumentaremos las líneas según las imágenes que vamos a añadir, sin olvidar que también debemos numerar en box según el orden que corresponda con la imagen.

En marcofolio.net he visto un efecto que me ha gustado, se trata de un slideshow con efecto tipo mosaico. Requiere el uso de la librería jQuery y un plugin llamado jFancyTile que permite transformar cualquier lista de imágenes en un bello efecto. Es recomendable que las imágenes tengan el mismo tamaño y no hay límite para añadir imágenes. El inconveniente es que con Firefox se ve perfecto pero no así con otros navegadores como por ejemplo Explorer. Si aún así deseas añadirlo al blog buscamos </head> y justo antes añadimos los estilos y los scripts.

<style type='text/css'>
#demo {margin:25px;}
#demo div.jfancytileContainer {
-moz-box-shadow:0 0 10px #222222;
border:5px solid #222222;}
#demo h3.jfancytileTitle {
color:#000000;
font:italic 18px Georgia,Times,Serif;
margin:10px 20px;
position:absolute;
text-shadow:0 2px 4px #222222;
z-index:999;}
#demo div.jfancytilenav {background-position:center center;
background-repeat:no-repeat;
cursor:pointer;position:absolute;
width:50px;z-index:99;}
#demo div.jfancytileForward {background-image:url(&quot;url-flecha-derecha&quot;);}
#demo div.jfancytileBack {background-image:url(&quot;url-flecha-izquierda&quot;);}
</style>

Las siguientes imágenes las descargamos a nuestro PC para posteriormente subirlas a nuestro álbum Picasa y añadirlas a los estilos donde dice url-flecha-izquierda y url-flecha-derecha

Si estamos utilizando jQuery probablemente tengamos añadida la librería de googleapis sería la siguiente y en ese caso no tendríamos que volver a añadirla.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

A continuación descargamos el zip que el autor proporciona, subimos los archivos del zip al sitio donde solemos alojar archivos y añadimos la url de de la siguiente forma:

<script src='url-archivo-jquery.jfancytile.js' type='text/javascript'/>
<script src='url-archivo-jquery.easing.1.3.js' type='text/javascript'/>
<script src='url-archivo-script.js'type='text/javascript'/>

Una vez guardados los cambios ya podemos añadir las imágenes en una entrada o gadget de HTML

<div id="demo"><ul><li><img alt="" src="url-imagen1" /></li><li><img alt="" src="url-imagen2" /></li><li><img alt="" src="url-imagen3" /></li></ul></div>

Añadir una vistosa galería no es complicado siempre y cuando no mezclemos librerías que ocasionen conflictos entre sí. La que vamos a ver está creada con jQuery y es una idea de SOHTANAKA

Aunque resulta muy atractiva también es cierto que necesita bastante espacio  así que opte por prescindir  de la imagen que se muestra a mayor tamaño, de esa forma la podemos añadir en cualquier parte del blog   dependiendo claro está del tamaño disponible. Para el ejemplo añadí nueve imágenes pero podemos aumentar la cantidad si así lo deseamos.

Los estilos y los scripts los añadimos justo después de ]]></b:skin>

<style type='text/css'>
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(url-imagen) no-repeat center center;
border: none;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
//]]>
</script>

Donde deseamos mostrar la galería añadimos las imágenes de la siguiente forma.

<ul class="thumb">
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
<li><a href="#"><img src="url-imagen" alt="" /></a></li>
</ul>

En url-imagen añadimos la url de cada imagen, para añadir más imágenes añadiremos la siguiente línea por cada imagen:

<li><a href="#"><img src="url-imagen" alt="" /></a></li>

Por último descargamos la siguiente imagen:

La subimos a nuestro álbum de Picasa y pegamos la url en los estilos donde dice:

ul.thumb li img.hover {

background:url(url-imagen) no-repeat center center;

Shadow Box

Sexy LightBox

Fancy Box

imgBox

Thick Box

Vistosas ventanas modales creadas con jQuery, en cada uno de los enlaces puede verse el efecto.

REFERENCIA:coder +