[TUTORIAL] Tópicos e mensagens em modo hover Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

[TUTORIAL] Tópicos e mensagens em modo hover

Ir para baixo

[TUTORIAL] Tópicos e mensagens em modo hover Empty [TUTORIAL] Tópicos e mensagens em modo hover

Mensagem por Ace 09.02.13 11:58

[TUTORIAL] Tópicos e mensagens em modo hover Theme  Tópicos e mensagens em modo hover
Com base neste tutorial, você aprenderá a colocar a quantidade de tópicos e mensagens contidas nas categorias em modo hover, tirando assim o acúmulo de informações e deixando seu fórum mais elegante.


--> Tutoriais, dicas e astúcias <--
Tópicos e mensagens em modo hover



- Código que utilizaremos:
Código:
jQuery(function(){jQuery('li.row dd.topics, li.row dd.posts, li.header dd.topics, li.header dd.posts').css('display','none');jQuery('li.row').hover(function(){posts=jQuery(this).find('dd.posts').html();topics=jQuery(this).find('dd.topics').html();jQuery(this).find('dd.dterm div h3').append('<span class="row_info" style="display: none; background-color: #F3F3F3; border: 1px solid #eee; padding: 3px; margin-left: 20px; width: auto;"><strong>'+topics+'</strong> Tópicos & <strong>'+posts+'</strong> Mensagens</span>');jQuery('.row_info').show(1000).css('display','inline')},function(){jQuery('.row_info').hide(1000).remove()})});

- Inserir o código Javascript:
Aceda à Painel de controle  Seta  Módulos  Seta  HTML e Javascript  Seta  Gestão dos códigos Javascript
Clique no botão "Criar um novo javascript"

(carregue na imagem para aumentar)
[TUTORIAL] Tópicos e mensagens em modo hover 2u5q4212
[TUTORIAL] Tópicos e mensagens em modo hover 110111Seta Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;
[TUTORIAL] Tópicos e mensagens em modo hover 110210Seta Investimento - Escolha a opção "No índice";
[TUTORIAL] Tópicos e mensagens em modo hover 110310Seta Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;
[TUTORIAL] Tópicos e mensagens em modo hover 110410Seta Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas;

  • Resultado:
    [TUTORIAL] Tópicos e mensagens em modo hover Sem_ta10





©️ Fórum dos Fóruns


[TUTORIAL] Tópicos e mensagens em modo hover Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Tópicos e mensagens em modo hover
Ace
Ace
Membro Entusiasta

Membro desde : 06/07/2011
Mensagens : 8881
Pontos : 11608

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos