Galeria de Postagens Com 'Leia Mais' [002]

O tutorial foi obtido no site Reino Kawaii.  No HTML procure por:

<data:post.body/>

Você irá encontrá-lo duas vezes.

O primeiro, apague e substitua pelo 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:12px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink'><a expr:href='data:post.url'>Leia mais...</a></span>
</b:if></b:if>

Quando encontrar o segundo, cole o mesmo código acima antes dele, assim:

❤-------------------------------------------------------------❤

Deixando acima do segundo <data:post-body/> deu certo; anteriormente eu havia substituído os dois pelo código e tinha dado certo, mas depois, o conteúdo da postagem ao ser aberto sumia. Tente das duas formas para ver qual é melhor, se preferir. Continuando...

Procure por </head> e acima dele cole um dos dois códigos a seguir, dependendo de como quer que fique:

<script type='text/javascript'>
summary_txt = 100;
img_thumb_width = 200;/* largura da imagem */
</script>
<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSfa27HH7XqAboNIiirWU-O4GydH7Jhz_IzjnQfB2XbVJMwg6UR1r2pgJP1V214sPqZNbMRURfQWmrOebqVn_H-PVep29PiKJiJkdIJ00RGacigvtY7OvJO2T3O7NqNbINWq6OGFhm5sQg/s1600/tumblr_ltkjxqjTnO1qgye6qo1_400_large.jpg " 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>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.jump-link {
    display: none;
}
.post {
float: left;
height: 305px; /* altura do quadradinho */
width: 200px; /* largura do quadradinho*/
margin: 6px; /* Distancia entre os quadradinhos */
padding: 0;
overflow: hidden;
}
.post-body {
padding:0;
margin:0;
}
.post h3 {
padding: 0;
text-align: center;
border-bottom: 1px dashed pink;
}
.post h3 a, .post h3 a:visited {
color: pink; /* cor dos titulos dos posts */
margin: 5px 5px 0 5px;
text-align: center;
font-size: 25px;
font-family: &#39;marck script&#39;, cursive;
}
h3.post-title, .post-header {
margin: 0;
background:#fff;
}
.post img {
height: 180px; /* altura da imagem */
float: left !important;
border: none;
padding:0;
margin:0;
}
.post-outer, .inline-ad {
padding-top: 0px !important;
}
.post-outer {
padding-bottom: 0px;
}
.rmlink a, .rmlink a:visited, .rmlink a:hover{
font-size: 20px;
font-family: &#39;great vibes&#39;, cursive;
color: pink;
padding: 60px;
text-decoration: none;
}
h2.date-header { /* ocultar data apenas na pagina inicial*/
display: none;
visibility: hidden;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>

Ao editar preste atenção aos valores desse código, dependendo do que atribuir em algum lugar, tem que mudar em outro para ficar mais organizado. Algumas coisas já deixei no código para que servem, há muitas coisas que podem ser personalizadas, por exemplo:
summary_txt = 100; - se refere ao número de letrinhas que aparece na miniatura.
.post h3 - título das postagens; dá para mudar cor, fonte, tamanho, acrescentar efeito, plano de fundo...
height: 180px; ou height: 225px; - altura da imagem para que ocupe todo o espaço da miniatura, parte dele...você define o valor. width se refere à largura.
.rmlink a, .rmlink a:visited, .rmlink a:hover - é o "Leia mais", você pode mudar que nem os títulos das postagens, cores, tamanho, fontes... Procure por "Leia mais" no código lá do início e mude o texto para qualquer outro de sua preferência, como continue, read more, open...
Visualize e salve seu template se deu tudo ok. Espero que seja útil :3