Ajouter une barre de recherche Google à votre forum

[Shadow]

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 Cliquez sur le bouton "Ajouter" pour ajouter une barre de recherche ; Voir illustration : 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 : 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 : Vous pouvez personnaliser en fonction de votre forum et prévisualiser le résultat avant d’enregistrer ; Voir illustration : 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 Panneau d'administration  Affichage  Page d'accueil - Généralités Voir illustration : Ce qui donne comme résultat : Sur la page d'accueil de votre forum via un script Javascript 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 : 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 :

Cette astuce a été proposée par Vivi. Et actualisé par Bipo (juin 2021). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.