Ajouter une barre de recherche Google à votre forum

[Shadow]

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

Cette astuce a été proposée par Vivi. Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI. Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.