xTibia

.com
LE
website

[Modern ACC - NTO] Tutorial Rapido De Como Criar uma Nova Aba

Por LeoTK, 13 de abr. de 2015 em Tutoriais de Websites

otserv
tibia
script
5
2.6k
LeoTKL
13 de abril de 2015 às 07:46

olá galera do xtibia, bom sei que esse tutorial é muito simples porem existe algumas pessoas que tem dificuldade de criar uma aba no modern acc, então resolvi criar esse tutorial rápido de como criar a aba por prints. Bom vamo lá

será dividido entre

1º passo - index criando aba do lado esquerdo do site

2º passo - Criando o conteúdo da aba

3º passo - Dicas e algumas sugestões

lembrete: não sou especializado vou encinar apenas oque eu sei e aprendi, mas posso ajudar resolver algumas dúvidas, porem repito não sou especializado porem quero ajudar o pessoal com alguma coisa útil que aprendi ^^

1º passo - Vá na pasta do modern

xlwTzeI.png

 

abra a pasta Templates/Pasta da sua template

 

PywG6R4.png

 

Dentro da pasta Abra o Arquivo Index - Como bloco de notas

 

N0wKixV.png

 

Dentro do arquivo Index procure está linha

 

<li><a href="{$path}">Novidades</a></li>

ou

só procure novidades

 

ai você coloca este código logo abaixo da linha que você procurou: <li><a href="{$path}/index.php/p/v/nome do arquivo">Nome Da Aba</a></li>

 

e configure o nome do arquivo para o mesmo do da aba por exemplo nome da aba sera bate-papo então coloque o nome do arquivo para batepapo < simples facil de lembrar

 

feito isso, pode salvar e fechar o arquivo index.

 

Voltando a pasta do modern, agora você irá procurar a pasta System que fica em cima da pasta templates

depois que tiver dentro da pasta System procure a pasta Pages Depois disso selecione qualquer aquivo dentro desta pasta copie e cole e mude o nome para o nome do arquivo que você configurou no index

 

exemplo: <li><a href="{$path}/index.php/p/v/batepapo">Bate-Papo</a></li>

 

e dentro desse arquivo você coloca o código do conteúdo da aba

 

 

 

2º Passo - Criando o conteúdo da aba

 

 

 

como tinha dito eu não sou especializado por isso normalmente eu não crio do zero a estrutura html normalmente eu pego algum código pronto e vou editando como é batepapo o nosso exemplo vou pegar um código do xat de batepapo como exemplo mesmo. No primeiro passo você criou a aba do site, criou o arquivo para colocar o conteúdo da aba agora você precisa do código html

 

código exemplo \/

 

 

 

<body>
<embed wmode="transparent" src="http://www.xatech.com/web_gear/chat/chat.swf"quality="high" width="540" height="405" name="chat" FlashVars="id=212279889" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.php" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=212279889">Go Large!</a></small><br>
</body>

 

 

 

basta colocar ele dentro do arquivo batepapo aperta ctrl + S para salvar e pronto basta testar para ver se deu tudo certo.

 

 

 

3º passo - Dicas e sugestões

Para alguem que estiver começando e não souber código html pesquisem no google oque vocês querem por exemplo: Código html contador de visitas < tem um site que disponibiliza vários códigos html como o contador de visitas, como o nome já diz ele conta cada vez que uma pessoa acessa o site e por ai vai você pode achar muitos códigos prontos para seu site.

 

Outra dica é cuidado na hora de editar algum código para não exclui alguma [; ou , ou "] para que não mas só faltando algum desses em um código da bug em tudo.

 

Sugestão procure sempre tentar entender o código antes de apagar ou mecher nele para você ir praticando um pouco também isso é muito bom caso for fazer algo do tipo futuramente.

 

 

é isso galera espero ter ajudado vocês

 

se tiverem alguma dúvida comenta se tiver algum erro comenta mesmo eu não sendo expert eu vou tentar ajuda-los.

 

obs: se faltar alguma coisa comenta que eu edito o tópico com a informação.

 

se gostou +rep xD

 

Créditos:

Eu xD

Editado Abril 13 por Brunds

DanihcvD
13 de abril de 2015 às 21:00

Bom amigo, deu um bug no 2° spoiler do tópico 2.

 

Para evitar esse bug, utilize nossa ferrmenta de postar códigos: Ix7bqzs.png

LeoTKL
13 de abril de 2015 às 21:02

Bom amigo, deu um bug no 2° spoiler do tópico 2.

 

Para evitar esse bug, utilize nossa ferrmenta de postar códigos: Ix7bqzs.png

 

 

arrumado

DanihcvD
13 de abril de 2015 às 21:08

:button_ok: Seu tutorial foi aprovado.

 

 

 

 

------------------------

DIca2: usa essa ferramenta pra qualquer tipo de código que vc colocar. Mesmo que o codigo não bugue, mas fique mais agradavel para visualização.

LeoTKL
13 de abril de 2015 às 21:09

button_ok.png Seu tutorial foi aprovado.

 

 

 

 

------------------------

DIca2: usa essa ferramenta pra qualquer tipo de código que vc colocar. Mesmo que o codigo não bugue, mas fique mais agradavel para visualização.

 

ok, irei usar sim ^^