Entradas Resumidas estilo Snapshot en Blogger

Entradas Resumidas estilo Snapshot en la portada del blog en Blogger; se puede utilizar tanto para un blog de texto o uno de fotografia; ya que si la entrada no tiene imagen aparece una por defecto (default).

[1]- Recuerda guardar Copia de Seguridad antes de realizar los cambios en tu plantilla.
[2]- Entra a edición HTML presiona Ctrl+F y busca esta linea:

<data:post.body/>

Nota → el buscador marcara dos o tres <data:post.body/>, generalmente se sustituye la segunda línea que se encuentra en el Html del blog, sino funciona probar con la tercer linea.

Sustitúyela y en su lugar pega este Código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px; text-align:left;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

[3]- Ahora en el buscador pega la etiqueta:

</head>

Arriba de esta pega los siguientes códigos con los Script y el estilo CSS para las Entradas Resumidas estilo Snapshot en Blogger:

<!-- Entradas Resumidas estilo Snapshot -->
<script type='text/javascript'>
summary_txt = 0;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
function createSummaryAndThumb(pID, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="URL DE LA IMAGEN EN MINIATURA" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Estilos y efectos en Entradas Resumidas estilo Snapshot -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;slow&#39;, 1.0);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;slow&#39;, 0.5);
}, function() {
$(this).fadeTo(&#39;slow&#39;, 1.0);
});
});
</script>
<style type='text/css'>
.post {
float:left;
width: 250px; /* Ancho de las entradas */
height: 250px;
margin: 5px;
padding: 0px 5px 5px 5px;
overflow: hidden;
}
.post h3 a {
padding-left: 5px;font-size:12px;
}
.post-title { /* Evitar que se vea el Título de las entradas */
visibility:hidden;
display:none
}
.post-footer { /* Evitar que post-footer se vea */
height:0px;
visibility:hidden;
display:none
}
.post-footer-line-2{ /* Evitar que se vea el post-footer */
height:0px;
visibility:hidden;
display:none
}
.post-footer-line-4{ /* Evitar que se vea el post-footer */
height:0px;
visibility:hidden;
display:none
}
.date-header { /* Evitar que se vea la fecha*/
height:0px;
visibility:hidden;
display:none
}
#blog-pager {
clear:both;
}
img:hover { /* Estilos para que la imagen se mueva */
position: relative;
top: 3px;
left: 3px;
}
.post img{ /* Recuadro blanco de la imagen */
padding:4px;
border:0px solid $bordercolor;
background: #F2F2F2;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
</b:if></b:if>
<!-- Fin de las Entradas Resumidas estilo Snapshot -->

En el código que hemos agregado veremos al inicio dos variables:

► summary_txt =0; Indica el número de caracteres que tendrá el resumen, en este caso no tendrá ningún caracter.
► img_thumb_width = 120; Es el ancho que tendrán las imágenes en miniatura.

Un poco más abajo está la linea que dice URL DE LA IMAGEN EN MINIATURA, esa es la imagen que se mostrará por defecto en las Entradas Resumidas estilo Snapshot, cuando la entrada no contenga una.

En el Blog de Pruebas utilicé la siguiente imagen:

[4]- Ahora de bajo de los códigos anteriores pegamos los siguientes condicionales para ocultar el Sidebar en la portada de nuestro blog

<!--Ocultar Sidebar en la portada las Entradas Resumidas estilo Snapshot-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
 left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if></b:if>

Por ultimo presionar: vista previa para comprobar el resultado.
Si todo esta correcto Guardar Plantilla.

Demo del Blog