Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.
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>
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>
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:
<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;
}
0 comentários:
Postar um comentário
Os leitores são responsáveis pelos seus comentários postados neste site.
O Connect - Technology não se responsabiliza pelo conteúdo colaborativo apresentado e ainda se reserva ao direito de deletar, sem aviso ou consulta prévia, comentários com conteúdo ofensivo, palavras de baixo calão, spams ou, ainda, que não sejam relacionados ao tema proposto pelo post do blog ou notícia.