Entradas en miniatura para nuestro blog

Hoy vamos a hablar de como podemos por unas vistas en cuadrícula de nuestras publicaciones.
Grid View es un scrip que mostrará las entradas de nuestro blog con imágenes en miniatura tipo cuadrícula en la página de inicio.


Esta vista es una galería de imágenes de nuestros últimos post con título vinculado a la entrada de la publicación.
Podemos ver la demo en este Vínculo

 Paso a PASO

1º Paso

Como siempre comento en todos los post cuando tenemos que modificar algo de nuestra plantilla es muy importante que tengamos una copia de seguridad de nuestra plantilla bien guardada por si lago nos nos sale bien a la hora de modificarla.
En este post podéis ver como se hace paso a paso.

2º Paso

Una vez tengamos nuestra copia de seguridad nos vamos a:
Plantilla> Editar HTML y con CTRL +F buscamos:
</head>
Y justo encima pegamos el siguiente código:

<Script src = 'http: //code.jquery.com/jquery-1.9.1.js'/>
<B: if cond = 'datos: blog.pageType! = & Quot; item & quot;'> <b: if cond = 'datos: blog.pageType! = & Quot; static_page & quot;
<Script type = 'text / javascript'> // <! [CDATA [
Función hideLightbox () {para (var a = document.getElementsByTagName ("img"), b = 0; b <a.length; ++ b) a [b] .onmouseover = function () {var a = this.parentNode .innerHTML; this.parentNode.innerHTML = a, this.onmouseover = null}} $ (documento) .ready (function () {var a = 200, b = 170 , c = "http: //3.bp.blogspot Cada función (e, f) {(e, f) {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ Var f = $ (f), g = $ (f) .find ("img") primero (), h = f.parent (). Find ("h3 a"), i = h.attr ), J = h.text (); si ($ (h) .remove (), f.empty (), g.attr ("src")) {var k = g.attr ("height" L = g.attr ("width"), m = $ (g) .parent (); if (f.append (m), d) g.attr ({src: g.attr ("src"). (/s\B\d{3,4}/,"w500-h330-c")}),g.removeAttr("width").removeAttr("height");else{g.attr({src: G.removeAttr ("width"), var n = (k / l *), g.attr ("src" A) .toFixed (0); g.attr ("height", n)}} else var g = $ ("<img>"). Attr ("src", c), m = $ (" Css ("margin-left", "0") .append (g) .appendTo (f); m.attr ("href", i) .css "Margin-right", "0"). AddClass ("publicar" Css ("filter", "alpha (opacity = 0.9)"). AppendTo () () () () M); o.height (); o.css ("margin-top", "- 28px"), f.css ("altura", b) .css ("overflow", "hidden" Window.addEventListener? Window.addEventListener ("load", hideLightbox, void 0): window.attachEvent ("onload", hideLightbox) ;
//]]>
</ Script>
<Style type = 'text / css'>
.post {
Anchura: 31,3%;
flotador izquierdo;
Display: inline-block;
Border-bottom: medium ninguno;
Margen: 0 1% 2%;
Padding-bottom: 0;
}
H2.date-header, .post-footer {
Display: ninguno;
}
H3.post-title, .comments h4, .post-header {margin: 0;}
.postThumbnail: hover {text-decoration: none;}
A.postThumbnail div {
Text-decoration: ninguno;
Color: #fff;
Relleno: 0 5px;
Altura: 24px;
Fuente: negrita 12px / 25px Trebuchet MS, Trebuchet, Verdana, sans-serif;
Text-transform: capitalizar;
Antecedentes: rgb (125,126,125);
Fondo: -moz-gradiente lineal (top, rgba (125,126,125,1) 0%, rgba (14,14,14,1) 100%);
Background: -webkit-gradient (lineal, izquierda arriba, izquierda inferior, color-stop (0%, rgba (125,126,125,1)), color-stop (100%, rgba (14,14,14,1)));
Fondo: -webkit-linear-gradient (top, rgba (125,126,125,1) 0%, rgba (14,14,14,1) 100%);
Fondo: -o-gradiente lineal (arriba, rgba (125,126,125,1) 0%, rgba (14,14,14,1) 100%);
Fondo: -ms-gradiente lineal (arriba, rgba (125,126,125,1) 0%, rgba (14,14,14,1) 100%);
Fondo: gradiente lineal (al fondo, rgba (125,126,125,1) 0%, rgba (14,14,14,1) 100%);
Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = & # 39; # 7d7e7d & # 39;, endColorstr = & # 39; # 0e0e0e & # 39;, GradientType = 0);
}
.postThumbnail {width: 100%;}
.postThumbnail: hover div {
bloqueo de pantalla;
}
.postThumbnail img {
Ancho: 100%;
Fondo-color: transparente;
Frontera: medio ninguno;
Relleno: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
Radio de borde: 12px;
Transición: opacidad .25s facilidad de entrada-salida;
-moz-transition: opacidad .25s facilidad de entrada-salida;
-webkit-transition: opacidad .25s facilidad de entrada-salida;
}
.postThumbnail img: hover {
-ms-filter: & gt; progid: DXImageTransform.Microsoft.Alpha (Opacity = 70) & quot ;;
Filtro: alfa (opacidad = 70);
-moz-opacidad: 0,7;
-khtml-opacidad: 0,7;
Opacidad: 0,7;
}
</ Style>
</ B: si> </ b: si>

3º Paso

 Ahora guardamos nuestra plantilla y ya lo tenemos listo.

Nota:
Si tenemos demasiado espacio en nuestros post tenemos que modificar la parte de: b = 170
que es la altura por otra mayor o menor hasta que se ajuste a nuestra página.