Tutorial de Contadores da Biia

Bem-vindo

Bem vindo ao Tutorial de Contadores da Biia. Aqui você poderá aprender a fazer seu própio contador, flag map ou widget, é simples e rápido! Desculpem pelo tempo que o site ficou fora do Neopets e inativo. Eu comecei a parar de entrar aos poucos e eu não percebi por quanto tempo eu deixei o TCB sem atualizações. Então eu apaguei tudo que tinha nas páginas dos meus pets, e fui me preocupar mais com meu Tumblr. Agora o TCB voltou para ficar (eu espero)!

Dica: arraste as imagens do tutorial para a barra de endereços para vê-las em seu tamanho original.

Neomail

Tutoriais

Tutorial de Contadores
Tutorial de Widgets
Tutorial de Flag Counters

Tutorial de Contadores

Para começar, você deve saber o que é um contador. É aquela imagem que tem números que contam as visitas daquela página desde que ele foi colocado ali:

Ele é colocado em Petpages, Associações, Petlookups, Userlookups, lojas, galerias... Para fazer um, vamos para a próxima parte, que é a de montar um contador, ou seja, pegar uma imagem e colocar os números que contam as visitas.

Mas, onde eu monto, consigo a imagem, etc? Você pode criar uma imagem e hospedá-la, ou, caso já tenha o link dela, ir direto para a parte de montar o contador:

Preciso hospedar uma imagem;
Já tenho a URL da minha imagem.

Hospedando sua imagem

Para hospedar sua imagem, entre no site Photobucket.com e crie uma conta, eu recomendo, a qualidade das imagens fica muito boa e é um dos sites mais usados pelos usuários que conheço. Depois de criar uma conta (demora menos de um minutinho), clique em "Upload Now" e selecione a imagem que quiser (aperte "Ctrl" para selecionar mais de uma imagem). Lembre-se que pode usar imagens animadas, portanto use a sua criatividade ao usá-las. Quando o site tiver feito o upload, a imagem vai aparecer (hora de editar o título e a legenda, se quiser). Clique em "Save and continue to my album" e em seguida coloque o cursor em cima da imagem. Copie o "Direct Link", que deverá terminar em .gif, .png ou .jpg (lembre-se de salvar sua imagem em um desses formatos). Agora vamos para a segunda parte, a de montar o contador.

PS: o Photobucket apaga as suas imagens de você não entrar depois de um tempo na sua conta, mas é só depois de muito tempo mesmo!

Fazendo o contador

Para montar o contador, crie uma conta no site BoingDragon (boingdragon.com), clicando em "Counter Signup". É um processo muito rápido e fácil:

Você será direcionado para uma página. Essa página tem uma barra na parte superior. Clique no link indicado:

Clique em "Add a New Counter". Se quiser usar umas das imagens que o site sugere, basta clicar sobre a escolhida. Para usar a sua, clique no Scorshio azul no fim da página, que te levará para esta página (se usar as imagens do site, o espaço para colocar o link da imagem não aparecerá, não será possível mudar o tipo de letra, etc):

Coloque o link da imagem em "Background Image URL" e clique em "Update URL". Para mudar quantos números aparecem no contador, mude o número 1 em "Show at least 1 digits", e para tirar a borda da fonte dos números, mude o on em "Turn on font border" para off. O "Horizontal/Vertical" muda a posição dos números (horizontal ou vertical). Para mudar a fonte, selecione o tipo em "Font" (são 3 tipos: Small, Spooky e Large), e a cor da Borda (se houver) e dos números. Para testar as mudanças, clique em "Preview".

Agora mude a posição dos números. "X" muda para a direita ou esquerda (quanto menor o número escolhido, mais para a esquerda) e "Y" para cima ou para baixo (número menor, mais para cima). Conforme você muda os números, clique em "Re-center" para visualizar na imagem escolhida. Depois de terminar, coloque em "Instance Name" a legenda, título, etc.
Exemplo: Contador iniciado em dd/mm/aa, ou Contando desde dd/mm/aa, ou o título da página em que vai colocar o contador.

Na área "Start Count at", coloque o número em que o contador deve começar a contar, deixe em 0 mesmo, se quiser começar do 0, mais se quiser continuar a contagem de outro contador, coloque o número que o contador está marcando. Clique em "Creat Counter". Agora seu contador está pronto! Vamos pegar o código. Depois de criar o contador, o site te levará para a página inicial, mas o contador que acabamos de criar está lá! Clique em "Install" e copie o código em negrito. Agora basta colar onde você quer colocar o contador e pronto! Você já pode contar o número de visitas da sua página.

Tutorial de Widget

Para começar, devemos saber o que é um widget. É uma espécie de contador, mas conta as pessoas que estão visitando a sua página no momento. Lembre-se que o widget funciona em lojas, petpages, userlookups, petlookups, galerias e associações (onde o Neopets aceita o uso de HTML e CSS):

Um widget é mais fácil de fazer do que um contador comum, e mais rápido também. Para fazermos o widget, copie o link da caixinha e cole na barra de endereços:

http://whos.amung.us/?nonjscode=true.

Depois de entrar no site, desça até o fim da página e clique em "demonstração":

Após clicar no local indicado, uma nova página aparecerá, com várias opções de widgets. Você pode optar pela primeira opção, sem customizar (em verde), por customizar as cores do widget (em vermelho), ou pelo widget compacto (em azul), que também não pode ser customizado. Infelizmente, o Neopets não aceita os mapas do whos.amung.us.

Vou ensinar aqui como fazer o personalizado, mas se você optou pelas outras duas opções, pule esta parte, e siga direto para a parte de montar o código.
Para fazermos o personalizado, clique nele e depois emnossa paleta, e a segunte página irá aparecer:

O site lhe dá duas opções: escolher uma cor da roda de cores e da paleta, ou usar suas próprias cores. Para escolher suas cores na hora, basta clicar na roda que está ao lado de "Cor do Widget" e "Cor da Fonte", e escolher a cor desejada, ou clique aqui para ver uma tabela de cores, cliando em "Prever" para ver as cores selecionadas no widget.

Após a escolha das cores que irão para o widget, vamos montar o código. Copie apenas o que está marcado abaixo, e cole no lugar do link usado:

<img src="http://images.neopets.com/items/bg_petpets_yeoldestall.gif">

Pronto! Agora você já tem seu widget, para colocar onde quiser, e ver quantas pessoas estão visitando sua página!

Tutorial de Flag Counter

Para começarmos a fazer nosso Flag Counter, precisaremos saber o que é um. É um contador, mas mostra de onde vieram os seus visitantes, usando as bandeiras dos países. O site disponibiliza dois modelos, pode ser um mapa (chamado pelo site de Flag Map) ou o "padrão" (chamado de Top Countries).

Os dois tipos são fáceis e rápidos, e vamos aprender a fazer os dois. Para começar, visite o site flagcounter.com. Desça até o fim da página, onde vamos montar o Flag Counter. Escolha o seu tipo:

Top Countries
Flag Map

Top Countries

_{Para fazer seu contador, arraste a imagem acima para a barra de endereços, para vê-la em seu tamanho real.}

Legenda:

Verde: selecione o tipo de contador, no caso, "Top Countries".
1: escolha o número máximo de bandeiras que poderão aparecer.
2: coloque o número de colunas de seu Flag Counter (mais colunas, mais largo).
3: título de seu Flag Counter. Pode não aparecer (opção "none"), ser "Visitors" ou personalizado (selecione "Custom").
Vermelho: escolha as cores de seu Flag Counter. "Background Color" é a cor do fundo, "Text Color" é a cor do título e "Border Color" é a cor da borda. Clique aqui para ver uma tabela de cores.
1: selecione esta opção se quiser que a sigla dos países apareça ao lado das bandeiras no seu Flag Counter. Ex: BR (Brasil), US (Estados Unidos), entre outros.
2: marque esta opção se quiser que o total de visitas apareça.

Agora que você já montou seu Flag Counter, vamos montar o código.

Flag Map

_{Para fazer seu contador, arraste a imagem acima para a barra de endereços, para vê-la em seu tamanho real.}

Legenda:

Verde: selecione o tipo de contador, no caso, "Flag Map".
1: escolha o tamanho de seu Flag Map: Pequeno (Small), Médio (Medium) ou Grande (Large).
2: título de seu Flag Counter. Pode não aparecer (opção "none"), ser "Visitors" ou personalizado (selecione "Custom").
Vermelho: escolha as cores de seu Flag Counter. "Text Color" é a cor do título e "Border Color" é a cor da borda. Clique aqui para ver uma tabela de cores.
Rosa: marque esta opção se quiser que o total de visitas apareça.

Agora que você já montou seu Flag Map, vamos montar o código.

Montando o código

Após terminar de personalizar seu Flag Counter, clique em "Get your Flag Counter". Logo depois uma tela aparecerá, pedindo seu e-mail. Não coloque, apenas selecione "Skip". Depois, uma página com os códigos será aberta. No código de fóruns, copie o que está entre [IMG] e [/IMG], como aparece na imagem:

Agora, cole a URL no lugar do link colocado no código da caixinha abaixo.
<img src="http://images.neopets.com/images/htmltonu.gif">
Pronto! Agora é só colar o código onde quiser que o Flag Counter apareça.

Tabela de Cores

Voltar para o tutorial de Widgets
Voltar para o tutorial de Top Countries
Voltar para o tutorial de Flag Maps

Extras

Versões anteriores
Sobre a Biia

Versões anteriores

Eu só não consegui recuperar uma versão, porque era premade, e ficou por pouco tempo, era apenas pro TCB não ficar sem lay de Halloween, mas eu acabei fazendo uma. Os layouts estão organizados do mais antigo até o mais novo.

Voltar

Sobre a Biia

Meu nome é Beatriz, mas você pode me chamar de Biia-nyan ou só Biia. Sou a pessoa mais viciada em K-ON!, Vocaloid e Kuromi que conheço (pelo menos fora da internet). Meus pratos favoritos são yakisoba e macarrão, e amo Coca-Cola. Meus Vocaloids favoritos são a Megpoid, a SeeU e os Kagamine Rin e Len.

@biiavivacqua
toriwaittawatashi @ Tumblr

Voltar

Sitely