Hack Leia mais (Read More) Resumo de Noticia

Este Widget é muito bom para quem quiser reduzir espaço nas mensagens. 

 

 Este será o Resultado final

1º passo - incluir o script no template:

Entre na aba 'design' → 'editar html'(não precisa clicar em 'expandir modelo de widget') e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:

<br /> <!-- JavaScript Resumo do Post --><br /> <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 450; summary_img = 400; img_thumb_height = 100; img_thumb_width = 100; </script><br /> <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><br /> <!-- JavaScript Resumo do Post - Fim--><br /> 

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!
Agora vamos a 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/><br /> <div style='clear: both;'/><!-- clear for photos floats --><br /> </div>

Apague tudo e substitua por:

<br /> <div class='post-body entry-content'><b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br /> <span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span><br /> </b:if></b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <data:post.body/></b:if><br /> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/><br /> </b:if><br /> <div style='clear: both;'/><!-- clear for photos floats --><br /> </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 logo abaixo:


3º passo - Personalizando o Link 'Leia Mais':

Para substituir o texto por uma imagem, procure por este trecho:


<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►

E substitua o texto 'Leia Mais' por:

<br /> <span id='showlink'><a expr:href='data:post.url'><br /> <img src="URL-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 ]]> :

margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */<br /> font-weight: bold;<br /> }<br /> <br /> #showlink a {<br /> color: #ffffff; /* escolha a cor de seu link */<br /> }<br /> <br /> #showlink a:visited {<br /> color: #cccccc; /* escolha a cor de seu link quando visitado */<br /> }<br /> <br /> #showlink a:hover {<br /> color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */<br /> }<br /> <br />


Confira o artigo:Criando estilos para o Hack 'Leia Mais' de postagem resumida e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial.


ATENÇÃO:
Se você possui domínio próprio, infelizmente, arquivos js hospedados no Google Sites NÃO funcionam em blogs com domínio próprio.
Para que o script funcione correctamente, você deverá colar o código na íntegra no seu html.


Espero que vos tenha ajudado.
Ricardo Pereira

Arquivado em: Códigos,ReadMore,Widgets