Ajouter une barre de recherche Google à votre forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Ajouter une barre de recherche Google à votre forum

Message par Shadow le Jeu 17 Juil 2014 - 15:04

Ajouter une barre de recherche Google à votre forum


Ce tutoriel vous explique comment installer une barre de recherche Google sur votre forum Forumactif. Cet ajout est très utile pour trouver des sujets similaires sur le forum, et est très facile à configurer!


Étape 1: Sur Google Custom Search Engine

1. Rendez-vous sur Google Search Engine pour créer votre barre de recherche.

2. Cliquez sur le bouton "Add" pour ajouter une barre de recherche.


3. Renseignez l’url de votre forum, choisissez la langue et renseignez un nom pour la barre si vous le souhaitez, puis valider en cliquant sur Créer.


4. Dans modifier le moteur de recherche, personnalisez le rendu des résultats de recherche et de la barre en elle-même dans Apparence.


Vous pouvez personnaliser en fonction de votre forum et prévisualiser le résultat avant d’enregistrer.


Une fois votre barre personnalisée, sauvegardez et obtenez le code à copier sur votre forum.


Étape 2: Sur votre forum Forumactif

Insérer le code sur la page d’accueil

Pour cela rendez-vous dans votre panneau d’administration > Affichage > Page d’accueil > Généralités : Message sur la page d’accueil, coller le code et enregistrer.

Votre barre de recherche est désormais disponible sur l'accueil de votre forum ! Pc



Ou créer un nouveau script

Vous pouvez également créer un nouveau code javascript sur toutes les pages et personnaliser le rendu de la barre sur la feuille CSS du forum.

Pour cela allez dans le panneau d’administration, Modules > Gestion des codes Javascript : Créer un nouveau javascript (sur toutes les pages)

Code:
$(function () {
  //Renseigner ici entre ' ' le code obtenu sur Google
  var cx = '004869397998480616231:wa9kmobovvq';
 
        if($("div#search-box").length){ 
      //phpBB3 avec barre de recherche
      $("div#search-box").html("<div id='my_gs'><gcse:search></gcse:search></div>");
  }else{
      if($("div#page-body").length){
        //phpBB2, phpBB3 sans barre de recherche & punBB
        $("<div id='my_gs'><gcse:search></gcse:search></div>").insertBefore("div#page-body");
      }else{
        //Invision
        $("<div id='my_gs'><gcse:search></gcse:search></div>").insertAfter("div#submenu");
      }
  }
 
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
});

Puis dans Affichage > Images et Couleurs > Couleurs : Feuille de style CSS

Pour personnaliser la barre de recherche:
Code:
.my_gs{
      /* Propriétés CSS (sans !important) */
}

div#my_gs{
        width: 300px; /* Par exemple */
}

Pour personnaliser le cadre de recherche:
Code:
input.gsc-input{
      /* Propriétés CSS (avec !important) */
}

Pour personnaliser le cadre Google:
Code:
#gsc-i-id1{
        /* Propriétés CSS (avec !important) */
}

Pour personnaliser le bouton de recherche:
Code:
input.gsc-search-button{
      /* Propriétés CSS (avec !important) */
}

Vous pouvez ainsi afficher la barre de recherche actuelle comme sur le FdF Wink





Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23811
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum