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:
Passo 3: Salve seu template!
Agora, quando você for escrever um post, no modo EDITAR HTML, basta usar o seguinte esquema:
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:
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?!...
Continue Lendo...
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.