Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.
Como colocar o hack Leia Mais com imagens
Entre no painel do Blogger, clique em design e, depois, em editar HTML.
Marque a caixa expandir modelos de widgets e procure por:
<div class='post-body entry-content'><data:post.body/>
Substitua a linha <data:post.body/> por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>
ATENÇÃO! Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo >></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if><div style='clear: both;'/> <!-- clear for photos floats -->
Substitua tudo por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if><div style='clear: both;'/> <!-- clear for photos floats -->
Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:
.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/
Procure então pela tag </head> e cole este outro código embaixo dela:
Escondendo o rodapé dos post na página inicial
Para esconder a data e o rodapé dos posts na página inicial, procure por:
]]></b:skin>e cole o seguinte código depois dessa tag:
<b:if cond='data:blog.pageType == "index"'><style type='text/css'> .post-footer { display: none; } </style></b:if><b:if cond='data:blog.pageType == "index"'><style type='text/css'> h2.date-header { display: none; } </style></b:if>
Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.
Exibindo apenas o texto
Se você quiser mostrar apenas o texto na home e não as imagens, procure por:
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
Substitua todo o trecho acima por este:
fontes:blog da luci<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}
Comentários