"hack"..." Leia Mais"
Autor: Edilene brandao da silva | Publicado: 2016-08-10T08:30:00-07:00





fonte e créditos:
www.dicasblogger



"Hack “Leia mais” automático e com imagens"



"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."



&nbsp;Saiba como...


 

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:

&lt;div class='post-body entry-content'&gt; 
&lt;data:post.body/&gt;

Substitua a linha &lt;data:post.body/&gt; por:

&lt;b:if cond='data:blog.pageType != "item"'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&lt;div expr:id='"summary" + data:post.id' style='display:none;'&gt;&lt;data:post.body/&gt;&lt;/div&gt;
&lt;script type='text/javascript'&gt;createSummaryAndThumb("summary&lt;data:post.id/&gt;");&lt;/script&gt;
&lt;div style="clear:both" align='right' class='rmlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia mais »»&lt;/a&gt;&lt;/div&gt;
&lt;/b:if&gt;&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;data:post.body/&gt;&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;
&lt;/b:if&gt;

"ATENÇÃO! "



"Para quem usa os templates de &nbsp; dicasblogger.

que já vêm com um outro hack “leia  mais” e/ ou com o jump break do Blogger, o caminho é outro"



Procure por"

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style&gt;#fullpost{display:inline;}&lt;/style&gt;
&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt;
&lt;b:else/&gt;
&lt;style&gt;#fullpost{display:none;}&lt;/style&gt;
&lt;p&gt;&lt;data:post.body/&gt;&lt;/p&gt;
&lt;b:if cond='data:post.hasJumpLink'&gt;
&lt;div class='jump-link'&gt;
&lt;a expr:href='data:post.url + &amp;quot;#more&amp;quot;'&gt;&lt;data:post.jumpText/&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/b:if&gt;
&lt;span id='showlink'&gt;
&lt;a expr:href='data:post.url'&gt;Continue lendo &amp;gt;&amp;gt;&lt;/a&gt;
&lt;/span&gt;
&lt;script type='text/javascript'&gt;
checkFull(&amp;quot;post-&amp;quot; + &amp;quot;&lt;data:post.id/&gt;&amp;quot;);
&lt;/script&gt;
&lt;/b:if&gt;
&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;

Substitua tudo por:

&lt;b:if cond='data:blog.pageType != "item"'&gt;
&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;
&lt;div expr:id='"summary" + data:post.id' style='display:none;'&gt;&lt;data:post.body/&gt;&lt;/div&gt;
&lt;script type='text/javascript'&gt;createSummaryAndThumb("summary&lt;data:post.id/&gt;");&lt;/script&gt;
&lt;div style="clear:both" align='right' class='rmlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia mais »»&lt;/a&gt;&lt;/div&gt;
&lt;/b:if&gt;&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;data:post.body/&gt;&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;
&lt;/b:if&gt;
&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;

Agora vá no CSS do template e

 antes da tag ]]&gt;&lt;/b:skin&gt;&nbsp;

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 &lt;/head&gt; 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:

]]&gt;&lt;/b:skin&gt;
e cole o seguinte código depois dessa tag:  

&lt;b:if cond='data:blog.pageType == "index"'&gt; 
&lt;style type='text/css'&gt; .post-footer { display: none; } &lt;/style&gt; 
&lt;/b:if&gt; 
&lt;b:if cond='data:blog.pageType == "index"'&gt; 
&lt;style type='text/css'&gt; h2.date-header { display: none; } &lt;/style&gt; 
&lt;/b:if&gt;

"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 templates, de&nbsp;dicasblogger.







 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:

&lt;style type="text/css"&gt;
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width &gt; 150 ? 150: true);
max-height:120px;
height: expression(this.height &gt; 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}

Substitua todo o trecho acima por este: 

&lt;style type="text/css"&gt;
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width &gt; 150 ? 150: true);
max-height:120px;
height: expression(this.height &gt; 120 ? 120: true);
display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}






fonte e créditos:
www.dicasblogger








   
             

Share    

var a2a_config = a2a_config |clique únicos| {};
a2a_config.linkname = "anuncioso";
a2a_config.linkurl = "http://www.anuncioso.com.br/";
 
       

     

var addthis_config = {"data_track_clickback":true};
 
        

     

var addthis_config = {"data_track_clickback":true};