Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

28.05.2010

Ajouter et personnaliser un moteur de recherche Google sur son blog Hautetfort... ou autre

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.

moteur-google-simple.png<!-- 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

  1. Je trouve utile d'ouvrir la page de résultats dans un nouvel onglet, c'est pourquoi j'ai précisé une cible.
  2. J'ai retiré le gros logo Google, mais vous pourriez simplement en choisir un autre.
  3. 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.
  4. &nbsp; permet de forcer la présence d'un "espace" supplémentaire, par ailleurs insécable.

moteur-google-modifie.png<!-- 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 &nbsp;
<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.

  1. Des styles ont été passés en direct pour modifier l'apparence.
  2. Le champ de saisie précise qu'il s'agit d'une "Recherche Google" et le texte disparaît quand on clique.
  3. Le champ de saisie a aussi été élargi en portant sa taille à 24. maxlength concerne la longueur de l'expression, ne modifiez pas.
  4. 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.

moteur-google-avance.png<!-- 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 &nbsp;
<input type="radio" name="sitesearch" value="" /> Web &nbsp;</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.

14:35 Écrit par Gee Mee dans Boîte à outils, Personnaliser son blog, Widgets | Lien permanent | Commentaires (0) | Tags : moteur, recherche, rechercher, google | |  del.icio.us | | Digg! Digg |  Facebook

14.01.2010

Personnaliser l'affichage des notes relatives avec LinkWithin

Vous dynamisez vos archives avec LinkWithin et vous aimez ça ? Vous avez raison. Votre bonheur n'est pourtant pas parfait, car vous souhaiteriez que l'affichage corresponde un peu plus à vos goûts. Je me suis penché sur le sujet à l'invitation d'Angelie de Gestes-Environnement, et voici ce que j'ai relevé.


Fausse piste

La mise en forme du contenu du module est commandée par une feuille de style hébergée par LinkWithin. Regardez le code source d'une de vos pages, et vous constaterez que vous n'avez pas spécifié tous les styles utilisés.

Comme il n'est pas possible d'intervenir sur une feuille de styles dont on n'est pas propriétaire, on aurait pu imaginer que d'encapsuler l'objet suffirait. C'est un peu ce que l'on fait quand on personnalise le lecteur de vidéo Dailymotion.

Lire la suite

10:06 Écrit par Gee Mee dans Configuration avancée, Widgets | Lien permanent | Commentaires (2) | Tags : linkwithin, widget | |  del.icio.us | | Digg! Digg |  Facebook

04.12.2009

Dynamisez vos notes avec vos archives et LinkWithin

Kielut l'a vu dans d'autres blogs, elle l'a voulu dans le sien. Au bas de chaque note de blog, le widget LinkWithin affiche les liens vers des notes "similaires", selon le contenu, le titre ou les tags. La note explicative d'origine a été publiée sur Upsetdiary, et nous l'avons fait évoluer ensemble pour cette version avec vidéo.

Lire la suite