Cursos 24 Horas - Cursos 100% Online com Certificado

Resumo automático com JQuery

3 Comentários Autor : Notícia e blog 01 setembro 2009
Mais um hack da serie JQuery, este hack resume a postagem e deixa um link de leia mais, facilitando o carregamento da página e facilitando a leitura dos artigos. Vamos a instalação deste hack:


1.Faça login no Blogger


2.Vá para Layout->Editar html ->Marque a caixinha Expandir modelos de widget*
E utilizando as teclas Ctrl e F procure pelo código abaixo:
</head>
Agora coloque este código antes do código acima:
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Leia mais...]', // default is 'read more...'
});

});
</script>

Nota: O código em vermelho é o texto que será apresentado no link, pode ser leia mais...,continue lendo...,entre outros. O código em amarelo é a quantidade de caracteres do resumo sendo o mínimo 100, se quiser um resumo mais curto coloque 100 para um resumo médio 280 e grande coloque 400 ou um número de sua preferência.

3.Agora procure pelo código seguinte:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <! - clear for photos floats ->
</ div>

E substitua pelo código abaixo:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Salve as alterações e pronto seu resumo já está instalado.Aproveite e deixe um comentário!




Outros posts da serie JQuery <  1,2 >


    3 Comentários

    Topera disse...
    27 de novembro de 2009 19:52 #

    Otima dica amigo

    mas falta uma coisinha, não ?

    a linha "userCollapseText: '[Terminei de ler]' // default is '[terminei]'"

    logo abaixo de "expandText: '[Leia mais...]', // default is 'read more...'"

    =]

    Ana Carvalho disse...
    15 de setembro de 2010 01:24 #

    Ai eu fiz tudo certinho, mas não consegui

    PAIXAOdaGAMA disse...
    7 de dezembro de 2010 11:41 #

    Postagens com fotos tem problemas para executar o comando.

    tem como resolver???

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.