Com as novas mudanças de html do Neo, muita gente encontra-se perdida na hora de fazer Lookups e Petlookups. Devido a isso, resolvi criar este tuto para afim de ajudar a todos!

Esse modelo de Petlookup que irei ensinar é bem simples, consiste em um Banner e um Fundo.

Veja 2 Modelos:

Exemplo 1 [click]
Exemplo 2 [click]

Siga os seguintes passos e veja como é fácil fazer o seu próprio Petlookup =}

Abra o seu Editor de Imagens (Eu uso Fireworks CS4 e Photoshop CS4).

Crie um arquivo de tamanho 800x100. (Este será nosso banner)

Cores, fontes e imagens ficam a seu critério.

Assim que terminar, salve e hospede seu arquivo.

Ainda no seu editor de imagen, crie um novo arquivo de tamanho 100x100, este será o fundo do Petlookup.
P.S. O seu fundo pode ter qualquer tamanho!

Assim que terminar, salve e hospede seu arquivo.

Bom, agora você irá mexer no Código HTML. Cores e Fontes ficam a seu critério.

Cópie o código e coloque o endereço do seu Banner e do seu Fundo (que já estão hospedados) onde diz BANNER e FUNDO.

<style type="text/css"> body { background: #FFF -blocked- DO -blocked-; } font, td, p, i, div body, table, tr, td, a, font, p { letter-spacing: 1px; font-family: Arial,Helvetica,sans-serif; font-size: 8pt; color: #666; } a:link { color: #9C6DD7; text-decoration: none; } a:visited { color: #9C6DD7; text-decoration: none; } a:hover { color: #9C6DD7; background-color: #FFF1FE; } strong { font-size: 10px; color: #864BCE; border-bottom: #E4B2E5 1px dashed; font-family: Arial,Helvetica,sans-serif; } #main, .content { background: none; border: none; width: 800px; } #content { width: 800px; background: #FFF -blocked- DO -blocked- top left no-repeat; padding-top: 110px; border: 1px solid #AC8AD6; margin-top: 100px; } #header, #footer, .sidebar, #ban, .adBox, hr { display: none; } .contentModuleHeader { background: #AD8AD6; } .contentModuleHeaderAlt { background: #AD8AD6; } .contentModuleTable { border-color: #FFF1FE; border-width: 1px; border-style: dashed; background-color: #FFF; } .contentModule { background-color: #AC8AD6; border: 1px solid #AD8AD6; } #descricao { text-align: center; font-size: 10px; color: #AD8AD6; border-bottom: #FFF1FE 1px dashed; font-family: Arial,Helvetica,sans-serif; background-color: #FFF; } </style>/> <div id="descricao"> AQUI VAI A DESCRIÇÃO DO SEU PET, IMAGENS, O QUE DESEJAR! <p align="center"><a href="/~Flocw" title="Tuto de Petlookups"><img style="width: 100px; height: 50px;" src="http://i194.photobucket.com/albums/z31/alfazema/Tuto-Petlookup/Link-me3.png" alt="Tuto de Petlookups" border="0" height="50" width="100"></a></p> </div>

Escreva uma descrição do seu Pet, mude as cores, desenhe, e pronto! Vc acaba de terminar um lindo Petlookup!

Super fácil, não? =)

Espero ter ajudado você, qualquer dúvida, só mandar um neomail!

Ah! E não esqueça de me linkar! =]

Pessoas que não colocarem os devidos créditos, serão reportadas!

<a href="/~Flocw" title="Tuto de Petlookups"><img style="width: 100px; height: 50px;" src="http://i194.photobucket.com/albums/z31/alfazema/Tuto-Petlookup/Link-me3.png" alt="Tuto de Petlookups" border="0" height="50" width="100"></a>


<a href="/~Flocw" title="Tuto de Petlookups"><img style="width: 100px; height: 50px;" src="http://i194.photobucket.com/albums/z31/alfazema/Tuto-Petlookup/Link-me1.png" alt="Tuto de Petlookups" border="0" height="50" width="100"></a>


<a href="/~Flocw" title="Tuto de Petlookups"><img style="width: 100px; height: 50px;" src="http://i194.photobucket.com/albums/z31/alfazema/Tuto-Petlookup/Link-me2.png" alt="Tuto de Petlookups" border="0" height="50" width="100"></a>