Como colocar Continue lendo

Como vocês viram, todas as minhas postagens são resumidas e elas tem um botão que diz “Continue Lendo…”. Pois é hoje que vamos aprender a como fazer isso:
1- Faça login no blogger e vá para aba modelo
2- Clique em editar html, e se você preferir faça backup antes.
3- Clique em editar html, e clique para expandir modelos de widgets. Depois aperte "Ctrl+F" e procure por </head>
4- Cole acima dele o seguinte código:
<!-- Resumo automático --> <script type='text/javascript'> summary_noimg = 330; summary_img = 300; 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) { 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; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script></span> <!-- Fim resumo automático -->
5- Caso queira mudar o tamanho do post que vai aparecer no seu blogger ou o tamanho da imagem, preste atenção:

Summary_noimg – É o número de caracteres do resumo se não tiver nenhuma imagem na postagem. No código  está definido por 330 caracteres.
Summary_img – É o número de caracteres do resumo caso a postagem possua alguma imagem. No código está definido por 300 caracteres.
Img_thumb_height – É a altura da imagem em pixels. No código acima definida para ter 100px de altura.
Img_thumb_widthh – É a largura da imagem em pixels. No código acima definida para ter 100px de largura.


6- Depois de ter colado o código procure por <data:post.body/>
 
Obs: Pode haver mais ocorrências desse código no html, aparecendo mais de uma vez quando você clica em próxima. Para você poder identificar o correto você terá de dar uma lida em torno do código para ver se tem algo escrito ali sobre posts, ou fazer um teste com cada um e apertando para visualizar. Caso veja que não deu certo aperte "Ctrl + Z" e tente com outro. A opção mais fácil é a 1º.

7- Achando o código substitua ele pelo seguinte código:
<!-- Resumo automático --> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <p> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <scripttype='text/javascript'>createSummaryAndThumb ("summary<data:post.id/>");</script></span> <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Continue Lendo...</a> </span></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></p> </b:if> <!-- Fim resumo automático -->
8- No código é possível ler "Continue lendo..", você pode substituir ele por qualquer outro texto de sua preferência. Ex: Leia mais, Veja mais, etc.
9- Clique em visualizar para ver se deu certo.Na visualização já é possível ver se teve alguma alteração ou não. Caso não tenha dado certo, é porquê você colou o segundo código no lugar errado.

Bom pessoal, espero ter ajudado. Qualquer dúvida é só comentar.
Créditos especiais:  Jhonny Silvério > Xtecno > Tv Fofoca.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email