Nous avons vu comment personnaliser l'apparence du moteur de recherche Hautetfort. Voyons maintenant comment installer un moteur de recherche Google simple, mais... modifié. Et si nous ne disons pas "moteur de recherche personnalisé Google", c'est que cela fera l'objet d'une autre note.
Ajouter un moteur de recherche Google
Reconnaissons-le, la fiche de la base de connaissances Hautetfort est suffisante aux blogueurs de la plateforme. Pour être parfaite, elle pourrait préciser que vous devez choisir "• Ajouter le code HTML / Javascript" quand vous choisissez "Ajouter un élément personnalisé" dans Contenu des colonnes de l'onglet PRÉSENTATION. Mais c'est un détail.
Soit dit entre-nous, ce mode opératoire est utile à tout blogueur, puisque la démarche est sensiblement la même sur toutes les plateformes. Le code donné par Google n'est pas parfait non plus. Une insertion du code de base donne ceci.
<!-- SiteSearch Google Simple-->
<form method="get" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<div style="background-color:white;">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" />
</a>
</div>
<input type="text" name="q" size="18" maxlength="255" value="" /><br />
<small>
<input type="hidden" name="domains" value="geemee.hautetfort.com" />
<input type="radio" name="sitesearch" value="" /> www <br />
<input type="radio" name="sitesearch" value="geemee.hautetfort.com" checked="checked" /> geemee.hautetfort.com<br />
</small> <input type="submit" name="btnG" value=" Google Search " /> </form>
<!-- SiteSearch Google -->
Personnaliser le code du moteur Google
- Je trouve utile d'ouvrir la page de résultats dans un nouvel onglet, c'est pourquoi j'ai précisé une cible.
- J'ai retiré le gros logo Google, mais vous pourriez simplement en choisir un autre.
- J'ai remplacé le nom de domaine par le nom du blog à coté du bouton radio, et j'ai souhaité inverser le local et le global en mettant "Gee Mee" avant "Web" (plutôt que "www"). Mais rien ne vous empêche de mettre "ici" et "partout" si cela vous chante, et même de garder deux lignes.
- permet de forcer la présence d'un "espace" supplémentaire, par ailleurs insécable.
<!-- SiteSearch Google Modifié-->
<form method="get" action="http://www.google.com/search"target=_blank>
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="text" name="q" size="18" maxlength="255" value="" /><br />
<small>
<input type="hidden" name="domains" value="geemee.hautetfort.com" />
<input type="radio" name="sitesearch" value="geemee.hautetfort.com" checked="checked" /> Gee Mee
<input type="radio" name="sitesearch" value="" /> Web<br />
</small>
<input type="submit" name="btnG" value=" Google Search " /> </form>
<!-- SiteSearch Google Modifié-->
Intégrer le moteur de recherche au modèle de blog
Comme nous avions vu lors de la note précédente, il est possible de passer des styles et modifier l'apparence du formulaire. C'est ce que j'ai fait pour intégrer le moteur en haut de la colonne de ce blog.
- Des styles ont été passés en direct pour modifier l'apparence.
- Le champ de saisie précise qu'il s'agit d'une "Recherche Google" et le texte disparaît quand on clique.
- Le champ de saisie a aussi été élargi en portant sa taille à 24. maxlength concerne la longueur de l'expression, ne modifiez pas.
- Le bouton "Google search" a été remplacé par une image.
L'extrait de code ci-dessous vous montre ce qu'il se passe dans un blog au "template" de base.
<!-- SiteSearch Google Intégré-->
<form method="get" action="http://www.google.com/search" target=_blank>
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="text" name="q"onBlur="if (this.value == '') {this.value = 'Recherche Google';}" onFocus="if (this.value == 'Recherche Google') {this.value = '';}" size="24" maxlength="255" value="Recherche Google" / style="background-color: #EFE6C5; border:1px solid #DDB666;height:18px;"><br />
<small>
<input type="hidden" name="domains" value="geemee.hautetfort.com" />
<input type="radio" name="sitesearch" value="geemee.hautetfort.com" checked="checked" /> Gee Mee
<input type="radio" name="sitesearch" value="" /> Web </small>
<input type="image"style="border:0px;vertical-align: top;" name="btnG"src="http://geemee.hautetfort.com/images/aspire/ok-button.gif">
</form>
<!-- SiteSearch Google Intégré-->
L'intégration d'un véritable "moteur de recherche personnalisé Google" n'est ouverte qu'aux possesseurs de compte Google, mais c'est facile et gratuit de s'inscrire. L'analyse des possibilités offertes demande un peu plus de temps, je vous remercie de m'en accorder.
