Colocando 'hack' leia mais automático no post

O post de hoje será um tutorial a pedido da Leitora Lais, sobre como ter as postagens resumidas como são as minhas aqui no Doce Futuro.
Vamos aprender como incluir este ‘hack’ automaticamente no seu blog.
Com estes recurso suas postagens se resumirão automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem, juntamente com uma miniatura da imagem utilizada no post.

Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado.


No código a seguir, o hack “Leia Mais” não se aplicará nas Páginas Estáticas, as postagens só aparecerão resumidas na página inicial,marcadores e arquivos.

1º passo – incluir o script no template:

Acesse o painel do Blogger, entre no modo → ‘editar html’ do seu template (não precisa clicar em ‘expandir modelo de widget’) e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:
 
<!-- JavaScript Resumo do Post --> 
<script type='text/javascript'> 
var thumbnail_mode = &quot;float&quot; ; 
summary_noimg = 450; 
summary_img = 400; 
img_thumb_height = 100; 
img_thumb_width = 100; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
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){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
if(thumbnail_mode == "float") { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; 
summ = summary_img; 
} else { 
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>'; 
summ = summary_img; 
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary;} 
//]]> 
</script> 
<!-- JavaScript Resumo do Post - Fim-->
Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:

Em summary_noimg → é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.
summary_img → Indique o número de caracteres do resumo para o texto que contiver imagens.

É neste trecho que você vai definir o tamanho que você quer que as imagens do resumo tenham:

img_thumb_height → Indique a altura da imagem
img_thumb_width → Indique a largura da imagem

Visualize e Salve!

2º passo – edição no html:


Volte no menu “modelo” → “Editar html”, clique em ‘expandir modelos de widgets’ e procure por:

 
<div class='post-body entry-content'> 
<data:post.body/> 
<div style='clear: both;'/> <!-- clear for photos floats --> 
</div> 
 
Apague tudo e substitua por:

 
<div class='post-body entry-content'> 
<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'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> 
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span> 
</b:if></b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/></b:if> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/> 
</b:if> 
<div style='clear: both;'/> <!-- clear for photos floats --> 
</div> 
A palavra “Leia Mais” se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e direcionado à página do post completo. É neste espaço que você coloca o texto que preferir (Ex.Continue Lendo,Ler Todo Artigo, Leia Mais, Ver Conteudo etc).

Você pode também personalizar o link “leia mais”, de diversas maneiras,substituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do link, com uma seta, por exemplo.
Veja como proceder logo abaixo:



3º passo – Personalizando o Link ‘Leia Mais’:

Para substituir o texto por uma imagem, acesse o menu “modelo”, entre em “editar html” do seu template e procure por este trecho:

 
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ► 
 
E substitua o texto ‘Leia Mais’ por:

 
<span id='showlink'><a expr:href='data:post.url'> 
<img src="URL-DA-SUA-IMAGEM" /> 
  
Para incluir uma imagem ao texto ‘Leia Mais’, acrescente logo em seguida a ele:

 
<img src='ENDEREÇO-DA-SUA-IMAGEM'/> 


4º passo – aplicar estilos CSS:



Se você quiser, poderá também personalizar estilos para o link ‘Leia Mais’, para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :

 
#showlink { 
font-size: 11px; /* escolha o tamanho da fonte para o link */ 
float: right; /* escolha se quer link flutuando à esquerda ou direita */ 
margin-right: 30px; /* aplique margens para posicionar link */ 
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */ 
font-weight: bold; 
} 
 
#showlink a { 
color: #ffffff; /* escolha a cor de seu link */ 
} 
 
#showlink a:visited { 
color: #cccccc; /* escolha a cor de seu link quando visitado */ 
} 
 
#showlink a:hover { 
color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */ 
} 

Fonte:http://www.mundoblogger.com.br

26 Comentários ❀:

  1. http://lorranne14.blogspot.com.br/

    ameeeiii seu blog, Muito lindo,
    também adorei o tutu quando tiver tempo vou fazer no meu!
    Não deixe de visitar meu blog heeiiim

    ResponderExcluir
  2. Muito obrigada por partilhares o que sabes connosco querida! *_*
    Estou a retribuir a visitinha que fizeste lá no meu blogue. E sim, estou interessada na troca. Já sigo! ;)

    Beijocas,
    Ana

    http://sombrasdabeleza.blogspot.pt/

    ResponderExcluir
  3. Brincadeirinha Meme bem legal rolando. Escolhi seu blog.
    Dá uma olhada.
    michele-otero.blogspot.com.br/

    ResponderExcluir
  4. Nossa que tutorial legal , o blog já ta no estilo do natal ^^ !Bjos..

    ResponderExcluir
  5. Eu também sempre quis saber isso!
    Adoreei a dica! :)
    Beijinhos.
    contornoperfeito.blogspot.com.br

    ResponderExcluir
  6. Muito bom o tutorial. Parabéns!

    http://patricinhaspossessivas.blogspot.com.br/

    ResponderExcluir
  7. Esse "hack" fica muito bom,ótimo tutorial !

    ResponderExcluir
  8. Os Tutoriais é muito boom *
    Lindo XD
    Seguindo aqui , segue de volta : http://sepudereufaco.blogspot.com.br/

    ResponderExcluir
  9. oi ,ameiiiiiiiii o blog super lindo , adorei o post. ah por favor segue meu blog ! ja to seguindo

    iloveglamourandrock.blogspot.com.br

    ResponderExcluir
  10. Eu adoro esse "hack", diminui a postagem e deixa tudo mais organizado! ^-^

    ResponderExcluir
  11. Olá, desculpa incomoda.
    Prazer, meu nome e Pedro (:
    Uma amiga indicou seu blog e achei de mais aqui ... Super da Hora. Parabéns mesmo Leandro, seu nome né. vi na página de sobre nos layouts.
    int, tou começando meu primeiro blog junto com uma amiga. Seria muito pedir para que você visita-se e fala-se o que achou ? se gostou segue, smp e duro começa o primeiro blog e tou perdidinho. A url vou deixa logo embaixo e espero que vc goste.
    http://depoisdaadolescencia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. aaaahi desculpa hellen, mil perdoes mim confundir na hora de comentar e troquei os nomes mas muito obrigado e ja estou seguindp.

      Excluir
  12. É bem chatinho para fazer e os códigos são grandes mas, com paciência a gente chega lá né?! hahaha
    Flor, está rolando um sorteio de uma paleta lá no blog, participa?
    Link:http://modaetutorial.blogspot.com.br/2012/11/sorteio-paleta-macrilan-em-parceria-com.html
    Beijos

    ResponderExcluir
  13. Sei que errei helen, desculpas mas eu tou nervoso com isso de blog e o meu primeiro e nn sei como começa. Mas eu blog e divo e eu amei a decoração de natal sei que errei e n vou fazerr mas isso desculpas

    ResponderExcluir
  14. Olá!!! Passando para conhecer o seu Blog que é muito fofo!!! Já estou te seguindo e vi seu link lá no grupo do Face. Te convido á participar do meu Blog de divulgação a AGENDA DOS BLOGS e divulgar o seu Blog lá.Passa lá e se inscreva!!! Bjs!!!
    http://www.agendadosblogs.blogspot.com.br

    ResponderExcluir
  15. Adoreii demais o tuto, pena que eu não tenho pra fazer, quando começar as férias vou fazer concerteza, já coloquei o tuto nos favoritos!

    Me ajuda com a minha meta? (se não for pedir d+)
    Imastoryne | Blogspot
    *entre pelo perfil*
    Beijos, Nicole.

    ResponderExcluir
  16. ótimo tutorial amor, maravilhoso!
    acervo-de-livros.blogspot.com

    ResponderExcluir
  17. claro amor, porque n ? (:
    obg ..
    seguinddo!

    ResponderExcluir
  18. Isso fica ótimo!
    Obrigada (:

    nidia-jlm.blogspot.com

    ResponderExcluir
  19. Oi flor!
    Estou seguindo o seu blog. Segue o meu?
    Ah sim, quer se afiliar? Ou ter parceria?
    Kisses.
    Cacau.
    www.mundomaniateen.blogspot.com

    ResponderExcluir
  20. Flor, gostaria de saber como voce deixou o titulo dos seus gadgets assim...
    Responde no email: contato-mundomaniateen@hotmail.com.
    Se puder faz um tuto...
    Bjokas.
    www.mundomaniateen.blogspot.com

    ResponderExcluir
  21. Adoro essas diquinhas, e realmente seu blog tem um visual bem interessante e fofo.

    Já estou te ajudando em sua meta se seguidores, acabei de clicar em seguir, me ajude também em ajeitadinhabasica.blogspot.com

    Beijos!

    ResponderExcluir
  22. Meu nome como seguidora é Fernanda Fe, e a foto um beijinho ;)

    ResponderExcluir
  23. Adorei o seu blog me ajudou muito.

    Segue devolta:

    http://blogdaminaguiar.blogspot.com.br/

    ResponderExcluir
  24. Excelentes tutoriais, parabéns!!!
    Veja o meu blog e siga se gostar; ainda está meio parado, mas vou melhorá-lo:
    www.isamtolinda.blogspot.com.br
    Uso o pseudônimo Isa F. M.
    Att.,
    Micaela Santos.

    ResponderExcluir
  25. oii,eu n sei meche mt em Html,nçao tem como fazer isso,mas sendo em widget???

    ResponderExcluir

Muito obrigada por comentar...
Só não postem palavrões, nem briguem, por favor...
Se forem colocar: Tô seguindo, segue de volta?
Não.. apenas se seu blog for legal, atualizado, e de bom conteúdo, eu sigo sim!
Deixe o link do seu blog
Obrigado pela visita, e voltem sempre! ❀

.: ❀ Doce Futuro ❀ :. Copyright © 2013 - Todos os Direitos Reservados