Galeria De Imagenes Con Css3 y Html Para Blog De Blogger

En este tutorial aprenderemos hacer una galeria de imagenes con Html y Css.Esta es una simple para adaptar nuestras imagenes y presentarlas a nuestros visitantes de una forma integral en area del nuestros articulos o anadirlas en un gadget en la seccion de Html/Javascript.
Para ver ejemplo en vivo da clic en boton de abajo.

Pasos a seguir para intergrar esta Galeria de Imagenes en Blog de Blogger.
1.Entra en tu cuenta de Blogger.

2.Ir a Diseno>>Anadir un Gadget

3.Selecciona Html/Javascript y pega el siguiente codigo.

<style>
bc{
float: left;
width: 150px;
height: 150px;
position: relative;
border: 1px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
bc img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-property: width, height; /* we specify, what properties we need to change*/
-webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
-moz-transition-property: width, height;
-moz-transition-duration: 300ms;
-o-transition-property: width, height;
-o-transition-duration: 300ms;
position: absolute;
opacity: 0.3; /* add opacity*/
cursor: pointer;
}
bc:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
content: "Studio.com";
color: #eaeaea;
font-family: "Trebuchet MS";
font-size: 16px;
opacity: 0.5;
}
bc:focus img{
width: 250%;  /* we increased an image to this size */
height: 250%;
position: absolute;
opacity: 1; /* transparency is not needed */
z-index: 1; /* for a photo to enlarge over all images */
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000;  /* we add some beauty */
-webkit-transition-property: width, height; /* we decrease the image */
-webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
-webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}
bc:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3th and 4th will be enlarged from the right border of browser window */



bc:nth-child(n+9) img{
bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */

-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
.closed{
display: none;
}
bc:focus~.closed{
display: block;
}


</style>



<div align='center' class="gallery">
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Dory-Finding-Nemo-3D-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Disney-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://backgroundhdwallpaper.com/wp-content/uploads/2013/04/Finding-Nemo-Dory-Marlin-Background-HD-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRavtWqKxMxvTm9ZxKj3NjRTJoktTA-80dMs4O9_KOAE4zH9Gw7" /></bc>
            <bc tabindex="1"><img src="http://www.queremospeliculas.com/wp/wp-content/uploads/2012/11/buscandonemo-peli-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/megamind-movie-wallpaper-hd-150x150.jpg" /></bc>
      
        <bc tabindex="1"><img src="http://lookwallpaper.com/wp-content/uploads/2013/04/green-lantern-movie-wallpaper-hd-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://174050363.r.dediservecdn.com/wp-content/uploads/2013/06/nemo-150x150.jpg" /></bc>
            <bc tabindex="1"><img src="http://hdwallpapersbase.com/wp-content/uploads/2013/01/Finding-Nemo-Wallpaper-150x150.jpg" /></bc>
        <bc tabindex="1"><img src="http://hotwallpaper2013.com/wp-content/uploads/2013/05/Nemo-Fish-Cartoon-Pictures-HD-Wallpaper-150x150.jpg" /></bc>
        <span class="closed">+</span>
        <span class="closed-layer"></span>  
    </div>

4.Guarde la Html/Jascript y listo.

Nota: Cambia la direccion de imagenes o URL con la de tus imagenes a tu gusto.
Para cambiar las dimensiones de ancho y alto de las imagenes solo cambie el valor :
width: 150px;
height: 150px;

Read More