Como colocar a Hack "Leia Mais" no seu blog

Oláaaa!

Vamos para mais um tutorial
galera!

A maioria dos blogs aparece
somente um resumo da postagem na página inicial, onde no final aparece escrito
"Leia Mais", ou "Continue Lendo", e quando clicamos aparece
a postagem completa. Eu uso aqui no meu blog, e particularmente, acho que dá
uma estética melhor  para a página inicial,
evitando que a home fique extensa demais, o que causa, muitas vezes, um certo
desconforto na busca dos conteúdos em certas páginas.

Hoje vou ensinar como incluir
este 'hack' no seu blog.

Com estes recursos as 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.

IMPORTANTE: Antes de tudo, faça
um backup do seu template, caso algo dê errado ok?

1ª ETAPA:

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 resume tenham:

img_thumb_height
→ Indique a altura da imagem

img_thumb_width
→ Indique a largura da imagem

Visualize e Salve!

2ª ETAPA:

Volte á aba 'design' → '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).

Agora Salve!

Prontinho!

Deu certo? Ficou legal? 

OBS: Nem todos os códigos funcionam para todos os layouts ok? Por isso mesmo a importância de você salvar tudo antes de mexer ok?