Posts – Artigos expandiveis para o Blogger

Por | 21 de Julho de 2007
Neste post irei explicar como ter a possibilidade de ter posts expandiveis (AKA Peekaboo)no blogger. Desta forma podemos sintetizar/sumário acerca do que o post vai ser e dar a escolha ao leitor se quer ler mais, ao escolher ler mais o resto do post aparece tal como por magia.

Este post é um exemplo do que um post expandivel é, fiz um sumário acerca do que se trata, para instruções em como instalar no blogger clique em Ler mais…

2º- Na área de administração do seu blog clique em >>> MODELO >>> EDITAR HTML

3º- Localize no código a secção </HEAD> e insira o código seguinte imediatamente antes dessa secção.

<b:if cond=’data:blog.pageType != “item”‘>
<script type=”text/javascript”>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(‘span’);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == “fullpost”) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else 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 &lt; spans.length; i++) {
if (spans[i].id == “fullpost”) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else 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 &lt; spans.length; i++) {
if (spans[i].id == “fullpost”) {
spans[i].style.display = ‘none’;
found = 1;
}
if ((spans[i].id == “showlink”) &amp;& (found == 0))
spans[i].style.display = ‘none’;
}
}

</script>
</b:if>

4º- Localize a seguinte secção no código e insira o código a vermelho, depois de inserir o código gravam o modelo

<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 + “\”);”‘>Ler mais…</a></p>
</span>
<span id=’hidelink’ style=’display:none’>
<p><a href=’javascript:void(0);’ expr:onclick='”javascript:hideFull(\”post-” + data:post.id + “\”);”‘>Voltar…</a></p>
</span>
<script type=’text/javascript’>
checkFull(“post-” + “<data:post.id/>”);
</script>
</b:if>

<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

5º- Na área de administração cliquem em DEFINIÇÕES >>> FORMATAÇÃO >>> andam para o fundo da página e na caixa MODELO DE MENSAGEM insiram o seguinte código e de seguida clicam na opção GUARDAR DEFINIÇÕES

Escreva aqui o seu sumário
<span id=”fullpost”>
Escreva aqui o resto do post
</span>

6º- Agora ao escrever um post notará que
aparece as seguinte frases por pré-definição:

Escreva aqui o seu sumário

Escreva aqui o resto do post

Basta substituír estas 2 frases pelo texto adequado e publicar, se não deseja ter este efeito em todos os posts, clique em EDITAR HTML na caixa que aparece quando cria um post e apague o código que foi inserido no passo 5.

Fonte: Hackosphere

Na Aldeia mais digital de Portugal – Beijós

8 thoughts on “Posts – Artigos expandiveis para o Blogger

  1. Joana Morais

    Olá Ricardo, descobri.. uf… faltava isto para “Peekaboo posts with summary in main page” hack : style #fullpost {display:none;} /style.
    Nota -> (está sem <> para poder comentar…) – tinha-me esquecido que para usar o fade in/out do scriptaculous era necessário retirar está linha, ainda bem
    que escreves-te o código. Mas agora deparo-me com outro problema, o hack de “Peek-A-Boo view of posts in label/archive pages” não está a funcionar; estive a ver o site do Ramani mas os scripts, como sabes já não existem, então fui ao site de onde fiz o download do “3 column Minima Templates modded for new blogger” do Protesto e já lhe pedi ajuda… O demo dele também não funciona, portanto estou um bocadinho mais aliviada por ver que não é só no meu site. Entretanto vou brincar no neo, ah! reparei que estás a usar o Rounder Neo, eu tou com uma mistura do teu, e do EboNeo. bjns e obrigada 😉

  2. Betto S.

    naum intendi direito, a segunda parte do codigo,simplesmente naum existe no template, ficou confuso.

    tem q colocar ele todo?! onde ?!

    Valeu

  3. Ricardo Santos

    Betto S, o código aqui posto é para os templates pré-definidos do blogger, estás a usar um template “modificado” e nem todos os webmasters seguem as “mesmas linhas” dos templates originais.

    Já expandiste o template para veres a totalidade do código? deixa aqui o teu mail se precisares de mais ajuda.

  4. r

    Ricardo Boa Tarde!
    Gostaria de saber como faço para trocar afrase ” Leia Mais” por um gif
    Obrigasdo aguardo sua resposta
    Carlos

  5. Ricardo Santos

    Olá carlos, obrigado pela visita.

    Para substituir o Ler mais… substui esse texto no código por este:

    <img scr='endereço da imagem'>

    O mesmo também se aplica se quiseres trocar o texto Voltar…

  6. ICPNI

    Bom dia!
    Foi exatamente essse código que usei e sempre dá erro. E agora?
    Te aguardo abraços
    Carlos

  7. Ricardo Santos

    Pois…o blogger usa XHTML em vez de HTML, usa este:

    <img src="endereço da imagem" />

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *