Slider de imágenes estilo ModernUI con JQuery para Blogger

Hace unosdíasme pidieron un ejemplo delSlider ModernUI que tengo en la entrada del blog para destacar la entrada mas reciente , el siguientecódigoa explicar no es muy complejo solo se debe de modificar los estilos (CSS) si se desea tener una imagen mas elaborada y el efectoseguirásiendo el mismo.

primero dirigase a Plantilla-Editar HTML- y realice la siguientecombinaciónde teclas CTRL-F y busque la siguiente linea/b:skin justo arriba de esta linea Pegue el siguientecódigocss.

.Slider_modern, .list-tile
{   
	color:#fff;
	float:left;
	height: 375px;/*defino el tamaño de las imagenes*/
	width:500px;
	margin:3px;
	overflow:hidden;
	position:relative;
	
}
.Slider_modern img, .list-tile img { border:none; }
.Slider_modern.me.slide-backa.metroBig { 
position:absolute; 
left:0; bottom:0; 
padding: 0 0 12px 12px; 
text-decoration:none; 
}
.Slider_modern a:link, .Slider_modern a:visited { color:#fff; text-decoration:underline; }
.Slider_modern a:hover { color:#fff; text-decoration:none; }
.Slider_modern p { font-size:13px; line-height: 16px; padding:10px; }
.Slider_modern .titulo_modern, .list-tile .titulo_modern { 
 position:absolute;/*defino el estilo del texto que describa la imagen*/
 bottom:0px; 
 color:#fff;
 font: italic 21px Georgia;
 text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
 left:0px; 
 width:100%; 
 padding:0 0 6px 6px;
 z-index:30; 
  }
.Slider_modern a.titulo_modern, .list-tile a.titulo_modern { text-decoration:none; }
.Slider_modern.me.metroBig { padding-top:45px; }
.Slider_modern,.Slider_moderndiv,.list-tilediv
{    backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
}
.Slider_moderndiv,.list-tilediv
{   top:0px;
	left:0px;
	margin:0px;
	height:100%;
	width:100%;
	position:absolute;
	z-index:20;
}
.list-tilediv
{ position:relative;
}

img.full , a.full
{
	display:block;
	margin:0px;
	height:100%;
	width:100%;    
}
.list-tilediv { background-color:transparent; }
.Slider_modern.back, .Slider_modern.slide-back,.Slider_modern.flip-back, .flip-list .flip-back
{
	position:absolute;
	z-index:10;	
}

una vez hecho ,CTRL-F y busque la siguiente linea de codigo/head y pegue lo siguiente .

script src="https://sites.google.com/site/javafacesitefile/fileblog/MetroJs.js" type="text/javascript"/script
    script type="text/javascript"
        jQuery.noConflict();
        jQuery(document).ready(function () {
            jQuery(".Slider_modern,.flip-list").liveTile();
        });
    /script

Debera tener instalado el scrip JQuery para que funcione correctamente el Slider.
una vez hecho esto vamos a colocar la estructura o el contenedor de las imagenes para esto vaya a
Diseño-clic en añadir un gaget-y escoja la opcion HTML/Javascript y pegue elsiguientecódigo.

div align="left"
 div class="Slider_modern" data-stops="100%" data-speed="750" data-delay="3000"
   span class="titulo_modern"
    Descripción de la imagen
   /span
   div
img src="img/img1.jpg" alt="1"/
   /div
    
   div   
 img src="img/img2.jpg" alt="2"/
   /div
 
    /div
 /div

y listotendráun slider estilo ModernUI :)
(si te sirvio este post ayudame dando clic ▼ en la imagen :) )