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...
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 < 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 < 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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (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
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 ;)
naum intendi direito, a segunda parte do codigo,simplesmente naum existe no template, ficou confuso.
tem q colocar ele todo?! onde ?!
Valeu
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.
Ricardo Boa Tarde!
Gostaria de saber como faço para trocar afrase " Leia Mais" por um gif
Obrigasdo aguardo sua resposta
Carlos
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...
Bom dia!
Foi exatamente essse código que usei e sempre dá erro. E agora?
Te aguardo abraços
Carlos
Pois...o blogger usa XHTML em vez de HTML, usa este:
<img src="endereço da imagem" />
Obrigado o código era este
Abraços
Carlos
Enviar um comentário