[TUTORIAL] Buscar no final do fórum

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

[TUTORIAL] Buscar no final do fórum

Mensagem por MateusA em 20/08/13, 09:42 am



                               

         

       Buscar no final do fórum
       
       Com este código, poderemos criar uma caixa de busca ao final do fórum, possibilitando assim, mais comodidade e facilidade aos usuários do seu fórum.
       
--> Tutoriais, dicas e astúcias <--
        Buscar no final do fórum




        - Conhecendo o código:
       
Código:
        $(document).ready(function(){
                        $('body').append('<br><center><div><span id="pesqButton">Pesquisar no Forúm</span><div id="formPesq"><form target="_blank" action="/search"><input type="text" id="pesquisaCaixa" name="search_keywords"><input id="pesquisaButton" type="submit" value="OK"></form></div><br></div></center>');$('#pesquisaCaixa').val('Buscar...');
                        $('#pesquisaCaixa').focus(function(){if($(this).val() == "Buscar..."){$(this).val('');}});
                        $('#pesquisaCaixa').blur(function(){if($(this).val() == ""){$(this).val('Buscar...');}});
                        $('#formPesq').hide();$('#pesqButton').click(function(){$('#formPesq').focus();$('#formPesq').slideToggle();movimento('formPesq');});});
                        function movimento(para) {jQuery('html,body').animate(
                        {scrollTop: jQuery("#"+para).offset().top}, 500);}
        - Inserindo código JavaScript:
       Para isto você terá de ter um pouco de conhecimento com a folha de estilos JavaScript, aceda a:
       Painel de Controle :seta:Módulos :seta:HTML & JAVASCRIPT :seta:Gestão dos Códigos JavaScript
       

                               
SetaTítulo - Correspondente ao nome da página JavaScript/jQuery que será criada.
                               
Seta Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
       No índice: O código será aplicado ao índice do fórum.
       No portal : O código será aplicado ao Portal do fórum.
       Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
       Sobre os temas : O código será aplicado aos tópicos do fórum.
       Na galeria : O código será aplicado na sua Galeria de imagens.
       Em todas as páginas : O código será aplicado em todas as páginas do fórum. (Marque esta opção)
                               
Seta Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.
                               
Seta Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.
        - Aplicando CSS:
       Para isto você terá de ter um pouco de conhecimento com a folha de estilos CSS, aceda a:
       Painel de Controle :seta:Visualização :seta:Imagens e Cores :seta:Cores :seta:Folha de Estilo CSS

       

       E aplique o seguinte código:
       
Código:
        #pesquisaButton:hover{background: rgba(50, 50, 50, 0.9);}
                      #pesquisaButton{
                margin-left: 10px !important;padding: 5px;cursor:pointer;padding-left: 12px;border: 1px solid black;background: rgba(50, 50, 50, 0.7);padding-right: 9px;font-weight: 800;}
                      #pesquisaCaixa{height: 30px;background: #121212;color: white;border-top:0px;
                      border-right:0px;border-bottom:0px;border-left: 2px solid #181818;font-weight: 800;font: arial;
                      width:300px;}
                      #formPesq{max-width:400px;padding:14px;margin-top:7px;border: 2px solid #181818;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #252525;}
                      #pesqButton:hover{color:black;adding: 9px;border-top: 2px solid #121212;border-left: 2px solid #181818;
                      border-right: 2px solid ##121212;color: white;font-weight:bold;font: verdana;cursor:pointer;
                      border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #181818;
                transition-duration: 2s;
                transition-duration: 4s;
                transition-duration: 6s;
                transition-timing-function: linear;
                transition: color 2s ease 3s;
                -webkit-transition: all 2s linear;
                -moz-transition: all 2s linear;
                -o-transition: all 2s linear;
                transition: all 2s linear;  
                }
                      #pesqButton{padding: 9px;border-top: 2px solid #181818;border-left: 2px solid #181818;
                      border-right: 2px solid #181818;color: #fafafa;font-weight:bold;font: verdana;cursor:pointer;
                      border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #121212;
                margin-top: -10px !important;}
        - Resultado final:

       

       


       
       
©️ Fórum dos Fóruns

       

                               
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
       [Dúvida] Buscar no final do fórum
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum