Panfleto - Edinho Tattoo.com

Noticiado em: segunda-feira, 20 de outubro de 2008

(clique para ampliar)

Lightbox no Blogger - Álbum de fotos

Noticiado em: segunda-feira, 13 de outubro de 2008

Primeiramente peço para que façam uma visita a página Álbum de fotos - Lightbox onde se encontra o exemplo do que será explicado neste post, que é como montar um álbum de fotos no Blogger usando o lightbox.

... Mas, para quem não quer perder tempo abrindo uma nova página, basta clicar na imagem abaixo e ter uma pequena idéia.

Vamos então as explicações.

A primeira coisa a ser feita é ir a esse site e fazer o download do plugin lightbox V2.04.

O único trabalho que você terá agora é dezipar o arquivo e fazer algumas modificações em seu código!

- Hospede (recomendo google pages) 4 das imagens que estão na pasta “Images”; são elas:

• Closelabel.gif
• Loading.gif
• Nextlabel.gif
• prevlabel

- Abra o "lightbox.css" (dentro da pasta CSS) e substitua:

* url(../images/prevlabel.gif);

por

url("Link da imagem hospedada prevlabel.gif");

* url(../images/nextlabel.gif);

por

url("Link da imagem hospedada nextlabel.gif");

- Abra o lightbox.js e substitua:

* fileLoadingImage: 'images/loading.gif',

* fileBottomNavCloseImage: 'images/closelabel.gif',

por

* fileLoadingImage: “Link da imagem hospedada loading.gif',

* fileBottomNavCloseImage: “Link da imagem hospedada closelabel.gif',

A primeira parte está feita. Agora vamos hospedar os códigos javascript e CSS.

• lightbox.css
• builder.js
• effects.js
• prototype.js
• scriptaculous.js
• lightbox.js

Depois de hospedado os códigos, vamos ao Painel do Blogger >>> Layout / Elementos da página >>> E Adicionar um Gadget HTML/javascript. Agora basta colar essas 4 linhas de código fazendo as modificações que estão em destaque (azul).

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';cssNode.rel = 'stylesheet';
cssNode.href = 'Link (url) do código hospedado lightbox.css';
cssNode.media = 'screen';
cssNode.title = 'using lightbox 2 with GPC';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>

<script src=" Link (url) do código hospedado prototype.js" type="text/javascript"></script>

<script src=" Link (url) do código hospedado scriptaculous.js?load=effects,builder" type="text/javascript"></script>

<script src=" Link (url) do código hospedado lightbox.js" type="text/javascript"></script>

E finalmente a última parte, que é chamar as imagens nas postagens com os seguintes códigos:

Para chamar uma imagem:

<a rel="lightbox" href="URL da Imagem"><img src="http://URL do Thumbnail" border="0"/></a>

Ou uma série de imagens (slideshow):

<a href=" URL da Imagem #1.jpg" rel="lightbox[Série]">Expressão de Link #1</a>
<a href=" URL da Imagem #2.jpg" rel="lightbox[Série]">Expressão de Link #2</a>
<a href=" URL da Imagem #3.jpg" rel="lightbox[Série]">Expressão de Link #3</a>

Em lightbox[Série], basta colocar entre colchetes o nome a série de desenhos relacionadas. Exemplo:

rel="lightbox[album] ", rel="lightbox[desenhos]", etc...

Para mudar alguns termos para o português é só editar as imagens e procurar no código (lightbox.js) palavras que estão em inglês e trocar pelo português. (Ctrl+f, ok?)

Qualquer dúvida é só postar um comentário! ;-)

Para quem usa arquivos javascript – plugin lightbox, emoticons, etc... – aconselho os serviços logo abaixo.

• Ripway 
• Dropbox 
• SkyDrive – Basta ter uma conta no Hotmail.

Com o Dropbox eu não obtive sucesso. O Skydrive eu nunca testei, mas já li relatos de pessoas que usaram e se deram muito bem.

Já com o Ripway eu não tive nenhum problema. Aliás, foi tudo muito fácil. Recomendo esse serviço para as pessoas que usam plugins do tipo Lightbox, pois é bem cômodo e intuitivo usar o serviço Ripway.

Alguns prints logo abaixo para vocês perceberem essa facilidade (clique na imagem para ampliar):

 

 

Colocando Favicon no Blogger

Noticiado em: domingo, 5 de outubro de 2008

Código simples e eficiente para quem deseja colocar um favicon em seu Blog.

Com esse código é possível acrescentar também no Internet Explorer, já que algumas pessoas têm problemas em adicionar favicon nesse navegador (nem falo nada!).

Vamos para algumas dicas agora:

Quando você for montar seu favicon, escolha o tamanho 32x32.

Se você hospeda suas imagens no Google Sites, desista, pois não irá funcionar.

Hospede no Google Pages ou em outra página de sua preferência e faça os testes!

Você vai precisar de uma imagem PNG (recomendo fazer isso no Photoshop, pois assim a imagem ficará bem mais leve que no Fireworks).

E de outra imagem no formato ICO... Que você poderá converter nesse site:

Converticon

Agora vamos para o código:

<link href='Link.PNG' rel='icon' type='image/png'/>

<link href='Link.ICO' rel='shortcut icon' type='image/x-icon'/>

Basta agora substituir o Link.PNG e Link.ICO pelo endereço onde foram hospedadas as imagens.

Algumas tutoriais dizem que o código deve ser colado logo após essa linha de código:
]]></b:skin>
... No meu caso, eu o colei logo abaixo das tags <title> </title> e funcionou perfeitamente!
Faça seus testes e boa sorte!