ShiftActif fórum

[TUTORIAL] Menu de direcionamento da Home Page Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Menu de direcionamento da Home Page 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Menu de direcionamento da Home Page 1660898911
ShiftActif fórum

[TUTORIAL] Menu de direcionamento da Home Page Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Menu de direcionamento da Home Page 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Menu de direcionamento da Home Page 1660898911

[TUTORIAL] Menu de direcionamento da Home Page

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

[TUTORIAL] Menu de direcionamento da Home Page Empty [TUTORIAL] Menu de direcionamento da Home Page

Mensagem por Reborn Qui 7 Jun - 16:46

[TUTORIAL] Menu de direcionamento da Home Page Index_10 Menu de redirecionamento

Neste tutorial veremos como adicionar um menu à nossa página inicial. O menu servirá para que, ao usuário clicar no botão, ele seja movido à categoria, fórum, tópico ou qualquer link que desejar adicionar àquele botão.

--> Tutoriais <--
Menu de direcionamento da Home Page



- Adicionando o Script:
Para que façamos este efeito, é necessário que adicionemos um script à nossa caixa de mensagens de nossa página inicial.

Painel de controle Seta azul Visualizações Seta azul Página inicial Seta azul Geral

Adicione o código abaixo na caixa ''Mensagem na Página Inicial'':

Código:

<script>
jQuery(function() {
  jQuery('.img_list_hp img').mouseover(function() {
      jQuery('#img_list_alt').html(jQuery(this).attr('alt'));
  }).mouseout(function() {
      jQuery('#img_list_alt').html('Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!');
  });
});

</script><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c10-importante "><img height="59" src="http://icons.iconarchive.com/icons/everaldo/crystal-clear/64/Action-button-info-icon.png" alt="Todos os comunicados, anúncios e tópicos importantes do fórum encontram-se aqui."><span>Importante</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c1-espaco-do-usuario"><img height="59" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/64/personal-information-icon.png" alt="Temos um ótimo serviço de suporte, com equipe capacitada para lhe atender da melhor forma."><span>Espaço do usuário</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c16-loja-masterexp"><img height="59" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/64/autoship-icon.png" alt="Compre efeitos para seu perfil, troque seu nick e muito mais!"><span>Loja MasterExp</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c11-games-zone"><img height="59" src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/64/Paper-Mario-icon.png" alt="Aprenda mais sobre os jogos mais jogados da internet e divida sues conhecimentos com os demais usuários."><span>Games Zone</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c14-console-zone"><img height="59" src="http://icons.iconarchive.com/icons/capital18/ethereal-2/64/CD-Games-icon.png" alt="Aprenda sobre os consoles mais usados atualmente e troque informações."><span>Console Zone</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c3-design-zone"><img height="59" src="http://icons.iconarchive.com/icons/sirubico/black-metal/64/Programs-Photoshop-icon.png" alt="Aprenda e aprimore sus conhecimentos sobre design gráfico."><span>Design Zone</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c15-dia-a-dia"><img height="59" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/64/event-search-icon.png" alt="Comente sobre os mais variados temas que vive em seu dia a dia."><span>Dia a Dia</span></a></div><div class="img_list_hp"><a href="http://masterexp.forumeiro.com/c8-entretenimento"><img height="59" src="http://icons.iconarchive.com/icons/deleket/soft-scraps/64/Button-Talk-Balloon-icon.png" alt="Converse livremente sobre assuntos variados."><span>Entretenimento</span></a></div><div style="clear: both" id="img_list_alt">Passe o mouse sobre uma das imagens e conheça mais os nossos serviços!</div>

Neste código, deverá editar os campos de acordo com seu fórum. Abaixo encontra-se uma explicação de como editá-los.


<a href="http: //masterexp. forumeiro. com / c10-importante "><img height="59" src="http: //i cons. iconarchiv .com /icons/everaldo/crystal-clear/64/Action-button-info-icon.png" alt="Todos os comunicados, anúncios e tópicos importantes do fórum encontram-se aqui."><span>Importante</span>
Vermelho - Link para o qual o botão redirecionará.
Azul - Link que aparecerá dentro da caixa do botão.
Verde - Descrição que aparecerá abaixo do botão logo que o usuário passar o cursor sobre ele.
Laranja - Título do botão.


- Editando o menu:
Após adicionar o script à Home Page, é necessário que adicionemos um código à nossa folha de estilo CSS para que o efeito funcione como desejado e adquira uma aparência agradável.

Painel de controle Seta azul Visualizações Seta azul Imagens e Cores Seta azul Cores Seta azul Folha de estilo CSS

Adicione o código abaixo:

Código:

/*--- Caixa de direcionamento da home page----*/
.img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 10px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

.img_list_hp:hover {
background-color: #DCEAF5;
}

.img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}
.img_list_hp a {
color: #FFF !important;
text-decoration: none;
}
#img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}
/*--- Fim Caixa de direcionamento da home page----*/

Podes modificar quaisquer campos do código CSS para que o menu combine e se adeque ao seu fórum de forma harmoniosa.

- Resultado:

[TUTORIAL] Menu de direcionamento da Home Page 9nX2F




© Shiftactif & Thoth



[TUTORIAL] Menu de direcionamento da Home Page Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Menu de direcionamento da Home Page
Reborn

Reborn
Colaborador Actif

Masculino
Idade : 32
PointActif's : 4822
ReputActifs : 26
Mensagens : 406
Inscrição : 13/04/2012

100%

http://suportedesign.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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