Artigos expandiveis nas páginas de categorias e arquivos do Blogger

Por | 24 de Julho de 2007

Uma das preocupações dos bloggers é ter um blog que carregue o seu conteúdo rapidamente, por exemplo ao clicar nos arquivos/categoria de um blog a sua apresentação demora especialmente se existirem muitas imagens. Ramani um dos hackers mais conhecidos no blogger encontrou uma maneira de reduzir esse tempo, dei-lhe a ideia e depois ele apareceu com o código . Geralmente os títulos de um post/artigo indicam do que se trata o mesmo então porque não só mostrar o título e deixar á escolha do visitante ver o conteúdo? Depois de instalar este hack os visitantes do seu blog ao clicarem nos arquivos/categorias apenas vêm os títulos dos posts, para mostrar o conteúdo bastará clicar nos sinais “+ -” antes do título.

Clique em Ler mais para as instruções:

1º- Faça um backup do template do template do seu blog

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.

<script type=”text/javascript”>
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 &lt; spans.length; i++) {
if (spans[i].id == “fullpost”)
spans[i].style.display = ‘inline’;
if (spans[i].id == “readmore”)
spans[i].style.display = ‘none’;
}
}

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>

4º – Localize no template o seguinte código e insira as linhas a vermelho:

<b:includable id=’PeekABooPost’ var=’post’>
<div class=’post uncustomized-post-template’>
<table><tr>
<td width=’40px’>
<a href=’javascript:void(0)’ title=’Expand/collapse this post’ style=’text-decoration:none’ expr:onclick='”javascript:toggleIt(\”” + data:post.id + “\”);”‘>[+/-]</a>
</td>
<td>
<h3 class=’post-title’><a expr:href=’data:post.url’><data:post.title/></a></h3>
</td>
</tr></table>
<div class=’post-body’ expr:id=’data:post.id’ style=’display:none’>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
</div>
</b:includable>

<b:includable id=’main’ var=’top’>
<!– posts –>
<div id=’blog-posts’>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.dateHeader’>
<h2 class=’date-header’><data:post.dateHeader/></h2>
</b:if>

<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:include data=’post’ name=’PeekABooPost’/>
<b:else/>
<b:include data=’post’ name=’post’/>
</b:if>
<b:else/>

<b:include data=’post’ name=’post’/>

</b:if>

<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:post.allowComments’>
<b:include data=’post’ name=’comments’/>
</b:if>
</b:if>
</b:loop>
</div>

5º – Grave o seu template.

Fonte: Hackosphere

Na Aldeia mais digital de Portugal – Beijós

4 thoughts on “Artigos expandiveis nas páginas de categorias e arquivos do Blogger

  1. Anonymous

    mal explicado nao entendi nada na parte 4 seria mais facil fazer uma substituição ao invéz de inserir ficou mais dificel e da conflito

  2. Ricardo Santos

    Anónimo said…
    mal explicado nao entendi nada na parte 4….

    4ª parte do guia
    Localize no template o seguinte código e insira as linhas a vermelho:

    Olá. Não percebo onde está mal explicado, eu escrevi localize e insira, é só localizar o código a “preto” e inserir antes e depois os códigos a vermelho.

    o código foi testado nos temas disponibilizados no blogger, se não funciona é porque o tema que estás a utlizar ou já tem muitos hacks e entra em conflicto com outro hack ou o template está mal formatado

    >Ajudava se deixasses um link para o blog onde está a dar o erro……

  3. Joana Morais

    Olá Ricardo preciso da tua ajuda, estive a ler o teu post “Artigos expandiveis nas páginas de categorias e arquivos do Blogger” ,o que se passa é que já tinha préviamente instalado essa hack mas não funciona. Gostava que desses uma vista de olhos no template do blog Graça Morais, acho que falta qualquer coisa no template mas tenho receio de modificar o script e retirar a funcionalidade de RSS de cada categoria. Por favor vê o documento que estou a partilhar contigo e diz-me que alterações devo fazer. beijinhos, Joana Morais

Deixe uma resposta

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