Hack Leia Mais com Posts Expansíveis

Há algum tempo indiquei aqui o link para o tutorial da minha amiga Cláudia sobre Posts Expandíveis.
Neste post a Cláudia disponibiliza um arquivo do word com as instruções para que os posts expandíveis funcionem.
Vou transcrevê-lo aqui a pedidos com algumas adaptações na tentativa que fique mais fácil para as pessoas poderem fazê-lo em seus blogs.

A PRINCIPAL DIFERENÇA DESTE HACK DE ALGUNS "CONTINUE LENDO" É QUE VOCÊ PODE CLICAR EM "CONTINUE LENDO" OU "LEIA MAIS" E NÃO TER QUE ABRIR O POST PARA LER O RESTO, ELE SE EXPANDE, FICANDO OS OUTROS POSTS VISÍVEIS PARA VOCÊ.

Falando nisso clique em Continue Lendo para aprender como fazer!
Não deixe de ler o tutorial até o fim e ter certeza de ter entendido, copiar e colar sem pensar não dá certo!

HACK PARA POSTS EXPANSÍVEIS
(Tradução Claudya R. – Fonte:http://beaultifulbeta.blogspot.com - Adaptação Áurea Ribeiro)

1º Baixe e salve seu tema, assim você pode voltar atrás se algo der errado.

2º Ache as tags
]]></b:skin> e </head>

Adicione o código javascript:
<script type='text/javascript' src='URL do Arquivo Java' />
entre estas tags.

OU

» Baixe O ARQUIVO JAVA, hospede no local de sua preferência- Sugestão DROPBOX -, anote a URL e substitua a URL do Arquivo Java pela sua. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente:

Desde que fique sempre abaixo de ]]></b:skin> e acima de </head>

Salve seu template clicando em SALVAR MODELO
Marque a caixinha ►

3º Encontre a includable de nome "post" procurando pela linha:

<b:includable id='post' var='post'>→Selecione desde esta linha acima até a linha:

<div style='clear: both;'/> <!-- clear for photos floats -->


→Substitua pelo código em vermelho abaixo:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>Leia Mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>Resumo...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Salve seu template clicando em SALVAR MODELO

Obs: Você pode substituir os dizeres Leia mais... e Resumo... (destacados em verde), da forma que quiser. Por exemplo como fiz aqui, Continue lendo... e Voltar.

4º Vá em Configurações ► Formatação ► desça a tela e no fundo, você encontra o Modelo de Postagem (text box/caixa de texto) para especificar o "Post template". Copie/cole o código abaixo, nessa caixa de texto, e clique em Salvar configurações.

Digite seu resumo aqui
<span id="fullpost">
Digite o resto do post aqui
</span>


De forma que fique como esta imagem:
Image and video hosting by TinyPic

Agora, se você criar um novo post, ele mostrará exatamente onde digitar o resumo e onde ler o resto do post. Esse hack só funciona nos posts após o código ter sido instalado, se quiser nos antigos, terá que editar os posts.

Post Atualizado em 16/06/09 - 23:00h

Se o arquivo Javascript hospedado em um site externo não funcionar você pode incorporar o código java no HTML do seu blog desta forma:

Copie este código abaixo e cole entre as tags ]]></b:skin> e </head> da mesma forma que a explicação acima:
<script type='text/javascript'>
//<![CDATA[
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

function commentDisplay(json) {
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");

if (entry.content) {
comment = entry.content.$t;
} else if (entry.summary) {
comment = entry.summary.$t;
}

var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> commented:<br/>');
if (comment.length < numchars)
document.write(comment + '<br/><br/>');
else
document.write(comment.substring(0, numchars) + '...<br/><br/>');
}
document.write('Widget sponsored by:<br/><a href="http://bvibes.com"><img src="http://fbvibes.com/templates/yget/images/vibes_logo.png"/></a><br/>');
} //]]></script>

Hack Leia Mais com Posts Expansíveis Hack Leia Mais com Posts Expansíveis Reviewed by Áurea on 3/03/2008 Rating: 5

48 comentários:

  1. Olá Áurea, tudo bem. Sempre grandes dicas aqui. Excelente.
    Deixei um mimo para você no meu blog.
    Gostaria que aceitasse.
    Um beijo.

    ResponderExcluir
  2. Áurea, obrigada mesmo pela dica. Assim que eu tiver com tempinho eu instalo no layout do blog e passo a usá-lo. Já estava perdendo os cabelos com esse problema, hehe.

    Você sabe também algum hack para comentários ao estilo wordpress? Beijos.

    ResponderExcluir
  3. Muito bom. O Conta Outra ganhou outro aspecto com essa novidade. Agora dá pra colocar textos maiores, sem deixar o blog compridão.
    Muito obrigado!!

    ResponderExcluir
  4. Olá Cláudia, depois de sofrer com alguns tutoriais por aí, tentei apenas duas vezes o seu e já deu certo... Vou postar agora para ver como fica, mas já é uma vitória para mim, que não entendo nada de html, não ter dado erro no final das alterações. Beijo e obrigado por manter esse blog com dicas tão preciosas.

    ResponderExcluir
  5. Oi Cláudia.
    Fiz os procedimento conforme descritos no tutorial, porém ao clicar no "Leia mais", está direcionando para um nova aba em branco (no firefox). Na página normal está carregando certinho. Ao clicar no resumo acontece a mesma coisa. Será que eu fiz alguma coisa errada?

    Abraços.

    ResponderExcluir
  6. Coloco tal e qual como você indica aqui mas ocorre um pequeno senão....fica um espaço enorme vazio entre o resumo e a frase "continuar a ler"...como rectificar isso para ficar como o seu, imediatamente a seguir a ultima frase do resumo??

    Obrigado e parabens pelo blog

    ResponderExcluir
  7. ADM


    ME AJUDA POR FAVOR


    QUANDO EU CLICO EM LEIA MAIS (eU COLOCO O RESUMO E O RESTO)NAO VAI,DA ERRO,TENTEI COM FIREFOX E O IE,MAS NAO DEU,MANDEI OUTRAS PESSOAS ENTRA MAIS NAO ACONTECE NADA,E A MESMA COISA QE VC NAO CLICA


    EXEMPLO:vOCE CLICA E JA APARECE CONCLUIDO

    =p


    AJUDA AEW DEVE TER MTA GENTE COM ESSA DUVIDA

    ResponderExcluir
  8. Nossa valeu!!
    Fancionou direitinho para mim!
    Era algo que eu precisva faz tempo!
    :) Obrigada!!

    ResponderExcluir
  9. Voltei,
    prá dizer que nem o temporário funcionou...
    sempre que coloco o novo código, dá pau no IE.
    Mesmo este código do Blogmundi.
    SOCORRO, HELP...
    Tentei entrar em contato com a Ariane, do templates novo blogger, pois o template que uso é dela (outono), mas não consigo postar comentários.
    Será possível que vou ter de mudar o template DE NOVO? rsrsrsrsrs...
    Abraços.

    ResponderExcluir
  10. Obrigado por me ignorar completamente...
    Ainda tenho problemas com sobreposição de colunas no template listen azul no IE.
    Vou passar aqui de vez em quando prá ver se corrigiu o problema do SEU TEMPLATE.
    Agradeço.
    Deus te Abençoe...

    ResponderExcluir
  11. Gostaria de saber se tem como apenas expandir, não seria necessário mostrar os comentários que existem. Seria mais expansação do que "Leia tudo". Um bom exemplo para ser aplicado é um post com várias fotos, mas só colocaria 1 a mostra, e quem quiser ver todas as fotos, clicaria em "mostrar mais" será que tem como?

    ResponderExcluir
  12. Cara eu fiz isso no meu template, sumiu a data das postagens.

    ResponderExcluir
  13. QUE DEUS LHE ABENÇOE!!! :D

    Assim já tenho o blog + organizado e apresentavel :P

    Continue com o bom trabalho ;)

    ResponderExcluir
  14. To tendo um erro:
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "b:includable" must be terminated by the matching end-tag "".

    ResponderExcluir
  15. Camila Este é o objetivo deste tutorial.

    César Infelizmente você deve ter deletado a linha que define as datas. Salvou seu template ante de aplicar o tutorial? Uso este recurso aqui no blog e dá certinho.

    Diogo Que bom que estou ajudando. Fico feliz! Obrigada!

    Deivid Salvou seu código do template antes de aplicar este recurso? Você deve desfazer tudo e fazer de novo. Como já disse antes uso este recurso aqui no blog e dá certinho. É preciso muita atenção.

    ResponderExcluir
  16. ae pq ser que no meu blog nao aparece esse comentario imbutido msm eu ja tendo escolhido a opçao? vlw

    ResponderExcluir
  17. Super Downloads Free
    Vá até este link: Como habilitar o formulario de comentários embutido Que o Compulsivo ensina como fazer para seu formulário aparecer!

    ResponderExcluir
  18. nao consegui colocar isso no template "listen rosa" porque nao exiete o trecho do codigo bom nao da pra colar aqui pq nao aceitam no comentario... a primeira parte do codigo onde tem a palavra post duas vezes...ante procurei um milhao de vezes fiquei até vesga e nao tem!
    e agora?? como posso colocar a hack leia mais neste template?
    obrigada

    ResponderExcluir
  19. Andressa - O hack leia mais já está instalado no template listen rosa. Dê uma olhada no post dele que você verá que ele já está lá.

    ResponderExcluir
  20. Olá. Estou com o mesmo problema que um dos leitores. Meu blog está configurado para abrir todos os links em uma nova janela, porém, o mesmo acontece com o Leia Mais... abre uma janela em branco e o hack funciona, tornando o post expandivel. Gostaria de saber como faço para que essa nova janela (em branco) não abra quando clicar no Leia Mais. Não queria tirar a configuração do meu blog de abrir todos os links em uma nova janela, porém, fica ruim abrir uma janela em branco quando clica em Leia Mais. Aguardo resposta! obrigado

    ResponderExcluir
  21. Camila
    O Leia Mais mesmo que seja expansível é interpretado como um link. Se o seu blog tem o recurso target_blank para todos os links, será necessário retirá-lo para que seu recurso Leia Mais abra na mesma página.

    ResponderExcluir
  22. Ok, obrigado pela dica. Tive de tirar mesmo.... o hack está funcionando direitinho. obrigado

    ResponderExcluir
  23. opa obrigado consegui fazer aki muito obrigado msm pelo tutorial.

    site add nos favoritos estao de parabéns!!!!

    ResponderExcluir
  24. Camila
    Que bom que deu certo!
    ``TizuM~
    Obrigada! Fico feliz por ter dado tudo certo com você!

    ResponderExcluir
  25. Nossa,nem sei como agradecer...
    Eu sou nova,na criação de blogs...
    E estou tentando colocar este codigo a decadas...
    Graças a vc eu conseguir...muito obrigada...
    Continue assim,seu blog é show viu!Ajuda muito...
    Bjs!

    ResponderExcluir
  26. MasterBlog e mxz-se Fico feliz que tenha dado certo! Sejam sempre bem vindos!

    ResponderExcluir
  27. Olá, Áurea! Uso esse hack de posts expansíveis a uns dois meses. É muito bom. Mas hoje notei que parou de funcionar. Visitei alguns blogs (aí dos outros comentários) que possuiam o hack também e em nenhum deles funciona. O que aconteceu? Problema na hospedagem do arquivo java? Não tenho cópia desse arquivo, se for isso, teria como você disponibilizar um link para baixá-lo? Esse aí de cima não funciona...Obrigado e abraços...

    ResponderExcluir
  28. pessoaordinária Dei a sorte de o endereço da anniyalogam estar funcionando agora sem ultrapassar o limite de banda. Agora o arquivo java já está disponibilizado no link dele no tutorial em outro endereço que não vai se perder.
    Link atualizado e obrigada por me avisar!

    ResponderExcluir
  29. EU FIZ TUDO CERTO NO MEU BLOG E FUNCIONOU MAIS NO OUTRO NÃO FUNCIONOU APARECE O LEIA MAIS... MAIS QUANDO CLICA NAUM APARECE NADA FICA NA ONDE TA E NADA

    ResponderExcluir
  30. oi! pode me ajudar? eu tinha esse hack no meu outro template e qd mudei pra o tabs-01 n to conseguindo botar. ja fiz td q ta no tutorial mas nao da certo. todos os posts ficam com "leia mais" embaixo, mesmo sem eu escrever o post do tipo expansivel. e se eu botar como expansivel, o "leia mais" nao presta pra nd pq n expande. ja tirei td e botei como tava antes

    ResponderExcluir
  31. Não consigo abrir este link, diz que ele não existe, o que faço?

    ResponderExcluir
  32. Unforgettable02 Link corrigido. É só copiar o arquivo java e hospedar no site de sua preferência!

    ResponderExcluir
  33. o link pra baixar nao tah funcionando!

    ResponderExcluir
  34. Minha dúvida é se tem algum tipo de conflito ao usar esse tutorial com o hotwords.
    pois tentei em uma template que já tinha esse hack instalado e não consegui instalar o hotwords.
    Parabéns pelas postagens!
    E obrigado desde já....

    ResponderExcluir
  35. @Fregolon e @Lucas Infelizmente não sei o que pode estar acontecendo. Assim que puder dou uma pesquisada sobre este problema.

    @CLÃ HACKER AND PHREACKER Estranho, não uso este hack aqui, mas já usei e também estou tendo problemas com o hotwords. Hoje vou fazer um teste com outro hack de leia mais para ver se o hotwords funciona aqui.

    ResponderExcluir
  36. Suas dicas são maravilhosas, mas ainda tenho dificuldades com todos esses códigos.
    Bom domingo!!!
    Um abraço!!!

    ResponderExcluir
  37. Oi possuo um blog e estou tentando adicionar o
    "HACK PARA POSTS EXPANSÍVEIS" seguindo os passos consigo fazer o truque, mas o campo com a data e o nome do autor do post ficam em branco.

    ResponderExcluir
  38. Gostaria de agradecer pelo belo tutorial, procuro por esse hack a muito tempo e finalmente encontrei. Porem, quando publico o post fica um grande espaço em branco e depois aparece o leia mais. Se, voce ou alguem souber como resolver por favor me informar.

    obrigado.
    (ah, eu ja refiz ele algumas vezes)

    ResponderExcluir
  39. Preciso retirar esse esquema do meu blog e colocar algum de texto expandivel em outra página, mas não consigo retirar esta atual, alguém ajuda?

    ResponderExcluir
  40. parabééns, fico perfeito....
    só quero fala uma coisinha:
    alguns templates (certamente os que ja usavam o leia mais só que noutra pagina, como eu) dão um erro xml...
    isso porque
    quando substituem o html antigo pelo novo, fica assim no final:
    <*div style='clear: both;'/>
    <*/div>[b]<*/div>[/b]

    peça para apagarem o segundo div (que pra mim é do código velho) e prontinho!

    ResponderExcluir
  41. obrigadoo!!
    Foi de grande ajuda esse post!!!

    ResponderExcluir
  42. Olá, gostaria de saber como faço para que este hack exiba uma listagem dos posts com o marcador relacionado em vez de um resumo de cada postagem, pois para quem posts grandes causa uma certa lentidão no carregamento da página do marcador. É possível realizar como disse?

    ResponderExcluir
  43. Oi Áurea,

    Interessante esse seu "hack", mas eu procuro um outro que também pode interessar a muitos dos seus leitores.

    Não existe um "HACK" para o template que faça com que todos os links abram em uma nova página (ie) ou nova aba (firefox, etc)?

    Estou interessado num "hack" para o blogger.

    Se conhece algo, por favor, avise-me.
    Obrigado.

    Atentamente,
    Rui Azevedo - Online Carros

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.