AnnyDummont got their homepage at Neopets.com

Home

Sejam todos muito bem vindos à Cakes&Coffee!
Está a procura de algum tutorial? Simples, primeiro leia as regras, por favor, depois, é só dar uma passada lá nos tutoriais!
Aqui tem tutorial de tudo quanto é tipo, tem de HTML, contador, linke-me, codificação...
Enfim, divirta-se e aprenda muito aqui! Esta petpage foi feita com muito carinho e dedicação para lhe ajudar!

Atualizações Antigas

22/10 - Inauguradoo!

22/10 - Novo tutorial! Códigos Básicos de CSS

22/10 - Em breve: Moldes de Layouts

Regras

Infelizmente, tive que criá-las, já que tem muita gente que insiste em desrespeitá-las. É rápido, são só três regrinhas.

Não copie nada daqui, nem uma letrinha
Se os tutoriais te ajudaram, que ótimo :D Só não esqueça de nos linkar
Não faço encomendas

Contínuo

Em breve mais moldes.

Molde Contínuo

Obs: Arraste até o navegador para ver em tamanho original.

TEXTO CAIXINHA PEQUENA TEXTO CAIXINHA PEQUENA TEXTO CAIXINHA PEQUENA TEXTO CAIXINHA PEQUENA TEXTO CAIXINHA PEQUENA TEXTO CAIXINHA PEQUENA

</div>

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

</div>

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 2

<center>Molde de layout por:</center>
<br><center><a href="http://www.neopets.com/~AnnyDummont"><img src="http://i928.photobucket.com/albums/ad125/Lolitalol/Kawaiialbum/Buttonfly/linkmeCC.gif" border="0"></a></center>

<br><br><br><a href="#moldes">Voltar</a>

</div>

<div id="pag">
<a name="mncont"><center>Molde Não-Contínuo</center></a>

<p>Obs: Arraste até o navegador para ver em tamanho original.
<br><br><br></p>
<center>
<img src="http://i53.tinypic.com/2ihtt07.png" height="150" width="150"><br><textarea id="caixinha"><div style="position: absolute; top: 0; left: 0;">
<p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p>
</div>

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

<br><br><br><a href="#moldes">Voltar</a>

</div>

<div id="pag">
<a name="mmulti"><center>Molde Multipágina</center></a>

<p>Obs: Arraste até o navegador para ver em tamanho original.
<br><br><br></p>
<center>
<img src="http://i51.tinypic.com/rhu04h.png" height="150" width="150"><br><textarea id="caixinha"><img src="-blocked-" border="0" style="position: absolute; top: 0; left: 0;"><style>
a:link {
	color: -blocked-;
	text-decoration: none;
}
a:hover {
	color: -blocked-;
	text-decoration: none;
}
a:visited {
	color: -blocked-;
	text-decoration: none;
}
#klays {
	overflow: hidden;
	left: 169px;
	top: 175px;
	width: 672px;
	height: 28px;
}
#pag {
	overflow: auto;
	width: 672px;
	height: 28px;
}
</style>
<div style="position: absolute; width: 675px; overflow: auto; height: 345px; left: 169px; top: 233px;">

<a href="#pag1">»Página 1</a><p>
<a href="#pag2">»Página 2</a></p>
<p>
<a href="#pag3">»Página 3</a></p>
<p>
<a href="#pag4">»Créditos</a></p>
<p>

</p>
</div>

<div id="klays" style="position: absolute;">
<div id="pag">
<a name="pag1">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag2">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag3">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag4">Créditos</a>

<p></p>
<center>Molde de layout por:</center>
<br><center><a href="http://www.neopets.com/~AnnyDummont"><img src="http://i928.photobucket.com/albums/ad125/Lolitalol/Kawaiialbum/Buttonfly/linkmeCC.gif" border="0"></a></center>
<br><br><br><img src="http://i54.tinypic.com/j8039g.png" height="150" width="150"><br><textarea id="caixinha"><img src="-blocked-" border="0" style="position: absolute; top: 0; left: 0;"><style>
a:link {
	color: -blocked-;
	text-decoration: none;
}
a:hover {
	color: -blocked-;
	text-decoration: none;
}
a:visited {
	color: -blocked-;
	text-decoration: none;
}
#klays {
	overflow: hidden;
	left: 185px;
	top: 172px;
	width: 153px;
	height: 339px;
}
#pag {
	overflow: auto;
	width: 153px;
	height: 339px;
}
</style>
<div style="position: absolute; left: 246; top: 343; width: 546; height: 257;">

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 2

</div>

<a href="#pag1">»Página 1</a><p>
<a href="#pag2">»Página 2</a></p>
<p>
<a href="#pag3">»Página 3</a></p>
<p>
<a href="#pag4">»Créditos</a></p>
<p>

</p>
</div>

<div id="klays" style="position: absolute;">
<div id="pag">
<a name="pag1">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag2">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag3">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag4">Créditos</a>

<br><br><br><a href="#moldes">Voltar</a>

</div>

<div id="pag">
<a name="parceiros"><center>Parcerias</center></a>

<p><a href="/~Hyerl"><img src="http://i683.photobucket.com/albums/vv195/aninhaarv/animalinkmeimage.gif"></a><a href="/~_figurinha_"><img src="http://img267.imageshack.us/img267/4626/botoons.png" border="0" alt="Neoplace'"></a><a href="http://neopets.com/~pterywe"><img src="http://img826.imageshack.us/img826/4653/laysdaflohlinkme1.gif" border="0"></a><a href="/~miyrela"><img src="http://i928.photobucket.com/albums/ad125/Lolitalol/Kawaiialbum/Buttonfly/linkmeAUE.gif" border="0"></a><a href="http://www.neopets.com/~chaase_77"><img src="http://i54.tinypic.com/5l3u4p.jpg" border="0"></a><a href="/~Tawdo"><img src="http://i52.tinypic.com/2nlb6hl.jpg" border="0"></a><a href="/~syndaey"><img src="http://i909.photobucket.com/albums/ac293/belahfraga/buttom2.gif" border="0"></a> <a href="/~kakyana"><img src="http://img705.imageshack.us/img705/6007/39896903.gif" border="0"></a><a href="/~Equoss"><img src="http://i854.photobucket.com/albums/ab101/Infel239/TheJoker.gif" border="0" title="The Joker..."></a>
<br><br><br>
Quer ser parceiro? Envie um <a href="http://www.neopets.com/neomessages.phtml?type=send">neomail</a>!

<br><br><a href="#sobre"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0"> Voltar</a></p>
<p>

</p>
</div>

<div id="pag">
<a name="tutos"><center>Tutoriais</center></a>

<p><a href="#html"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Códigos Básicos de HTML</a></p>
<p>
<a href="#contadores"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Contadores</a></p>
<p>
<a href="#linkeme"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Linke-mes e Awards</a></p>
<p>
<a href="#codificar"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Codificando Layouts</a></p>
<p>
<a href="#nav"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Menu de Navegação</a></p>
<p>
<a href="#multi"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Petpage Multipágina</a><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/new/26.gif"></p>
<p><a href="#text"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Caixinha de Texto</a><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/new/26.gif"></p>
<p><a href="#css"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Códigos Básicos de CSS</a><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/new/26.gif"></p>
<p><a href="#moldes"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0">Moldes de Layouts</a><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/new/26.gif"><br><br><br><a href="#home"><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/home/22.gif" border="0"></a>
</p>
</div>

<div id="pag">
<a name="css"><center>Códigos Básicos de CSS</center></a>

<p>Em breve mais códigos. 
<br>Obs: no lugar de COR, coloque a cor escolhida de acordo com a  <a href="#cores">Tabela de Cores</a>
<br><br></p>
<center>
<b>Negrito</b> 
<center>
<textarea id="caixinha">b {color:#COR;}

Sublinhado

Italico

Cor do Link

Cor do Link Visitado

Cor do Link Ao Passar o Mouse

Tamanho da Fonte

Tabelas

Tabela de Cores

Tabela de Tamanhos

Caixinha de texto Saber como se faz uma dessas é fundamental. Afinal, como você acha que as pessoas vão pegar o código do seu linke-me se você não o colocar em uma caixa de texto, por exemplo?
É bem facil de fazer, observe:

Muito cuidado! Não esqueça de por o "_" (underline), se você esquecer, você perde todo o seu código e tem que recomeçar do zero.

Petpage Multipagina Isso aí, um cantinho só pra layout multipagina, já que o processo é tão elaborado. Tem 2 fases:

Começando

Mãos a obra!

Tabela de Cores

Começando - Petpage Multipágina 1. Criando o seu layout multipagina
Você pode fazer quantas caixinhas você quiser, mas deve ter uma pra só navegação a outra só pro conteúdo. Deve.

2. Estudando o código
Agora eu vou apresentar o que cada parte do código significa. Então preste muita atenção.

Caso você não saiba codificar, aqui
3. Como funciona?

Agora que você entendeu tudo (espero -rs), podemos começar!

Mãos a obra! - Petpage Multipágina O código completo é esse:

<img src="-blocked-" border="0" style="position: absolute; top: 0; left: 0;"><style>
a:link {
	color: -blocked-;
	text-decoration: none;
}
a:hover {
	color: -blocked-;
	text-decoration: none;
}
a:visited {
	color: -blocked-;
	text-decoration: none;
}
#klays {
	overflow: hidden;
	left: -blocked-;
	top: -blocked-;
	width: -blocked-;
	height: -blocked-;
}
#pag {
	overflow: auto;
	width: -blocked-;
	height: -blocked-;
}
</style>
<div style="position: absolute; width: -blocked-; overflow: auto; height: -blocked-; left: -blocked-; top: -blocked-;">

<a href="#pag1">»Página 1</a><p>
<a href="#pag2">»Página 2</a></p>
<p>
<a href="#pag3">»Página 3</a></p>
<p>
<a href="#pag4">»Página 4</a></p>
<p>

</p>
</div>

<div id="klays" style="position: absolute;">
<div id="pag">
<a name="pag1">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag2">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag3">TITULO </a>

<p>TEXTO

</p>
</div>

<div id="pag">
<a name="pag4">TITULO </a>

<p>TEXTO

<br>Agora você pode fazer sua petpage! Criar quantas páginas quiser! E dentro do style, você pode definir outras coisas em CSS.
<br>Ah, se a sua petpage tem mais de duas caixinhas, codifique a terceira e use o código de petpage normal para escrever dentro dela, ok?
<br>E não esqueça de me <a href="#linka">linkar</a> caso tenha usado esse tutorial.

<br><br><br><br>Ficou com alguma dúvida? mande um <a href="http://www.neopets.com/neomessages.phtml?type=send">neomail</a>.

</p>
</div>

<div id="pag">
<a name="tamanhos"><center>Tabela de Tamanhos</center></a>

</p>
</div>

<div id="pag">
<a name="awards"><center>Awards recebidos</center></a>

<p></p>
<center>
<a href="/~_figurinha_"><img src="http://img716.imageshack.us/img716/8591/award1x.png" border="0"></a>
<br>Obrigada, natha_zinha
<br><br><a href="http://www.neopets.com/~Dyanieh"><img src="http://i683.photobucket.com/albums/vv195/aninhaarv/1-1.png" border="0"></a>
<br>Obrigada, annybr_add
<br><br><a href="http://www.neopets.com/~Cynbunny_4__4"><img title="Screens da cynbunny" src="http://i756.photobucket.com/albums/xx208/Screens_Cynbunny/AwardOuro.png" border="0"></a>
<br>Obrigada, roberto_4__4  
<br><br><a href="http://neopets.com/~makacheeky"><img src="http://a.imageshack.us/img198/5329/award1maka.jpg" border="0"></a>
Obrigada, tatadaniyayabruno  
<br><br><br><br><br><a href="#sobre"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/Setas/arrow_1.gif" border="0"> Voltar</a><p>

</p>
</center>
</div>

<div id="pag">
<a name="contato"><center>Contato</center></a>

<p>Tem alguma dúvida? Quer ser parceiro, avaliar a PP, fazer sugestões, criticas? Mande um neomail clicando aaqui: <a href="http://www.neopets.com/neomessages.phtml?type=send"><img src="http://i619.photobucket.com/albums/tt279/neopeetsbiacardi/WebIcons/MiniGifCarta03.gif" border="0"></a>

</p>
</div>

<div id="pag">
<a name="linka"><center>Linka?</center></a>

Por favor, linke-nos caso o tutorial tenha lhe ajudado. E não copie nenhum tutorial da Cakes&Coffee sem a minha permissão.

Códigos Básicos de Html

Aqui vai ter alguns códigos uteis para você usar na sua petpage.

Negrito

Sublinhado

Italico

Pular uma
linha
obs: se quiser, tire o ultimo br.

~~Riscado~~

Centralizar o texto

Cor do texto
obs: no lugar de COR, coloque algum código desta tabela.

Mudar o tamanho
obs:Substitua 5 por algum numero desta desta tabela.

Hiperlink
obs:substitue LINK pelo link que você quer que a pessoa seja direcionada quando clicar na frase/palavra

Para fazer uma barra rolante

Para efeito "bate-e-volta

Para fazer uma linha

Para o nome do usuário aparecer. Ex: guest /não, eu não adivinhei seu nome
obs:Tire o ponto entre o "o" e o "r" para funcionar.

Para colocar uma imagem
obs:substitue LINKDAIMAGEM.PNG pelo link da sua imagem.

Para colocar uma imagem com link
obs:substitue LINKDAIMAGEM.PNG pelo link da sua imagem e LINK pelo url da página que você quer que a pessoa seja direcionada quando clicar na imagem.

Contadores

Um site bastante usado para fazer contadores é o www.boingdragon.com.br, no menu lateral, clique em "Counter Signup" para fazer uma conta.
Depois disso, clique em "Counter Login", se não for direcionado diretamente para a página de login.
Quando entrar, clique em "Add a New Counter".
Para fazer um contador personalizado, clique em cima da imagem do Schorchio.

Agora, ao lado de "Background Image URL" coloque o url da sua imagem, caso não tenha, hospede-a (recomendo o site tinypic, aí é só hospedar na home e pegar o link de "Direct Link for Layouts") Depois, clique em "Update Url". Personalize o seu contador de acordo com a imagem abaixo:

Em "Instance Name", de um nome para o seu contador.
Em "Start Count at" escolha em qual número o seu contador vai começar (pode deixar em 0, se quiser)
Em seguida, clique em "Create Counter."
Você verá uma imagem do seu contador e várias opções, clique em "Install" e copie o código em negrito.
Agora é só colocar na sua petpage!

Linke-mes e Awards

Primeiro, vou te passar o código para contador, em seguida entraremos em ação *-*
<a href="/"><img src="-blocked-" border="0"></a>
Hospede a imagem que você quer usar como linke-me e substitua LINK no código pelo link da sua petpage, e IMAGEM.PNG pelo link da imagem que você quer usar (faça de preferencia em PNG, que a qualidade é melhor)
E deu, viu que fácil? Para fazer award é o mesmo código.

Codificando Layouts

Acredite ou não, é bem fácil, é preciso ter coragem e paciencia, só isso.
Abra o Paint, abra seu lay e siga as instruções a seguir...

Layout Continuo

Layout Não-Continuo

Menu de Navegação

Um esclarecimento antes, esse tutorial não é para layouts multipagina (como esse), e sim, para menu de navegação. Todas as coisas estarão em uma mesma página, é só ir baixando a barra de rolagem e você as encontrará, o menu só serve para organizar melhor.

Coloque esse código na caixinha da navegação:
<a href="#pag1">Parte 1</a> <br><a href="#pag2">Parte 2</a> <br><a href="#pag3">Parte 3</a> <br><a href="#pag4">Parte 4</a> <br><a href="#pag5">Parte 5</a>
Substitua Parte 1, Parte 2, etc, pelos nomes que você quer dar aos links. Exemplo: Créditos, Awards, Home, Regras...
Se você quiser mais links, copie isso:
<a href="#pag0">Parte 0</a>
e cole, quantas vezes quiser, mas depois de pag, cada link deve ter um numero DIFERENTE.

Agora, cole esse link onde você quer o conteudo:
<a name="pag1">TEXTO</a>

Caso queira mais, copie e cole quantas vezes quiser, mas sempre substitua o número depois de pag. Exemplo: Se você quer que o link de Créditos vá para o dito cujo, coloque 3 depois de pag no menu de navegação e também 3 depois da pag no conteudo.

Exemplo de layout com navegação: <div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <div style="position: absolute; left: -blocked-; top: -blocked-; width: -blocked-; height: -blocked-; overflow: auto;"> <a href="#pag1">Parte 1</a> <br><a href="#pag2">Parte 2</a> <br><a href="#pag3">Parte 3</a> </div> <div style="position: absolute; left: -blocked-; top: -blocked-; width: -blocked-; height: -blocked-;"> <a name="pag1">TEXTO</a> <a name="pag2">TEXTO</a> <a name="pag3">TEXTO</a> <br><br><br><a href="#home"><img src="http://i171.photobucket.com/albums/u300/ferny-dust/sozai/home/22.gif" border="0"></a> </div> <div id="pag"> <a name="continuo"><center>Layout Contínuo</center></a> <p>Pegue a ferramenta Selecionar. <br><img src="http://i52.tinypic.com/8z4u81.png"><br>Selecione a caixinha onde quer que fique o texto, e sem soltar o mouse, aperte a tecla <i>Print Screen</i> (que fica em cima das setas, ao lado do Scroll Lock e em cima do Insert) <br>Abra uma outra janela no paint e aperte CTRL+V, você vai ver que no canto direito de baixo tem uma serie de numeros, são esses que vamos usar. <br><img src="http://i54.tinypic.com/mhymqb.png"><br>Agora anote esses números no bloco de notas. <br>Faça essa mesma operação quantas vezes precisar, em todas as caixinhas. <br>Agora, com o seu lay no paint, vá no menu Imagem, Inverter/Girar, e escolha Inverter Verticalmente. Vai ficar de cabeça pra baixo. <br>Vá em Imagem-Atributos, em Altura, coloque 10. <br>guest: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA, cade meu lay? <br>Calma, calma. Salve agora com <b>OUTRO NOME</b>, para não perder o seu layout. <br>Hospede e copie o link, cole no bloco de notas. Hospede seu layout, copie o codigo e coloque no bloco de notas. <br><textarea id="caixinha"><div style="position: absolute; top: 0; left: 0;"> <div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <div style="position: absolute; left: -blocked-; top: -blocked-; width: -blocked-; height: -blocked-;"> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO <br>No lugar de LINKDALINHA.PNG coloque o link dessa linha que formou, depois que colocamos altura em 10. <br>Em LINKDOLAYOUT.PNG coloque o link do seu layout <strike>(dãr)</strike> <br>e em LEFT, TOP, WIDTH e HEIGHT, coloque aqueles números que você anotou, lembra? <br>Se você tiver mais de uma caixinha, coloque no final do código: <br><textarea id="caixinha">

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 2
E repita quantas vezes for necessário.

Ficou com alguma dúvida? mande um neomail.

Voltar

Layout Não-Continuo

Esse tutorial não é para layouts multipagina.

Pegue a ferramenta Selecionar.

Selecione a caixinha onde quer que fique o texto, e sem soltar o mouse, aperte a tecla Print Screen (que fica em cima das setas, ao lado do Scroll Lock e em cima do Insert)
Abra uma outra janela no paint e aperte CTRL+V, você vai ver que no canto direito de baixo tem uma serie de numeros, são esses que vamos usar.

Agora anote esses números no bloco de notas.
Faça essa mesma operação quantas vezes precisar, em todas as caixinhas.
<div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <div style="position: absolute; left: -blocked-; top: -blocked-; width: -blocked-; height: -blocked-; overflow: auto;"> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO <br>Em LINKDOLAYOUT.PNG coloque o link do seu layout <strike>(dãr)</strike> <br>e em LEFT, TOP, WIDTH e HEIGHT, coloque aqueles números que você anotou, lembra? <br>Se você tiver mais de uma caixinha, coloque no final do código: <br><textarea id="caixinha">

TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 2
E repita quantas vezes for necessário.

Ficou com alguma dúvida? mande um neomail.

Voltar

Créditos

Obrigada a BTemplates pelo lay.
Mini gifs por Graphics da Bia
Alguns Mini gifs por Gifs Html
Widget por T.F.B
Button lindoso por Buttonfly
A ~~minha mãe~~ todos que me ajudaram a fazer essa petpage
E a você, guest por visitar a Cakes&Coffee!

Por favor, se eu utilizei algo da sua petpage e esqueci de pôr os créditos, mande um neomail.