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

LEIA MAIS - EFEITO EXPANDIR/OCULTAR TEXTO

maio 09, 2009 Comente este artigo!: 6
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.


Continue Lendo...

Escala de cores hexadecimais

maio 02, 2009 Comente este artigo!
Muitas vezes, quando vamos alterar o template de nosso blog, deparamo-nos com um pequeno mas chato problema: Qual o código hexadecimal da cor que queremos usar?

No Widgetbox, dentre muitas outras coisas super interessantes, temos uma ótima solução.

Veja, na escala abaixo, como é fácil definir qualquer cor. Basta clicar e arrastar os dois pequenos círculos abaixo e a cor já é automaticamente mostrada, na caixa "COLOR", com o seu respectivo código.



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.


Continue Lendo...