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?