THE BLOG THAT WAS HERE HAS MOVED, YOU'LL BE REDIRECT IN 10 SECONDs, IF YOU'RE NOT REDIRECT CLICK HERE, PLEASE UPDATE YOUR BOOKMARKS.

O BLOGUE MUDOU-SE, VAI SER REDIRECCIONADO(A) EM 10 SEGUNDOS, SE NÃO FOR REDIRECCIONADO CLIQUE AQUI E ACTUALIZE OS SEUS FAVORITOS.

Artigos recentes

24 julho 2007

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

postado por: Ricardo Santos

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

Comments 4 comments
Anónimo disse...

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

Ricardo Santos disse...

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......

Joana Morais disse...

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

Ricardo Santos disse...

Olá Joana!
Hoje já dou uma olhada no template.

Categorias

Subscribe feeds rss Comentários recentes

Subscribe feeds rss Artigos recentes