Hack “Leia mais” automático e com imagens
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:
Substitua a linha por:
<div class='post-body entry-content'>
<data:post.body/>
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:
Continue lendo >>
Substitua tudo por:
Agora vá no CSS do template e antes da tag ]]> 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 e cole este outro código embaixo dela:
Fontes de referência
- Templates para Você - Hack Leia Mais com imagens reduzidas
- Mundo Blogger - Hack Leia mais com imagens na página inicial
Escondendo o rodapé dos post na página inicial
Para esconder a data e o rodapé dos posts na página inicial, procure por:
]]>e cole o seguinte código depois dessa tag:
Para entender melhor as condicionais do Blogger, acesse:
- O Blogger e as Condicionais – BloggerSphera
- Aplicar estilos a página inicial do Blogger – Mundo Blogger
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:
<br />.thumbnailimg IMG {<br />max-width:150px;<br />width: expression(this.width > 150 ? 150: true);<br />max-height:120px;<br />height: expression(this.height > 120 ? 120: true);<br />}<br />.thumbnailimg {<br />float:left;<br />padding:0px 10px 5px 0px;<br />}</p> </blockquote> <p>Substitua todo o trecho acima por este:</p> <blockquote> <p><style type="text/css"><br />.thumbnailimg IMG {<br />max-width:150px;<br />width: expression(this.width > 150 ? 150: true);<br />max-height:120px;<br />height: expression(this.height > 120 ? 120: true);</p> <p><span style="color: #ff0000" mce_style="color: #ff0000"><strong>display: none:</strong></span><br />}<br />.thumbnailimg {<br />float:left;<br />padding:0px 10px <strong>0px</strong> 0px;<br />}</p> </blockquote> </div> </div> <div class="post-footer"> <div class="post-footer-line post-footer-line-1"><span class="post-comment-link"> </span> <div id="addthis_button"> <div class="addthis_toolbox addthis_default_style"><a class="addthis_button_facebook_like at300b" title="Send to Facebook_like" target="_blank"></a> <a class="addthis_button_tweet at300b" title="Send to Tweet" target="_blank"></a> <a class="addthis_counter addthis_pill_style"></a><a class="addthis_button_expanded" title="View more services">2</a><a class="atc_s addthis_button_compact"><span>Share</span></a></div> <mce:script type="text/javascript"><!-- var addthis_config = {"data_track_clickback":true}; // --></mce:script> <mce:script src="https://s7.addthis.com/js/250/addthis_widget.js#username=dicasblogger" mce_src="https://s7.addthis.com/js/250/addthis_widget.js#username=dicasblogger" type="text/javascript"></mce:script> </div> <div id="subscribe"> <p><strong>Dica:</strong> <a href="https://www.dicasblogger.com.br/p/feeds.html" mce_href="https://www.dicasblogger.com.br/p/feeds.html">Clique aqui </a> e descubra como receber nossos artigos e várias informações automaticamente.</p> <strong>Alerta:</strong> É terminantemente proibido copiar os artigos deste blog. Verifique a nossa <a href="https://www.dicasblogger.com.br/p/licenca.html" mce_href="https://www.dicasblogger.com.br/p/licenca.html"> licença.</a></div> </div> </div> </div> </div> </div> </div> </div>
