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 Jeu 17 Juil 2014 - 15:04

Ajouter une barre de recherche Google à votre forum

Cette astuce nécessite que vous possédiez un compte Gmail pour utiliser le service Google Custom Search Engine.

Cette astuce 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 !

Créer le script via Google Custom Search Engine


Ajouter une barre de recherche Google à votre forum 14-05-10

  1. Cliquez sur le bouton "Ajouter" pour ajouter une barre de recherche ;

    Voir illustration :

  2. Renseignez l'adresse 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.

    Voir illustration :

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

    Voir illustration :

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

    Voir illustration :

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

    Voir illustration :


Installer le script sur votre forum Forumactif


Dans le message sur page d'accueil de votre forum


Citation :
Panneau d'administration  Affichage  Page d'accueil - Généralités

Voir illustration :

Sur la page d'accueil de votre forum via un script Javascript


Citation :
Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Barre de recherche Google" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

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);
});

Dans le code ci-dessus, il faut remplacer la valeur de la variable cx par celle de votre script (élément surligné en jaune dans l'illustration ci-dessous) :

Voir illustration :

Personnaliser la barre de recherche


Vous avez la possibilité de personnaliser la barre de recherche afin de l'adapter au thème de votre forum :

Citation :
Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet 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) */
}

Voir illustration :

Shadow

Shadow
Modéractive
Modéractive

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

Shadow a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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