English Spain Français Deustsch Italiano Japan Russia Korea
Get this Widget by inWEBblog

LEIA MAIS - EFEITO EXPANDIR/OCULTAR TEXTO

Existem vários “estilos” de Leia Mais..., Ler Mais..., Continue Lendo... ou da forma que você quiser chamar. Inclusive o utilizado neste blog, que divide o texto, automaticamente, a partir de um determinado número de caracteres, mas neste post vamos aprender um estilo diferente, com efeito slide, usando o JQUERY.

A implementação deste processo é bastante simples, com a inclusão de apenas duas (2) linhas no código de seu template, para a chamada da biblioteca JQuery, e o inicializador do evento (Start).

Vamos começar?

Passo 1: Logado no Painel de seu Blogger/Blogspot, vá a LAYOUT, Editar HTML (Não é necessário Expandir Modelos de Widgets!) e localize (Use CTRL + F) a linha de código <head>.

Passo 2: Copie as duas (2) linhas de código a seguir e cole logo abaixo dela:

<script src='http://dl.getdropbox.com/u/814038/jquery.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/814038/start.js' type='text/javascript'/>

Passo 3: Salve seu template!

Agora, quando você for escrever um post, no modo EDITAR HTML, basta usar o seguinte esquema:

Início do Post
<div id="maisinfo">
Restante do Post. (Este bloco de texto ficará oculto)
</div>

DICA: Para facilitar seu trabalho, copie este código e vá a CONFIGURAÇÕES > FORMATAÇÃO > MODELO DE POSTAGEM e cole-o na caixa de texto, depois é só SALVAR CONFIGURAÇÕES, que toda vez que você for fazer um post este código já estará à sua disposição.

O resultado final é este!...

Que tal, gostou desta dica?!...

Mas vejamos, agora, alguns pontos importantes:

Os arquivos (.js) que você está usando (nas duas linhas adicionadas ao seu template) apontam para meus arquivos pessoais. O ideal é que você baixe estes arquivos e hospede-os em seu próprio site de hospedagem. Se você não tem um, ou não sabe como fazer isto, eu recomendo que você leia este post sobre o Dropbox, que eu recomendo firmemente.

Feito isto, copie a url dos mesmos e substitua as inseridas no seu template, que deverá manter a seguinte estrutura:

<script src='url_de_ seu_arquivo_jquery.js' type='text/javascript'/>
<script src='url_de_ seu_arquivo_start.js' type='text/javascript'/>

Para baixar os arquivos citados acima, clique nestes links: jquery.js e start.js.

Caso ocorra ruptura do link do JQuery, como por força do lançamento de uma nova versão, por exemplo, acesse o site (clicando aqui!) e faça o download do referido arquivo.

O arquivo start.js (que dispara o evento) está configurado para ecrever, no local onde você colocou <div id="maisinfo">, a expressão Ler [+] / Ocultar [-], mas você poderá substituí-la por qualquer outra de seu agrado. Para tanto, basta abrir o arquivo start.js no Bloco de Notas (Notepad) do Windows e alterar esta parte citada, TENDO O CUIDADO DE, AO SALVA-LO, USAR OS SEGUINTES PASSOS: ARQUIVO>SALVAR COMO>SALVAR COMO TIPO: TODOS OS ARQUIVOS, PARA QUE SEJA MANTIDA A EXTENSÃO .JS!

Pronto! Fácil, não?!... 



GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.


Postar um comentário

Comente este artigo!: 6

Ueda GRILL :
maio 21, 2009 12:26 PM

Ué?
No seu blog funciona.
Testei no meu e não foi.
Que será que deu errado? Fiz exatamente como ensina...

Inácio Rolim :
maio 21, 2009 1:07 PM

Cara Ueda GRILL,

Andei "fuçando" seu código fonte e não vi as chamadas dos 2 arquivos .JS, logo após a tag indicada (head), como explicado. Acredito que aí é que está o problema. Tente novamente e Boa Sorte.

Ah!... Que belo amanhecer você deve ter, com aquele sol na sua janela!

Realidade Oculta :
setembro 07, 2009 2:49 PM

Muito bom seu blog !
So que eu também não consiguir fazer esse négocio ai...

podee entra em contato ?

lucasdaniel007@hotmail.com

Wanderson :
setembro 07, 2009 9:49 PM

porque nao tem como faser isso duas veses na mesma postagem

Blog Revista 2x2 :
outubro 08, 2009 8:25 AM

Inácio,

Tô batendo cabeça já faz um tempo. Fiz tudo que você ensinou inclusive o DropBox mas não acontece nada. Preciso fazer um blog para um disciplina do faculdade e tenho tempo para entregar. Fiz uma entrevista que ficou grande e a professora me indicou a possibilidade de criar um link para cada pergunta/resposta. Não tenho a mínima idéia de como fazer isso, mas encontrei o seu texto e gostei muito. Por favor, me responda porque eu preciso fazer isso logo!

Abraço!

Blog Revista 2x2 :
outubro 08, 2009 8:26 AM

Pode ser algum problema com o navegador?

Postar um comentário

Em Comentar como: selecione seu perfil (Nome/URL é o mais comum) e fique à vontade para fazer seu comentário. Critique, dê sugestões e, se for o caso, elogie!

Este blog, agora, é "dofollow", assim, os links nos COMENTÁRIOS estão livres de "nofollow"!
-----------------------------------------------------------------------------------
OBSERVAÇÕES IMPORTANTES | NOTIFICAÇÕES | AVISOS LEGAIS
-----------------------------------------------------------------------------------
1. Os comentários aqui exibidos refletem, exclusivamente, as opiniões isoladas dos visitantes do blog!
2. O Administrador deste blog não se responsabilizará, em hipótese nenhuma, por quaisquer danos que, por ventura, estes venham causar, a quem quer que seja!
3. Mensagens com SPAM ou que não tenham relação com o conteúdo do post não serão toleradas.
4. Para maiores detalhes, leia a POLÍTICA DE PRIVACIDADE e os TERMOS DE USO deste blog!

Obrigado!

Início