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'/>
<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>
<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'/>
<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.
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.
Comente este artigo!: 6
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...
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!
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
setembro 07, 2009 9:49 PM
porque nao tem como faser isso duas veses na mesma postagem
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!
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!