Divine Cod's
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Divine Cod's

Últimos assuntos
Alinhar nome da scategoriasSex Mar 14, 2014 5:16 amrok
Tema deste fórumDom Jul 07, 2013 8:37 pmkamachi
Cor Do TopoTer Abr 23, 2013 6:35 pmQuakeline
Lista de tutoriaisTer Mar 12, 2013 3:58 pmQuakeline
queria uma parceriaQua Fev 20, 2013 8:29 pmQuakeline
Como botar botom Agradecer no topicoQua Fev 20, 2013 8:24 pmQuakeline
Por que widgets destorcem forum?Qua Fev 20, 2013 8:21 pmQuakeline
Como alinhar imagem da categoria à borda do forum?Ter Fev 19, 2013 10:24 amBaiken Mitsuki
Quero este TemaSeg Fev 18, 2013 6:19 pmQuakeline
Os membros mais ativos do mês
Nenhum usuário
Estatísticas
Temos 65 usuários registradosO último membro registrado é Skye W.Os nossos membros postaram um total de 249 mensagensem 61 assuntos
Quem está conectado?
Há 1 usuário online :: 0 registrados, 0 invisíveis e 1 visitante

Nenhum

Ver toda a lista

O recorde de usuários online foi de 239 em Seg Abr 12, 2021 8:00 am

[TUTORIAL] Tópicos e mensagens em modo hover

Divine Cod's :: Divine Cod's :: Tutoriais, dicas e astúcias
Ir para baixo
Quakeline
Quakeline
Administrador
Administrador
Inscrito dia: : 09/01/2013
Mensagens : 89
+

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

Qui Jan 10, 2013 12:33 pm
DC 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.

1º - 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()})});

2º - 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)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]Arrow 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;
Arrow Investimento - Escolha a opção "No índice";
Arrow Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;
Arrow 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;

3º - Resultado:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

₢ Divine Cod's
Ir para o topo
Permissões neste sub-fórum
Não podes responder a tópicos