LEIA MAIS - EFEITO EXPANDIR/OCULTAR TEXTO
Aqui vai a introdução da postagem.
Aqui vai o resto da postagem.
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 oDropbox ,
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'/>
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?!...
Comentários
Postar um comentário