Ir para conteúdo

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

LeoTK

Por LeoTK
em Tutoriais de Websites

 Share

Posts Recomendados

LeoTK

LeoTK 173

Postado
Postado (editado)

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 por Brunds
Link para o comentário
Compartilhar em outros sites
LeoTK

LeoTK 173

Postado
  • Autor
Postado

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

Link para o comentário
Compartilhar em outros sites
Danihcv

Danihcv 332

Postado
Postado

: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.

Link para o comentário
Compartilhar em outros sites
LeoTK

LeoTK 173

Postado
  • Autor
Postado

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 ^^

Link para o comentário
Compartilhar em outros sites
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...